TailwindCSS 4: Breaking Changes

1. Removed Default Colors

TailwindCSS 4 no longer includes the default text-gray-700, bg-white, and hover:bg-gray-100 styles. You must now explicitly define your color palette in tailwind.config.js.

2. New Configuration API

The tailwind.config.js now uses a more functional API with built-in TypeScript support and better validation.

// Before
module.exports = {
  theme: {
    colors: { ... }
  }
}

// After
const { defineConfig } = require('tailwindcss')

module.exports = defineConfig({
  theme: {
    extend: {
      colors: {
        'brand': '#fbbf24'
      }
    }
  }
})

30% Faster Build Times

• Optimized CSS purging algorithm
• Cached PostCSS processing
• Improved class parsing performance

Smaller CSS Output

• 62% reduction in default configuration
• Tree shaking of unused pseudo-selectors
• Improved class name optimization