Tailwind CSS v4 introduces a revolutionary new way to customize your design system using CSS-native syntax. Let’s explore how to leverage this for beautiful, maintainable themes.
The New @theme Directive
In Tailwind v4, customization happens directly in your CSS:
@import "tailwindcss";
@theme {
--color-primary: oklch(0.7 0.18 250);
--color-secondary: oklch(0.75 0.15 300);
--font-sans: "Inter", system-ui, sans-serif;
}Why OKLCH?
OKLCH is a perceptually uniform color space that offers:
- Consistent lightness - Colors at the same L value appear equally bright
- Predictable chroma - Easy to create harmonious color palettes
- Wide gamut - Access to more vibrant colors on modern displays
Creating a Dark Theme
With CSS custom properties, theme switching becomes trivial:
@theme {
--color-background: oklch(0.98 0 0);
--color-text: oklch(0.15 0 0);
}
@media (prefers-color-scheme: dark) {
:root {
--color-background: oklch(0.13 0.01 270);
--color-text: oklch(0.95 0.01 270);
}
}Design Tokens
Think of your theme as a system of design tokens:
- Colors - Primary, secondary, accent, semantic colors
- Typography - Font families, sizes, weights
- Spacing - Consistent spacing scale
- Effects - Shadows, borders, animations
Conclusion
Tailwind v4’s theming system makes it easier than ever to create consistent, beautiful designs. Start with a solid foundation, and your entire site will benefit.
What’s your favorite Tailwind feature? Let me know in the comments!