Tailwindcss-module: Purgecss seems not working

[stevenho0811]

Version

@nuxtjs/tailwindcss: v2.0.0
nuxt: v2.12.2

Steps to reproduce

1. Migrate 1.4.1 to 2.0.0 follow this link
   

2. npm run build

What is actually happening?

Tailwind CSS seems like not be purged.

[Atinux]

You confirm that you use extractCSS?

I don't know if Tailwind v1.4.0 PurgeCSS works with extractCSS, could you try without it?

[subdesign]

Am I right, if I have some unused css classes in my eg. index.vue file, purge should remove them?
Because reading all "purge not works" fresh issues and build up the setup following the recommendations, all unused classes remain there. For example the .subtitle class which comes with the base nuxt install.

EDIT: rephrase my question, besides purge removes unused Tailwind styles, but what about my custom css when they aren't used, should I use the default purgecss options for that, will it work next to tailwinds config setup, I can force Tailwind's config to also purge not Tailwind related styles?

EDIT 2: Okay I answer my question. Even Tailwind 1.4+ has it's own purge setup, using the guide on purgecss.com you have to set up the PurgeCSS with your nuxt setup (https://purgecss.com/guides/nuxt.html#nuxt-js).

I tested it with:

• using a separate css file in the assets/css folder (referenced in the nuxt.config.js)
• adding some custom styles into tailwind.css
• finally adding own styles to a .vue file

PurgeCSS removed them all if they weren't used

@nuxtjs/tailwindcss: v2.0.0
nuxt: v2.12.2
TailwindCSS 1.4.5

[idflood]

I was having issue configuring purgecss to work with nuxt, and the nuxt-purgecss plugin mentionned here was throwing errors in the build.

Evenutally I resolved it by not using the nuxt-purgecss module, and instead use the tailwind own purgecss as mentionned in the first comment.

Also, I'm using the nuxt extractCSS, and one option to extract the css as one file only:

nuxt.config.js:

  build: {
    extractCSS: true,
    // this is not required, output as one css file instead of one by page.
    optimization: {
      splitChunks: {
        cacheGroups: {
          styles: {
            name: 'styles',
            test: /\.(css|vue)$/,
            chunks: 'all',
            enforce: true
          }
        }
      }
    },

tailwind.config.js

{
  ...,
  purge: {
    enabled: process.env.NODE_ENV === 'production',
    content: [
      'components/**/*.vue',
      'layouts/**/*.vue',
      'pages/**/*.vue',
      'plugins/**/*.js',
      'nuxt.config.js'
    ],
    options: {
      whitelist: [
      ],
      whitelistPatternsChildren: [
      ]
    }
  }
}