Some styles are not applied in production mode with "srcDir" nuxt.config.js option.

Version

@nuxtjs/tailwindcss: 2.0.0 nuxt: 2.12.0

What is actually happening?

Hi, this is Peter.

I tried to install this module, worked perfectly in dev mode, but some tailwind css has not been applied when I executed nuxt build and nuxt start.

Without “srcDir” option in production mode

As you can see, tailwind’s class styles .bg-black and .container are applied.

With “srcDir” options in production mode

The problem is that .container style is applied, .bg-black is not applied with all scripts are in srcDir.

I tried to install all dependencies by using both npm and yarn, but got same result.

Please let me know If my configuration is wrong! Thank you.

---

[10, August] @nuxtjs/tailwindcss has been updated from 2.x to 3.0, still got same issue.

[Atinux]

Hi @misikoff

First, you need to move tailwind.config.js in the src/ directory OR to define configPath: '~~/tailwind.config.js' (~~ is the alias for rootDir, see https://nuxtjs.org/guides/directory-structure/assets#aliases).

Then you will see a message saying:

Merging Tailwind config from ~/tailwind.config.js

I actually merged #170 and released the v3.1.0 supporting the srcDir as well as TypeScript, so you can update your dependency and it’s good to go 🚀

[nielsdB97]

@peterkimzz I am currently running into the same problem.

I found that the problem is caused by PurgeCSS, which is a tool that strips all unused CSS from your application build. This way whatever Tailwind utitilies you don’t use are also not shipped to the user, resulting in smaller payloads and thereby better performance. PurgeCSS is only enabled in production mode, which is why your development environment works just fine but the output of both the build and generate scripts don’t.

In my project I write my pages and components in .vue files. For the <style> blocks with @apply directives everything seems to work just fine. However the classes used directly in the <template> tag are somehow not found and therefore purged. We need to check both the <template> block as well as the <style> block to preserve the classes used.