Optimizing for Production

Introduction

Tailwind CSS focuses on producing the smallest CSS file possible by generating only the CSS used in your project. This often results in CSS files under 10kB, even for large projects. For instance, Netflix's Top 10 site uses Tailwind and delivers just 6.5kB of CSS.

Steps to Optimize

Minify CSS

Minifying your CSS can be done using tools like cssnano. If using Tailwind CLI, add the --minify flag:

npx tailwindcss -o build.css --minify

PostCSS Plugin

If Tailwind is installed as a PostCSS plugin, add cssnano at the end of your plugin list:

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
    ...(process.env.NODE_ENV === "production" ? { cssnano: {} } : {}),
  },
};

Compression

Compress your CSS using Brotli or similar tools.

Frameworks

Many frameworks handle minification and compression automatically in production.

For more details, visit the Tailwind CSS documentation.