Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

# ── 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