[NextJs/TailwindCSS]: css classes are missing in production

Question

Tailwind version: v9.3.5

PostCSS Config:

// postcss.config.js

module.exports = {
   plugins: {
      tailwindcss: {},
      autoprefixer: {},
      ...(process.env.NODE_ENV === 'production'
         ? {
              '@fullhuman/postcss-purgecss': {
                 content: ['./components/**/*.js', './pages/**/*.js'],
                 defaultExtractor: content =>
                    content.match(/[\w-/:]+(?<!:)/g) || [],
              },
           }
         : {}),
   },
}

Tailwind Config:

// tailwind.config.js

module.exports = {
   theme: {
      extend: {
         colors: {
            tint: 'rgba(0,0,0,0.3)',
         },
      },
   },
   variants: {},
   plugins: [],
}

Styles work perfectly in development but in production only some styling is working. Upon checking the CSS file in build folder, looks like some of the CSS classes are not being extracted or possibly purged therefore resulting in partial styling of the app.

Answer 1

EDIT : PurgeCSS version 3.0 add safelist option, replace whitelist

I faced the same problem when i dynamically inject name of some classes into my html template.
I am using nuxt.js/tailwindcss so you need to read the documentary first to solve your problem.

Problem

here's the code who generate the classes missing in production

 computed: {
    axeY() {
      return this.y < 0 ? `-translate-y${this.y}` + ' ' : `translate-y-1` + ' '
    },
    axeX() {
      return this.x < 0 ? `-translate-x${this.x}` : `translate-x-${this.x}`
    },

PostCSS will analyse all files into the content table (declaring in the config file),
noted that my files doesn't include classes with translate prefix
as you can see, my missing classes are: [translate-x-1,-translate-x-1, translate-y-1, -translate-y-1] ... the number 1 is a variable.

Solution

• I need to tell purgecss to not delete those classes by adding them into a whitelist
  
• Or you can use them into your files, for example by creating an unless file (a file analyzed by PostCSS)

You can specify content that should be analyzed by PurgeCSS with an array of filenames

• Maintain your config file of TailWindCSS by specifying all cores plugins that you're using
• In a complicated case you can use a regular expression in the config file.
  in my case, i can directly config purge in the config file of TailWindCSS, by passing the whitelist in the options variable,
  and here is my config file when i use the first solution :

/*
 ** TailwindCSS Configuration File
 **
 ** Docs: https://tailwindcss.com/docs/configuration
 ** Default: https://github.com/tailwindcss/tailwindcss/blob/master/stubs/defaultConfig.stub.js
 */
const num = [1, 2, 3, 4, 5, 6, 8, 10, 12]
const whitelist = []
num.map((x) => {
  whitelist.push('translate-x-' + x)
  whitelist.push('-translate-x-' + x)
  whitelist.push('translate-y-' + x)
  whitelist.push('-translate-y-' + x)
})
module.exports = {
  future: {
    removeDeprecatedGapUtilities: true,
  },
  theme: {},
  variants: {
    backgroundColor: ['hover', 'focus', 'active'],
  },
  plugins: [],
  purge: {
    // Learn more on https://tailwindcss.com/docs/controlling-file-size/#removing-unused-css
    enabled: process.env.NODE_ENV === 'production',
    content: [
      'components/**/*.vue',
      'layouts/**/*.vue',
      'pages/**/*.vue',
      'plugins/**/*.js',
      'nuxt.config.js',
    ],
    options: {
      whitelist,
    },
  },
}

Answer 2

Found the issue, postcss config was missing sections folder in content array and also since my js files had jsx, i need to add that as well.

// postcss.config.js

module.exports = {
   plugins: {
      tailwindcss: {},
      autoprefixer: {},
      ...(process.env.NODE_ENV === 'production'
         ? {
              '@fullhuman/postcss-purgecss': {
                 // added sections folder and changed extension to jsx
                 content: ['./components/**/*.jsx', './pages/**/*.js', './sections/**/**/*.jsx'],
                 defaultExtractor: content =>
                    content.match(/[\w-/:]+(?<!:)/g) || [],
              },
           }
         : {}),
   },
}