What's New in Tailwind CSS v4 Color System - Tailwind CSS Tutorial

intermediate10 min readreference

Tailwind v4 Color Improvements

Tailwind CSS v4 brings significant improvements to the color system, including better color space support, enhanced opacity handling, and more flexible configuration.

OKLCH Color Support

Tailwind v4 embraces OKLCH (Oklch) as a perceptually uniform color space. This means color manipulations like lightening and darkening produce more natural results.

// Colors defined in OKLCH
colors: {
  brand: {
    50: 'oklch(0.97 0.02 250)',
    500: 'oklch(0.65 0.15 250)',
    900: 'oklch(0.25 0.08 250)',
  }
}

New Color Utilities

Wide gamut color support with P3 colors
Improved color mixing with color-mix()
Better gradient color interpolation
Native CSS color functions support

Migration Tips

Existing hex colors continue to work
Consider converting brand colors to OKLCH for better manipulation
Test gradients for smoother transitions
Update custom plugins that modify colors

Frequently Asked Questions

Do I need to update all my colors for v4?

No, existing hex and RGB colors work fine. OKLCH is optional but recommended for new projects or when you need advanced color manipulation.

What's the benefit of OKLCH?

OKLCH produces more natural-looking color variations. When you lighten or darken colors, they maintain their perceived hue better than in sRGB.