EasyAngularKit explosé après l’upgrade Tailwind v4 ? Voici pourquoi… (et comment j’ai réparé)

Oui, c’est un article basé sur une histoire vraie.

TL;DR

Si après une migration vers Tailwind CSS v4, ton projet Angular sous Nx affiche un fond blanc au lieu du mode sombre ou semble avoir "perdu ses styles", pense à vérifier PostCSS. Dans mon cas, le fix : ajouter un fichier .postcssrc.json.

Contexte : le combo Nx + Angular + Vitest + Tailwind

Je bosse sur EasyAngularKit, une plateforme d’apprentissage Angular.

Ma stack à l’heure où j’écris ces lignes :

• Nx
• Angular 19+
• Vitest
• Tailwind CSS v4

Quand Tailwind v4 est sorti, j’ai voulu rester prudent. Trop de bruit autour de la migration, et l’outil officiel jetait une erreur dans mon monorepo. Je mets donc ça en pause.

Le moment où tout a basculé

Quelques semaines passent. Je vois que la merge request du bug est close. Confiant, je lance la commande magique :

npx @tailwindcss/upgrade

Je laisse tourner. 10 minutes plus tard, ça semble bon.

Je rebuild… Et là, plus rien ne va. L’image censée apparaître sur un fond sombre est… sur fond blanc. Plus aucun style 😱.

Débugage : là où la doc m’a (un peu) perdu

Première réaction : je vérifie tous mes fichiers Tailwind, mes presets, mes configs angular.json, vite.config.ts, etc. Rien d’anormal.

J’explore ensuite les mentions autour de PostCSS. Je n'avais rien dans mon projet. Et l’outil d’upgrade n’avait pas touché à ça non plus.

Je tente Google. ChatGPT. Des forums. Rien.

Le fix : un fichier. Une ligne.

Un peu au pif, je me dis : “et si j’essayais avec une config explicite PostCSS ?”

Je crée un fichier .postcssrc.json à la racine, et j’y mets :

{
  "plugins": {
    "@tailwindcss/postcss": {}
  }
}

Je relance le build…

💥 Tout revient dans l’ordre. Les bons styles. Les bons thèmes. Le bon fond.

Ce que j’en retiens

Dans la doc de Tailwind v4, ce fix est mentionné dans la partie "Upgrade manually", ce que j’ai interprété comme “si tu n’utilises pas l’outil @tailwindcss/upgrade”.

Mais visiblement, même avec cet outil, PostCSS peut manquer à l’appel, surtout si tu travailles avec Nx ou Vite.

En résumé

Tu galères avec Tailwind CSS v4 sur un projet Angular ou Nx ?

✅ Regarde si tu as bien une config explicite pour PostCSS
✅ Si non, ajoute un .postcssrc.json avec la config ci-dessus
✅ Et rebuild !

N'hésite pas à nous rejoindre

👉🏼 EasyAngularKit