Tailwind CSS - Optimizing for Production

Tailwind CSS is performance focused and aims to produce the smallest CSS file possible by only generating the CSS. Combined with minification and network compression, this usually leads to CSS files that are less than 10kB, even for large projects.

For example, Netflix uses Tailwind for Netflix Top 10 and the entire website delivers only 6.5kB of CSS over the network.

With CSS files this small, you dont have to worry about complex solutions like code-splitting your CSS for each page, and can instead just ship a single small CSS file thats downloaded once and cached until you redeploy your site.

Tailwind CLI

If you are using CLI then by simply adding '--minify' flag will reduce your tailwind css file.

npx tailwindcss -o build.css --minify

Update PostCSS Config

If you have installed Tailwind as a PostCSS plugin add cssnano to the end of your plugin list in postcss.confog.js.

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