This tutorial explains how to add a tailwind CSS framework to an Astro project.

Create an Astro project

First, Create an astro project using the npm create astro@latest command

E:\myblogs>npm create astro@latest

 astro   v2.8.4 Launch sequence initiated.

   dir   Where should we create your new project?
         ./myapp

  tmpl   How would you like to start your new project?
         Empty
      ✔  Template copied

  deps   Install dependencies?
         Yes
 ██████  Installing dependencies with npm...
      ▲  error Request timed out after one minute
      ✔  Dependencies installed

    ts   Do you plan to write TypeScript?
         Yes

   use   How strict should TypeScript be?
         Strictest
      ✔  TypeScript customized

   git   Initialize a new git repository?
         Yes
      ✔  Git initialized

  next   Liftoff is confirmed. Explore your project!

         Enter your project directory using cd ./w3logs
         Run npm run dev to start the dev server. CTRL+C to stop.
         Add frameworks like react or tailwind using astro add.

         Stuck? Join us at https://astro.build/chat

Astro project created with prototype files and directories, installed dependencies

Add tailwind to Astro project

astro provides a tailwind framework as integration which you can add it easily

Run below command

astro add tailwind

Here is an output

E:\myblogs\w3logs>astro add tailwind
√ Resolving packages...

  Astro will run the following command:
  If you skip this step, you can always run it yourself later

 ╭─────────────────────────────────────────────────────────────────╮
 │ npm install @astrojs/tailwind astro@^2.6.5 tailwindcss@^3.0.24  │
 ╰─────────────────────────────────────────────────────────────────╯

√ Continue? ... yes
√ Installing dependencies...

  Astro will generate a minimal ./tailwind.config.cjs file.

√ Continue? ... yes

  Astro will make the following changes to your config file:

 ╭ astro.config.mjs ─────────────────────────────╮
 │ import { defineConfig } from 'astro/config';  │
 │                                               │
 │ import tailwind from "@astrojs/tailwind";     │
 │                                               │
 │ // https://astro.build/config                 │
 │ export default defineConfig({                 │
 │   integrations: [tailwind()]                  │
 │ });                                           │
 ╰───────────────────────────────────────────────╯

√ Continue? ... yes

   success  Added the following integration to your project:
  - @astrojs/tailwind

It adds the following dependencies to package.json

  • @astrojs/tailwind
  • tailwindcss@^3.0.24

updates astro.config.js by adding a tailwind object entry to integrations.

import { defineConfig } from 'astro/config';

import tailwind from "@astrojs/tailwind";

// https://astro.build/config
export default defineConfig({
  integrations: [tailwind()]
});