Tailwind CSS JIT & Production Performance, Build Optimisation, and Production Setup

Tailwind CSS Beginner 1 min read

Performance, Build Optimisation, and Production Setup

One of the biggest benefits of the Tailwind JIT engine is production CSS file size. A full pre-built Tailwind CSS v2 file was around 3.7MB uncompressed. With JIT in v3, a typical application produces between 5KB and 50KB of CSS — smaller than a single hero image. Because the JIT engine runs during your normal build step, there is no separate purge or minification step to configure; the output is already minimal. For further optimisation, running the Tailwind CLI with the --minify flag or enabling CSS minification in your build tool (cssnano via PostCSS) removes whitespace and comments. Enabling Brotli or gzip compression on your server reduces transferred size by 70-80% further. Combining minimal Tailwind CSS output with Brotli typically produces CSS files under 15KB for production applications. The Tailwind CLI is the fastest way to build Tailwind CSS. For development it includes a --watch mode. For CI/CD and production builds, running npx tailwindcss -i ./src/input.css -o ./dist/output.css --minify produces an optimised bundle. In frameworks like Vite or webpack, Tailwind runs as a PostCSS plugin integrated into the existing asset pipeline, benefiting from caching and parallel processing without extra configuration.

Example

# ── Tailwind CLI build commands ──────────────────────

# Development: watch mode with source maps
npx tailwindcss -i ./src/input.css -o ./public/css/app.css --watch

# Production: minified output
npx tailwindcss -i ./src/input.css -o ./public/css/app.css --minify

# Production with explicit NODE_ENV (some PostCSS plugins behave differently)
NODE_ENV=production npx tailwindcss -i ./src/input.css -o ./public/css/app.css --minify

# ── postcss.config.js (production minification with cssnano) ──
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
    ...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {}),
  },
};

# ── vite.config.ts (Tailwind as PostCSS plugin in Vite) ──────
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  css: {
    postcss: {
      plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
      ],
    },
  },
  build: {
    // Vite handles minification via esbuild automatically in prod
    cssCodeSplit: true,
    rollupOptions: {
      output: {
        assetFileNames: 'assets/[name]-[hash][extname]',
      },
    },
  },
});

# ── Checking output size ──────────────────────────────
# Uncompressed
wc -c public/css/app.css

# Gzip size (what HTTP/1.1 delivers)
gzip -c public/css/app.css | wc -c

# Brotli size (what HTTP/2+ servers deliver)
brotli -c public/css/app.css | wc -c

HTML

Full Editor

Related Resources

Tailwind CSS Reference

Complete tag & property list

Tailwind CSS How-To Guides

Step-by-step practical guides

Tailwind CSS Exercises

Practice what you've learned