Tailwind CSS v4: Why I Chose CSS-First Config Over Styled Components

Source: Dev.to

Introduction

I’ve been building React components for years, trying every styling solution: CSS Modules, Styled Components, Emotion, Sass, and Tailwind v3. When Tailwind CSS v4 alpha landed with its revolutionary Oxide engine and CSS‑first configuration, I knew something fundamental had shifted.

• Build times: 12 s → 1.2 s (10× faster)
• Hot module replacement: 500 ms → Fast, type‑safe, and maintainable styling.

Evaluation Criteria

Each tool is rated 1‑5 ★ per criterion, then weighted.

Tailwind CSS v4 (Oxide Engine)

What it is: A Rust‑based CSS framework with CSS‑first configuration using @source and @theme directives—no tailwind.config.js.

Innovation

• Oxide Engine: 10× faster than v3 (Rust vs JavaScript)
• CSS‑First: Configuration via @theme in CSS, not JS
• @source: Scans directories for classes directly in CSS
• Native CSS: Full support for variables, container queries, etc.

Stats

• GitHub Stars: 82k+ ⭐
• NPM Downloads: 10 M+/week 📦
• Version: 4.0.0 (stable as of Dec 2024)
• Bundle Size: 8‑15 KB gzipped (tree‑shaken)

Key Features

@import 'tailwindcss';          /* single import, no config file */
@source './src';                /* scan directories for classes */
@theme {
  --color-primary: blue;
}

• Lightning‑fast builds with Oxide
• Full PostCSS compatibility

Best for: New projects, performance‑critical apps, design systems wanting CSS‑native configuration.

Tailwind CSS v3 (Traditional Approach)

What it is: JavaScript‑configured utility‑first CSS framework with a JIT engine and extensive plugin ecosystem.

Stats

• GitHub Stars: 82k+ ⭐
• NPM Downloads: 10 M+/week 📦
• Version: 3.4.15 (stable, mature)
• Language: JavaScript + PostCSS

Pros & Cons

Best for: Existing projects, teams needing stability and specific v3‑only plugins.

Styled Components (CSS‑in‑JS)

What it is: Library that writes CSS in JavaScript using tagged template literals.

import styled from 'styled-components';

const Button = styled.button`
  background: ${props => (props.primary ? 'blue' : 'gray')};
  padding: 1rem 2rem;
  border-radius: 0.5rem;
`;

Stats

• GitHub Stars: 40k+ ⭐
• NPM Downloads: 3.5 M/week 📦
• Version: 6.1.13
• Bundle Size: ~16 KB runtime + styles

Pros & Cons

Best for: Apps needing heavy dynamic styling, component libraries where scoping is critical.

CSS Modules (Classic Approach)

What it is: Traditional CSS with scoped class names generated by bundlers.

/* Button.module.css */
.button {
  background: blue;
  padding: 1rem 2rem;
}
.primary {
  background: darkblue;
}

import styles from './Button.module.css';

Click

Stats

• Bundle Size: Only your CSS (smallest possible)
• Performance: Zero runtime, pure CSS

Pros & Cons

Best for: Small projects, teams comfortable with traditional CSS, need absolute smallest bundle.

Other CSS‑in‑JS Option (Performance‑Focused)

What it is: Framework‑agnostic CSS‑in‑JS library similar to Styled Components but lighter.

• GitHub Stars: 17k+ ⭐
• NPM Downloads: 2.5 M/week 📦
• Version: 11.11.0
• Bundle Size: ~7 KB runtime

Pros & Cons

Best for: Performance‑conscious CSS‑in‑JS users, multi‑framework projects.

Feature Comparison

Test Setup

• Project: Portfolio app with 50+ components
• Files: 180 TypeScript/TSX files
• Styles: Design system with 15 color tokens, 8 spacing scales
• Machine: MacBook Pro M2, 16 GB RAM
• Date: December 2025

Benchmark Results

Build & HMR Performance

Winner: Tailwind v4 (10× faster than v3, 7× faster than Styled Components).

Bundle Size (gzipped)

Winner: CSS Modules (smallest), Tailwind v4 (best utility‑framework size).

Runtime Metrics

Winner: CSS Modules (pure CSS), Tailwind v4 (best utility‑framework performance).

Conclusion

Tailwind CSS v4 isn’t just “faster Tailwind”; it represents a fundamental rethinking of how CSS frameworks should work in 2025:

• Performance: Orders‑of‑magnitude faster builds and HMR.
• Configuration: Pure‑CSS, eliminating bulky JavaScript config.
• Maintainability: Simpler, type‑safe theming via @theme.
• Ecosystem: Growing community with Rust‑based tooling.

For new, performance‑critical applications—or any project that can adopt the CSS‑first paradigm—Tailwind v4 is the clear choice. Existing projects may still benefit from the stability of Tailwind v3, while CSS‑in‑JS and CSS Modules remain viable for niche use‑cases requiring dynamic styling or absolute minimal bundles.