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

[peterkimzz]

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.

[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.

[misikoff]

It appears as if the same issue occurs when the nuxt.config.js is in a subdirectory of the package.json and the rootDir is specified via an argument of the nuxt command, as described in example 2 on this page: https://nuxtjs.org/api/configuration-srcdir/

As @nielsdB97 experienced, the <style> blocks with @apply directives seem to work, but the classes used directly in the <template> tag don't work.

[husarcik]

I'm having a similar issue. If I convert the relative paths to absolute paths it works no problem. I've noticed a few other modules do a conversion using srcDir before passing to purgeCSS. A good example of that is the nuxt-bulma-slim. Is this something we should be doing for this module too? See link for an example.

https://github.com/mustardamus/nuxt-bulma-slim/blob/b31a1ee3a60c016106bbaf1595d1c3674cb1efc4/lib/get-options.js

[nielsdB97]

To demonstrate the problem I have created a demo repository. The master branch is a nearly default nuxt init, whereas the linked src-dir branch has all contents moved into a src folder.

When running yarn dev it will work fine since it's not doing any purging.
However when doing a production build by running yarn generate followed by yarn start, the inline styles don't work as intended:

• The text "Should be hidden" in the "Documentation" button should not be visible
• The text "Documentation" should be in the color red

I hope this will be helpful in resolving the issue. Thanks in advance!

[nielsdB97]

Until this issue will get resolved I found this temporary workaround based on @husarcik his comment:

tailwind.config.js

import nuxtConfig from "./nuxt.config";

export default {
  purge: {
    content(defaultContents) {
      return defaultContents
        .map((path) => join(nuxtConfig.srcDir, path))
        .map((file) => file.replace(".js", ".ts"));
    }
  }
}

[atinux]

Hi, can you confirm this bug with the version 3 of this module?

[misikoff]

I can confirm this issue still occurs. I just pulled down https://github.com/nielsdB97/nuxt-tailwind-purge-demo/tree/src-dir and replicated the problem with version 3 of the module.

[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 🚀

[aaronhuisinga]

@atinux It seems to me that when using the new config file format (passing in parameters and returning a function), Tailwind isn't properly reading the config at all. When migrating our existing config to the new format (and updating to v3.1.0), none of our config options are applied. If I revert it back to the old format (still on v3.1.0), everything works correctly.

[atinux]

@aaronhuisinga this is another issue, please create one with a reproduction please.