CODEWITHSUNDEEP
csswebpacktailwind-css
mod7ex
mod7ex

Reputation: 948

tailwindcss is not purged even with template paths provided

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"),
    },
};

Upvotes: 4

Views: 5996

Answers (2)

iShubhamPrakash
iShubhamPrakash

Reputation: 708

These settings will allow you to have very optimised css bundle and remove this warning:

Step 1: Add purge option in tailwind.config.js:


module.exports = {
  purge: {
    enabled: process.env.NODE_ENV === 'production',
    content: [
      './pages/**/*.{js,ts,jsx,tsx}', 
      './modules/**/*.{js,ts,jsx,tsx}', 
      './components/**/*.{js,ts,jsx,tsx}'
    ]
  },
... other 
}

Step 2: Install cssnano as suggested in tailwind docs

enter image description here

postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
    ...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {})
  }
};

Upvotes: 0

mod7ex
mod7ex

Reputation: 948

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',
    ]
  }
}

Upvotes: 3

Related Questions