Tailwind v4 — Rust engine et CSS-first

[khalilbenaz]

---

lede: Tailwind v4 réécrit en Rust (10× plus rapide). Config en CSS via @theme. La migration vaut-elle le coup en 2026 ?
lede_en: Tailwind v4 rewritten in Rust (10× faster). CSS-based config via @theme. Worth migrating in 2026?
title_en: Tailwind v4 — Rust engine and CSS-first

Tailwind v4 — les changements

Tailwind v4 (sorti fin 2024) marque un tournant :

• Rust engine : 10× plus rapide qu'v3.
• CSS-first config : @theme dans votre CSS, plus de tailwind.config.js.
• Native CSS variables générées automatiquement.
• @import au lieu de @tailwind.

Setup v4

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

@theme {
  --color-brand: #059669;
  --font-display: "Geist", sans-serif;
  --spacing-tight: 0.375rem;
}

Plus de tailwind.config.js. Tout en CSS.

Dans vos composants :

<button class="bg-brand text-white p-tight font-display">Click</button>

Les utilities bg-brand, font-display, p-tight sont auto-générées.

Performance

Sur projet 5000 fichiers :

• Tailwind v3 : 4s build.
• Tailwind v4 : 0.3s build.

Dev HMR quasi-instantané.

Migration v3 → v4

npx @tailwindcss/upgrade

Convertit tailwind.config.js → @theme dans CSS. Plus utility renames :

• shadow-sm → shadow-xs.
• Quelques autres breaking.

Migration : 1-2h pour projet moyen. Test approfondi sur visual regressions.

Container queries natives

@container (min-width: 768px) {
  .card { display: grid; }
}

Tailwind v4 expose @container/min-[400px] en utility :

<div class="@container">
  <div class="@min-[400px]:grid">...</div>
</div>

Vs Tailwind v3

Migration optionnelle mais recommandée :

• v3 reste maintenue (bugfixes).
• v4 plus performant, CSS-first élégant.
• Pour 2026, v4 est défaut nouveaux projets.

Vs alternatives

• UnoCSS : alternative ultra-rapide, plus configurable.
• Vanilla Extract : CSS-in-JS typé.
• CSS Modules : standard, pas utility.

Tailwind reste leader utility-first. Pour atomic CSS en 2026 : Tailwind v4.

Verdict

Nouveau projet : Tailwind v4 sans hésitation. Existing v3 qui marche : migration peut attendre 6 mois si pas de blocage.

Tailwind v4 — the changes

Tailwind v4 (released late 2024) marks a turning point:

• Rust engine: 10× faster than v3.
• CSS-first config: @theme in your CSS, no more tailwind.config.js.
• Native CSS variables auto-generated.
• @import instead of @tailwind.

v4 setup

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

@theme {
  --color-brand: #059669;
  --font-display: "Geist", sans-serif;
  --spacing-tight: 0.375rem;
}

No more tailwind.config.js. All CSS.

In your components:

<button class="bg-brand text-white p-tight font-display">Click</button>

Utilities bg-brand, font-display, p-tight auto-generated.

Performance

On 5000-file project:

• Tailwind v3: 4s build.
• Tailwind v4: 0.3s build.

Near-instant dev HMR.

v3 → v4 migration

npx @tailwindcss/upgrade

Converts tailwind.config.js → @theme in CSS. Plus utility renames:

• shadow-sm → shadow-xs.
• Some other breaking.

Migration: 1-2h for medium project. Thorough visual regression testing.

Native container queries

@container (min-width: 768px) {
  .card { display: grid; }
}

Tailwind v4 exposes @container/min-[400px] as utility:

<div class="@container">
  <div class="@min-[400px]:grid">...</div>
</div>

vs Tailwind v3

Optional but recommended migration:

• v3 stays maintained (bugfixes).
• v4 more performant, elegant CSS-first.
• For 2026, v4 is default for new projects.

vs alternatives

• UnoCSS: ultra-fast alternative, more configurable.
• Vanilla Extract: typed CSS-in-JS.
• CSS Modules: standard, not utility.

Tailwind remains utility-first leader. For atomic CSS in 2026: Tailwind v4.

Verdict

New project: Tailwind v4 without hesitation. Existing v3 that works: migration can wait 6 months if no blockers.

[MikeGarciaAGM]

Implemented and opened PR for this issue: #340

Scope:

• add issue content to posts.json as a new post entry
• preserve existing structure/order