TailwindCSS just released a feature called Just-In-Time.The TailwindCSS blog published an article about ithere. It's available (for now, since it will be added in TailwindCSS v3.0) onNPM. I dedicatedanother 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 withNuxtjs

Upgrading nuxtjs/tailwindcss

adding TailwindCSS became really easy sincenuxtjs/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 andPostCSS. So first install those.

yarn add-D @nuxtjs/tailwindcss postcss@latest

Then add the module to yourbuildModules innuxt.config.js

// nuxt.config.jsexportdefault{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 optionson 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 yournuxt.config.js file.

// nuxt.config.jsexportdefault{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 intailwind.config.js) in here. You can read more about all available options onthe 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 withSass. 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 installedpostcss@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 ournuxt.config.js file so it uses them.

// nuxt.config.jsexportdefault{tailwindcss:{cssPath:'~/assets/scss/tailwind.scss',jit:true},build:{postcss:{plugins:{'postcss-easy-import':{prefix:'_',extensions:['.css','.scss']},'postcss-nested':{},},}},}

You can also disable theviewer option in the config for faster build times!

That should be it! I hope you received some value out of it!