Tailwind v4 en CSS-first : ce que j’ai cassé puis réparé

Tailwind CSS v4 est sorti en janvier 2025. Sur le portfolio j’avais un tailwind.config.js qui gonflait (tokens, fonts, plugins). Le passage CSS-first m’a forcé à ranger.

Avant / après

Avant :

// tailwind.config.js
export default {
  content: ['./resources/**/*.blade.php', './resources/js/**/*.js'],
  theme: { extend: { colors: { accent: '#2de2c5' } } },
}

Après (esprit v4) :

@import "tailwindcss";

@theme {
  --color-accent: #2de2c5;
  --font-display: "Syne", ui-sans-serif, system-ui, sans-serif;
}

Ce qui a vraiment cassé chez moi

• Des @apply sur des classes qui n’existent plus telles quelles
• Des utilitaires custom définis seulement dans le JS config
• Le dark mode : je l’avais mal câblé, v4 l’a rendu évident

Lien avec les sites clients

Vannalec et le portfolio partagent la même philosophie front (Vite + Tailwind 4). Quand je fixe un bug de token sur l’un, je vérifie l’autre. Moins de drift = moins de « ça marche chez Albert ».