How do I remove the comments and minify the generated CSS output from Tailwind?

[arentsen]

My Craft project is in development stage and if I build my tailwind CSS file, it is huge because of all the comments in it. I would just like to minify it (even without using purgeCSS for all the unused classes at this point) but I cannot find any information on it. How do I do this?

[simonswiss]

Hi @arentsen! 👋

For this you could use cssnano, another PostCSS plugin.

You can add the plugin to your your array in your postcss.config.js like so:

module.exports = {
  plugins: [
    // ...
    require('tailwindcss'),
    require('autoprefixer'),
    require('cssnano'),
    // ...
  ]
}

It might be worth only running cssnano for production:

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

Hope it helps! 👍

[arentsen]

Helps very much!! thanks