2
2
3
3
Using Tailwind CSS in your Nuxt project is only one command away ✨
4
4
5
- ---
6
-
7
5
## Installation
8
6
9
- 1 . Add ` @nuxtjs/tailwindcss ` dependency to your project:
7
+ 1 . Install ` @nuxtjs/tailwindcss ` dependency to your project:
10
8
11
9
:: code-group
12
10
13
- ``` bash [Yarn]
14
- yarn add --dev @nuxtjs/tailwindcss
11
+ ``` bash [yarn]
12
+ yarn add -D @nuxtjs/tailwindcss
13
+ ```
14
+
15
+ ``` bash [npm]
16
+ npm install -D @nuxtjs/tailwindcss
15
17
```
16
18
17
- ``` bash [NPM ]
18
- npm install --save-dev @nuxtjs/tailwindcss
19
+ ``` sh [pnpm ]
20
+ pnpm i -D @nuxtjs/tailwindcss
19
21
```
20
22
21
23
::
@@ -25,27 +27,23 @@ npm install --save-dev @nuxtjs/tailwindcss
25
27
:: code-group
26
28
``` ts [nuxt.config (Nuxt 3)]
27
29
export default defineNuxtConfig ({
28
- modules: [' @nuxtjs/tailwindcss' ]
30
+ modules: [' @nuxtjs/tailwindcss' ]
29
31
})
30
32
```
31
33
32
34
``` ts [nuxt.config (Nuxt 2)]
33
35
export default {
34
- modules : [' @nuxtjs/tailwindcss' ]
36
+ buildModules : [' @nuxtjs/tailwindcss' ]
35
37
}
36
38
```
37
39
::
38
40
39
41
:: alert { type =" success " }
40
-
41
42
That's it! You can now use Tailwind classes in your Nuxt app ✨
42
-
43
43
::
44
44
45
45
:: alert { type =" info " }
46
-
47
46
Discover your color palette based on your Tailwind config with the [ Tailwind viewer] ( /tailwind/viewer ) .
48
-
49
47
::
50
48
51
49
## Tailwind Files
@@ -58,12 +56,11 @@ When running `nuxt dev`, this module will look for these files:
58
56
If they don't exist, the module will inject a basic configuration for each one so you don't have to create these files.
59
57
60
58
:: alert { type =" info " }
61
-
62
59
You can configure the paths in the [ module options] ( /getting-started/options ) .
63
-
64
60
::
65
61
66
62
If you're going to create your own Tailwind CSS file, make sure to add the ` @tailwind ` directives for each of Tailwind’s layers.
63
+
67
64
``` css
68
65
@tailwind base;
69
66
@tailwind components;
@@ -77,11 +74,11 @@ Learn more about overwriting the Tailwind configuration in the [Tailwind Config]
77
74
You can customize the module's behavior by using the ` tailwindcss ` property in ` nuxt.config ` :
78
75
79
76
``` ts [nuxt.config]
80
- export default {
77
+ export default defineNuxtConfig ( {
81
78
tailwindcss: {
82
79
// Options
83
80
}
84
- }
81
+ })
85
82
```
86
83
87
84
See the [ module options] ( /getting-started/options ) .
0 commit comments