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.
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre
Générer un guide de style à partir de commentaires dans les fichiers Sass en utilisant KSS
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre. L'astuce est d'utiliser les fonctionnalités CSS en majuscule - Sass est sensible à la casse, pas les CSS
Une astuce Sass
Si on prend une couleur d'avant plan voulue (fg) et une couleur d'arrière plan (bg), alors l'outil proposé dans l'article renvoie la couleur d'avant plan fg' la plus proche possible de fg tout en ayant un contraste minimum avec bg. Très astucieux !
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre
Astuce à garder sous le coude
Tout est dans le titre