Avolve

Tailwind CSS v4.1.13

Utility-first CSS framework rebuilt from the ground up with Rust-powered Oxide engine delivering 100x faster builds and CSS-first configuration

What It Is

Tailwind CSS v4.1.13 is a utility-first CSS framework completely rewritten in Rust with the Oxide engine, delivering 100x faster incremental builds and eliminating JavaScript configuration entirely through CSS-first design tokens.

Market Position

  • • 22.47M weekly downloads (3x growth from v3)
  • • 51% market share (State of CSS 2025)
  • • 182x faster no-change rebuilds (35ms → 192µs)
  • • CSS-first configuration - no more tailwind.config.js

Core Capabilities

  • • Oxide engine (Rust + TypeScript)
  • • Native container queries (no plugin)
  • • 3D transform system
  • • OKLCH color space with P3 gamut
  • • Automatic content detection
  • • Persistent caching with intelligent invalidation

Why It Matters

Architectural Revolution

v4.1.13 represents a complete ground-up rewrite that eliminates the performance bottlenecks of JavaScript-based CSS processing. The Oxide engine delivers microsecond-level rebuilds that fundamentally change the development experience.

Build Performance Transformation:

Operationv3.xv4.1.13Improvement
Full build378ms100ms3.78x
Incremental + new CSS44ms5ms8.8x
No-change rebuild35ms192µs182x

CSS-First Configuration

The elimination of JavaScript configuration files represents a philosophical shift toward web-native design systems. All customization lives in CSS custom properties, enabling runtime theming and better integration with CSS ecosystem tools.

❌ v3.x (JavaScript Config)

// tailwind.config.js
module.exports = {
  content: ['./src/**/*.tsx'],
  theme: {
    extend: {
      colors: {
        brand: {
          500: '#3b82f6'
        }
      }
    }
  }
}

✅ v4.1.13 (CSS-First)

/* styles.css */
@import "tailwindcss";

@theme {
  --color-brand-500: #3b82f6;
}

/* Runtime accessible */
.custom { color: var(--color-brand-500); }

Modern CSS Integration

Native support for container queries, 3D transforms, and OKLCH colors eliminates the need for plugins and provides a unified development experience for modern CSS features.

Container Queries (No Plugin):
<div class="@container">
  <div class="@sm:grid-cols-1 @md:grid-cols-2 @lg:grid-cols-3">
    <!-- Responds to container, not viewport -->
  </div>
</div>
3D Transform System:
<div class="perspective-1000">
  <div class="rotate-x-45 rotate-y-30 scale-z-150">
    3D transformed card
  </div>
</div>
OKLCH Color Space (P3 Gamut):
@theme {
  --color-red-500: oklch(62.8% 0.257 27.85);
  /* Wider gamut, better vibrancy on P3 displays */
}

Technical Architecture

Oxide Engine Design

Core Components:

  • • Custom CSS Parser: 2x faster than PostCSS, written in Rust
  • • Lightning CSS Integration: Replaces autoprefixer + cssnano + postcss-nested
  • • Persistent Caching: Intelligent invalidation with file watching
  • • Context-Aware Detection: Framework-specific class extraction (React, Vue, Svelte)
  • • Native Binaries: Platform-specific optimization with 35% smaller footprint

Migration Path from v3.x

Upgrade Process:

# Install v4
npm install tailwindcss@next

# Remove old config (backup first)
mv tailwind.config.js tailwind.config.js.bak

# Update globals.css
@import "tailwindcss";

@theme {
  /* Move theme.extend here as CSS variables */
  --color-brand-500: #3b82f6;
}

# Run automated migration (optional)
npx @tailwindcss/upgrade@next

Framework Integration

Next.js 15.5 Setup:

// app/globals.css
@import "tailwindcss";

// Automatic content detection
// No config needed for:
// - app/**/*.{js,ts,jsx,tsx}
// - components/**/*.tsx
// - Dynamic classes work automatically

Performance with Turbopack:

  • • Combined with Turbopack: <1ms CSS updates
  • • HMR preserves state during style changes
  • • Production builds leverage Oxide optimization
  • • Automatic purging with zero config

Real-World Implementation

