Tailwind CSS v4 : la safelist a pris sa retraite

Bon, on y est : tu as cligné des yeux et pouf, Tailwind est passé en version 4. Comme une mise à jour iOS, mais sans le fail de Siri dopé à Apple Intelligence.
Et la safelist ? Disparue. Envolée. Partie élever des chèvres dans le Larzac.

Désolé Jean-Kevin, maintenant il faut écrire un fichier texte (enfin c'est le procédé que j'ai choisi) ; oui, comme en 1998.

R.I.P safelist dans la config

Avant, tu avais ça :

// tailwind.config.js
module.exports = {
  content: ['./src/**/*.html'],
  safelist: ['text-red-500', 'bg-blue-600', /^hover:/],
}

Tu pouvais balancer des classes, regex incluse, et Tailwind les gardait gentiment dans son petit sac à dos. C’était simple, c’était beau et ça sentait presque le sable chaud.

Maintenant c’est ça : @source "safelist.txt"

Oui, on revient à l’époque où on écrivait du HTML dans le Bloc-notes. Tu crées un fichier, genre safelist.txt, où tu balances tes classes à la ligne, comme un poème de CM2 :

text-red-500
bg-blue-600
hover:text-white
dark:bg-neutral-800

Puis dans ton fichier CSS, tu fais un petit @source, tranquille :

@import "tailwindcss";
@source 'safelist.txt';

Et là magie : Tailwind lit ce fichier .txt, comme s’il lisait ton journal intime, et ajoute les classes dans le build final, même si elles sont invisibles dans ton HTML.

Oui, c’est comme un include en PHP, mais avec du style. Enfin, du style… façon Tailwind.

Mais pourquoi faire ça ?

Parce que Tailwind, dans sa sagesse légendaire, purge tout ce qui ne sert à rien. Donc les classes générées dynamiquement (:class="isActive ? 'bg-red-600' : 'bg-green-500'") ? Bah elles sautent, parce que Tailwind les voit pas. Il est pas devin.

Donc tu dois le forcer. Et la safelist dans le .txt, c’est la batte de baseball pour lui dire : “Tu compiles ça sinon je t’installe Bootstrap.”

Le mot de la fin

La safelist dans Tailwind 4, c’est comme les slips en coton bio : c’est pas sexy, mais ça évite les irritations.

Tu écris tes classes dans un .txt comme si tu écrivais une lettre à Mamie, tu les @source dans ton CSS, et tout roule. C’est old school, mais c’est clean. Et puis ça t’oblige à être un peu organisé, pour une fois.

Maintenant, retourne bosser. Et dis-toi qu’il y a un monde où des gens utilisent encore Bootstrap 3. Tu relativiseras.