Discussion on: Optimize tailwind for a production ready React project

[Shrihan]

I agree. I cannot imagine web development without Tailwind CSS. Coolest framework😎 One more thing:

Using PostCSS + PurgeCSS + CSSNano, we can reduce the size even further. Install postcss(should already be installed, if tailwindcss is installed), postcss-cli, @fullhuman/postcss-purgecss(again, should be installed already, if installed tailwindcss), cssnano, autoprefixer(optional, recommended) as devDependencies.
Create a file called postcss.config.js and add the following:

const purgecss = require("@fullhuman/postcss-purgecss")
const cssnano = require("cssnano")
const tailwindcss = require("tailwindcss")

const tailwindConfig = require("./tailwind.config.js")
const autoprefixer = require("autoprefixer") //Make sure its installed to avoid nasty wobblers

module.exports = {
  tailwindcss(tailwindConfig),
  autoprefixer,
  purgecss({
    content: ['./public/*.html', './src/*.?s', './src/*.?sx'] // List every file that references the classes here. See the docs for PurgeCSS about details
  }),
  cssnano()
}

After that, head over to the package.json file and add a script:

"build:css": "postcss css/styles.css -o css/dist.css"

Done. Run [packageManager] run build:css(where packageManager is one of npm or yarn)