Complete Next.js 15.5 Integration

1. Installation & Setup:

npm install tailwindcss@next

# app/globals.css
@import "tailwindcss";

@theme {
  /* Design system tokens */
  --font-sans: system-ui, sans-serif;
  --color-primary: oklch(67.5% 0.205 263.4);

  /* Spacing scale extension */
  --spacing-18: 4.5rem;

  /* Custom breakpoints */
  --breakpoint-3xl: 1920px;
}

2. Component Usage with shadcn/ui:

// components/ui/card.tsx
export function Card({ children }: { children: React.ReactNode }) {
  return (
    <div className="@container rounded-lg border bg-white p-4">
      <div className="@sm:grid-cols-1 @md:grid-cols-2">
        {children}
      </div>
    </div>
  );
}

// Automatic container query support
// No configuration needed

3. Advanced Theming (Dark Mode):

@theme {
  --color-background: oklch(100% 0 0);
  --color-text: oklch(20% 0 0);
}

@media (prefers-color-scheme: dark) {
  @theme {
    --color-background: oklch(20% 0 0);
    --color-text: oklch(100% 0 0);
  }
}

/* Usage: automatic with bg-background and text-text */

Performance Optimization

Development:

  • • 182x faster no-change rebuilds (192µs)
  • • Automatic content detection
  • • Persistent caching across restarts
  • • HMR with state preservation

Production:

  • • Automatic CSS purging (zero config)
  • • Lightning CSS minification
  • • Critical CSS extraction
  • • Gzip: ~10KB typical application

Decision Framework

✅ Choose Tailwind CSS v4 When:

  • • Rapid prototyping: Utility-first for fast iteration without context switching
  • • Design system consistency: Constrained design tokens prevent one-off styles
  • • Component libraries: Works seamlessly with shadcn/ui, Radix UI primitives
  • • Large teams: Consistent styling patterns across developers
  • • Performance critical: 100x faster builds enable instant feedback loops
  • • Modern CSS features: Native container queries, 3D transforms, OKLCH colors

❌ Consider Alternatives When:

  • • Existing CSS architecture: Heavy investment in CSS Modules, styled-components
  • • Team unfamiliarity: Learning curve for utility-first paradigm
  • • Highly custom designs: Every element requires unique one-off styling
  • • Legacy browser support: Need IE11 (Tailwind v4 targets modern browsers)
  • • Minimal styling needs: Overkill for simple static sites

Migration Strategy

Incremental Adoption Path:

  1. Install v4 alongside existing CSS solution
  2. Use Tailwind for new components only
  3. Migrate high-change components to Tailwind gradually
  4. Convert theme/config to CSS variables over time
  5. Remove old CSS architecture when adoption reaches 80%+

🤖 For AI Assistants

Core Facts:

  • • Version: v4.1.13 (September 2025)
  • • Engine: Oxide (Rust + TypeScript)
  • • Performance: 100x faster incremental, 182x no-change
  • • Config: CSS-first with @theme directive
  • • Modern Features: Container queries, 3D, OKLCH

Code Generation:

  • • Use utility classes: flex items-center gap-4
  • • Responsive: sm:grid md:grid-cols-2 lg:grid-cols-3
  • • Container queries: @container @md:flex
  • • Custom vars: Define in @theme, use in utilities
  • • No tailwind.config.js - use CSS @theme instead

Quick Reference Template:

// Component with Tailwind v4 best practices
export function Component() {
  return (
    <div className="@container rounded-lg bg-white p-4 shadow-sm">
      <h2 className="text-xl font-bold text-gray-900">Title</h2>
      <div className="@md:grid @md:grid-cols-2 gap-4">
        {/* Content responds to container, not viewport */}
      </div>
    </div>
  );
}

Stack Relationships

Depends On:

  • • Node.js 24.8.0 - Runtime for Oxide engine
  • • CSS parsing: Lightning CSS (replaces PostCSS)

Enables:

  • • shadcn/ui - Component styling foundation
  • • Next.js 15.5 - Works with Turbopack for <1ms CSS updates
  • • React 19 - Server Component styling without runtime overhead

Part of Avolve Software Stack - CSS styling layer for Next.js + React + TypeScript applications