You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
> [Tailwind CSS](https://tailwindcss.com) module for [NuxtJS](https://nuxtjs.org) with [modern css](https://tailwindcss.com/docs/using-with-preprocessors#future-css-features) ⚡️
-📐 [Display your breakpoints with nuxt-breaky](https://github.com/teamnovu/nuxt-breaky)
18
-
-🌓 [Dark mode example](https://codesandbox.io/s/nuxt-dark-tailwindcss-17g2j?file=/tailwind.config.js) with [tailwindcss-dark-mode](https://github.com/ChanceArthur/tailwindcss-dark-mode) and [@nuxtjs/color-mode](https://github.com/nuxt-community/color-mode-module)
ℹ️ If you are using `nuxt < 2.9.0`, use `modules` property instead.
38
48
39
-
## Usage
40
-
41
-
This module will automatically create two files in your [srcDir](https://nuxtjs.org/api/configuration-srcdir):
42
-
-`~/tailwind.config.js`
43
-
-`~/assets/css/tailwind.css`
44
-
45
-
It will also inject the CSS file globally and configure the [purge option](https://tailwindcss.com/docs/controlling-file-size#removing-unused-css) and [postcss-preset-env](https://preset-env.cssdb.org) to [stage 1](https://preset-env.cssdb.org/features#stage-1).
46
-
47
-
## Configuration
48
-
49
-
If you want to set a different path for the configuration file or css file, you can use these given options:
50
-
51
-
```js
52
-
// nuxt.config.js
53
-
{
54
-
buildModules: [
55
-
'@nuxtjs/tailwindcss'
56
-
],
57
-
tailwindcss: {
58
-
configPath:'~/config/tailwind.config.js',
59
-
cssPath:'~/assets/css/tailwind.css',
60
-
exposeConfig:false
61
-
}
62
-
}
63
-
```
64
-
65
-
To enable purgeCSS in development, set `purge.enabled: true` in `tailwind.config.js`, be careful that it will slow down your development process. Learn more on [removing unused CSS](https://tailwindcss.com/docs/controlling-file-size#removing-unused-css).
66
-
67
-
## Referencing in JavaScript
49
+
That's it! You can now use Tailwind classes in your Nuxt app ✨
68
50
69
-
It can often be useful to reference tailwind configuration values in runtime. For example to access some of your theme values when dynamically applying inline styles in a component.
70
-
71
-
If you need resolved tailwind config in runtime, you can enable `exposeConfig` option in `nuxt.config`:
72
-
73
-
```js
74
-
// nuxt.config.js
75
-
{
76
-
tailwindcss: {
77
-
exposeConfig:true
78
-
}
79
-
}
80
-
```
81
-
82
-
Then import where needed from `~tailwind.config`:
83
-
84
-
```js
85
-
// Import fully resolved config
86
-
importtailwindConfigfrom'~tailwind.config'
87
-
88
-
// Import only part which is required to allow tree-shaking
89
-
import { theme } from'~tailwind.config'
90
-
```
91
-
92
-
**NOTE:** Please be aware this adds **~19.5KB (~3.5KB)** to the client bundle size.
0 commit comments