This tutorial explains about how to add tailwind CSS framework to astro project.

Create a Astro project

First, Create a astro project using 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 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 directoriies, installed dependencies

add tailwind to astro project

astro provides 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 following dependencies to package.json

  • @astrojs/tailwind
  • tailwindcss@^3.0.24

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

import { defineConfig } from 'astro/config';

import tailwind from "@astrojs/tailwind";

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