TailwindCSS just released a feature called Just-In-Time. The TailwindCSS blog published an article about it here. It's available (for now, since it will be added in TailwindCSS v3.0) on NPM. I dedicated another blogpost to this, so I wont go deeper into that topic here. But what is interesting here, is that it changes the whole way how you use TailwindCSS with Nuxtjs
Upgrading nuxtjs/tailwindcss
adding TailwindCSS became really easy since nuxtjs/tailwindcss
v4.0.0. Before (like explained on the Tailwind Install Docs), you needed to install a great deal of packages to be able to use TailwindCSS with Nuxt. Also they were outdated versions of packages. Now it's just the @nuxtjs/tailwindcss
module and PostCSS. So first install those.
yarn add -D @nuxtjs/tailwindcss postcss@latest
Then add the module to your buildModules
in nuxt.config.js
// nuxt.config.js
export default {
buildModules: [
'@nuxtjs/tailwindcss'
]
}
The modules requires some additional configurations if you're not using the default location for the ~/assets/css/tailwind.css
or the ./tailwind.config.js
files. You can read more about options on the nuxtjs/tailwindcss module website.
Now TailwindCSS should work if you created the files!
Adding @tailwindcss/jit
Now adding jit to TailwindCSS is just as easy as configuring it in your nuxt.config.js
file.
// nuxt.config.js
export default {
tailwindcss: {
jit: true
}
}
that's litterally it...
You can add a lot of options here, if you'd like, you can even include your whole configuration (which you normally put in tailwind.config.js
) in here. You can read more about all available options on the nuxtjs/tailwindcss module website
Using with Sass preprocessor
If you've read more than 2 articles on this blog, you'll know that I'm a fan of using TailwindCSS @apply
classes with Sass. It's easier to maintain, clearly readable and just cooler!
But to take advantage of this together with Nuxtjs, it requires some additional configuration. But don't worry, I'll guide you trough it!
If you're using @nuxtjs/tailwindcss
v^4.0.0 or followed my guide above, you probably have installed postcss@latest
. If you haven't, do so, because you'll need it.
Then we just need to install some additional packages to tell PostCSS what we're expecting of it.
yarn add -D postcss-easy-import sass
Now we have all packages ready to go, we'll just need to configure our nuxt.config.js
file so it uses them.
// nuxt.config.js
export default {
tailwindcss: {
cssPath: '~/assets/scss/tailwind.scss',
jit: true
},
build: {
postcss: {
plugins: {
'postcss-easy-import': { prefix: '_', extensions: ['.css', '.scss'] },
'postcss-nested': {},
},
}
},
}
You can also disable the viewer
option in the config for faster build times!
That should be it! I hope you received some value out of it!
Top comments (0)