DEV Community


Discussion on: Optimize tailwind for a production ready React project

shrihankp profile image
Shrihan Kumar Padhy • Edited

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 = {
    content: ['./public/*.html', './src/*.?s', './src/*.?sx'] // List every file that references the classes here. See the docs for PurgeCSS about details
Enter fullscreen mode Exit fullscreen mode

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)