Cet article de JoliCode présente une méthodologie pour migrer vers Tailwind CSS v4, en détaillant une approche progressive et peu douloureuse. L’idée principale est de remplacer les anciennes solutions CSS basées sur Sass (comme Bootstrap v4 ou des frameworks maison) par des technologies plus modernes, en s’appuyant sur le CSS natif et les fonctionnalités de Tailwind v4, qui ne nécessite plus de dépendances comme Sass. La migration se fait en deux phases clés, la première consistant à convertir les variables et fonctions Sass en variables CSS natives et en syntaxes modernes.
La première phase se concentre sur la migration des feuilles de styles CSS, notamment en remplaçant les variables Sass par des custom properties (variables CSS) définies dans :root. Par exemple, $color-primary: [#f7d325](https://raphael.salique.fr/liens/./add-tag/f7d325); devient --color-primary: [#f7d325](https://raphael.salique.fr/liens/./add-tag/f7d325);. L’article souligne l’importance d’adopter dès cette étape la nomenclature de Tailwind CSS v4 pour faciliter la transition. Les fonctions Sass comme darken() ou les calculs mathématiques (math.div()) sont remplacées par des équivalents natifs, comme hsl(from var(--color-primary) h s calc(l - 15)) pour les manipulations de couleurs.
Enfin, l’article aborde un piège courant : l’imbrication des sélecteurs (& en Sass) et les conventions comme BEM. Il met en garde contre les sélecteurs trop imbriqués, qui compliquent la migration, et recommande de simplifier la structure CSS pour éviter les conflits. L’objectif est de rendre le code plus maintenable et compatible avec les standards modernes, tout en préparant le terrain pour une adoption plus large de Tailwind CSS v4.
