Interactive Lab
Tailwind CSS v4: CSS-First Engine & Design Tokens
Explore the JavaScript-free configuration engine, dynamic @theme token bindings, and runtime OKLCH color adjustments.
theme-engine.css
/* 1. CSS-First Design Tokens in app.css */
@import "tailwindcss";
@theme {
--color-neon-accent: oklch(0.85 0.28 var(--accent-hue, 150));
--radius-interactive: var(--custom-radius, 1rem);
--font-mono-code: 'JetBrains Mono', monospace;
}
/* 2. Custom Utility Definitions */
@utility glass-card {
background: radial-gradient(circle at top left, rgb(255 255 255 / 0.08), transparent);
backdrop-filter: blur(12px);
}
/* 3. Template Usage */
<div class="glass-card rounded-(--radius-interactive) border border-neon-accent/30 p-6">
<span class="text-neon-accent font-mono-code">OKLCH Active</span>
</div>Key Architecture Upgrades in v4
- Zero JS Config: Configured via CSS
@themedirectives parsed at build time. - OKLCH Native Colors: Eliminates muddy gradient interpolations across light/dark palettes.
- Inline CSS Variables: Reference tokens directly (e.g.,
rounded-(--custom-radius)).
Runtime Token Controller @theme + CSS Variables
Design Token
Tailwind v4 @theme
Color: oklch(0.72 0.22 160)
Radius: 16px