Optimizing for Production

Getting the most performance out of Tailwind CSS projects.

Tailwind CSS is incredibly performance focused and aims to produce the smallest CSS file possible by only generating the CSS you are actually using in your project.

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

For the smallest possible production build, we recommend minifying your CSS with a tool like cssnano, and compressing your CSS with .

If you’ve installed Tailwind as a PostCSS plugin, add cssnano to the end of your plugin list:

postcss.config.js

module.exports = {
    tailwindcss: {},
}