Software Development Product & Design

Tailwind CSS v4: What's New for Production Apps

S
Samuel Kimani
January 06, 2026 1 min read

The @theme Directive

Tailwind v4 replaces tailwind.config.js with CSS-native configuration using the @theme directive. Your design tokens — colors, fonts, spacing — live directly in your CSS file. No more JavaScript config, no more build tool complexity.

Performance Gains

The new Oxide engine is written in Rust and delivers 10x faster builds. Our production build went from 3.2 seconds to under 400ms. In development with HMR, style changes are essentially instant.

Migration Tips

The migration from v3 to v4 is mostly straightforward but has gotchas. Custom color definitions move from config to @theme. The @apply directive still works but @theme is preferred. Source detection uses @source directives instead of config content arrays.We migrated our entire design system — including dark mode, glass morphism effects, and gradient utilities — to v4 in a single afternoon. The result is cleaner CSS, faster builds, and a design system that lives entirely in one file.

Our Design System

We run a custom design system built on Tailwind v4 with semantic color tokens (surface, fg, border scales), custom components (glass-card, gradient-border-card), and animation utilities. Everything is defined in a single app.css file with @theme, making it trivial to maintain and extend.

Related posts

Feb 12, 2026

How We Use Claude to Build Entire Codebases Autonomously
Feb 08, 2026

M-Pesa Integration in 2026: The Complete Developer Guide
Jan 30, 2026

Building for Kenya: UX Lessons from 50K+ Users

Need software built?

Tell us what you need. We respond within 24 hours with a realistic quote.

Start Your Project Chat on WhatsApp