tailwindcss is not purged even with template paths provided

user_13278193 0
Viewed 4287

i run npm run build of course in production mode but my tailwind styles are not purged

i use webpack + postcss and i filled the purge array in tailwind.config.js with my templates paths and even that i see :

warn - Tailwind is not purging unused styles because no template paths have been provided
warn - If you have manually configured PurgeCSS outside of Tailwind or are deliberately not removing unused styles, set `purge: false` in your Tailwind config file to silence this warning.

my tailwind.config.js:

 module.exports = {
    purge: ["public/index.html"],
    darkMode: false, // or 'media' or 'class'
    theme: {
        extend: {},
    },
    variants: {
        extend: {},
    },
    plugins: [],
};

and my postcss.config.js

module.exports = {
    plugins: {
        tailwindcss: require("tailwindcss"),
        autoprefixer: require("autoprefixer"),
    },
};
tailwind-css webpack css
1 Answers

i solved the problem and i think that was because of postcss.config.js file. the plugins is actually an array and not an object as you might see in some blog posts:

module.exports = { 
   plugins: [
       require("tailwindcss"),
       require("autoprefixer")
   ], 
};

or you can try this config

// tailwind.config.js
module.exports = {
  /* ... your actual config */,
  purge: {
    enabled: process.env.NODE_ENV === 'production',
    content: [
      'components/**/*.vue',
      'layouts/**/*.vue',
      'pages/**/*.vue',
    ]
  }
}
user_132781930
Related