Configuration to remove unused styles in production
You would like to keep the style sheet size down in a production environment because this improves the performance of the application. You can purge unnecessary styles by adding the following purge block in the tailwind.config.js file. Then, Tailwind can tree-shake unused styles while building the production build. You can set the PURGE_CSS environment variable to production for production builds. The code is illustrated in the following snippet:
module.exports = {
purge: {
enabled: process.env.PURGE_CSS === "production" ? true
: false,
content: ["./src/**/*.{js,jsx,ts,tsx}",
"./public/index.html"],
},
darkMode: false, // or 'media' or 'class'
theme: {...
