1
% npx astro add tailwind
2

3
✔ Resolving packages...
4

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

8
 ╭──────────────────────────────────────────────────────╮
9
 │ npm i @tailwindcss/vite@^4.1.18 tailwindcss@^4.1.18  │
10
 ╰──────────────────────────────────────────────────────╯
11

12
  To run this command without prompts, pass the --yes flag
13

14
✔ Continue? … yes
15
✔ Installing dependencies...
16

17
  Astro will scaffold ./src/styles/global.css.
18

19
✔ Continue? … yes
20

21
  Astro will make the following changes to your config file:
22

23
 ╭ astro.config.mjs ─────────────────────────────╮
24
 │ // @ts-check                                  │
25
 │ import { defineConfig } from 'astro/config';  │
26
 │                                               │
27
 │ import tailwindcss from '@tailwindcss/vite';  │
28
 │                                               │
29
 │ // https://astro.build/config                 │
30
 │ export default defineConfig({                 │
31
 │   vite: {                                     │
32
 │     plugins: [tailwindcss()]                  │
33
 │   }                                           │
34
 │ });                                           │
35
 ╰───────────────────────────────────────────────╯
36

37
✔ Continue? … yes
38

39
   success  Added the following integration to your project:
40
  - tailwind
41

42
   action required  You must import your Tailwind stylesheet, e.g. in a shared layout:
43

44
 ╭ src/layouts/Layout.astro ──────╮
45
 │ ---                            │
46
 │ import '../styles/global.css'  │
47
 │ ---                            │
48
 ╰────────────────────────────────╯