Technologies / Tailwind CSS
Ta
Tailwind CSS
Front-end
Styles écrits au plus près du composant, avec une échelle de valeurs commune qui empêche les variantes involontaires.
CoûtLibre. La feuille de style produite ne contient que les classes réellement utilisées.
UsageSites sur mesure · Interfaces d'applications métier · Systèmes de composants partagés
MaintenanceLe style vit avec le composant : supprimer un composant supprime son style, ce qui évite l'accumulation de règles mortes.
Quand nous la choisissons
- Systèmes de design où la cohérence prime sur la créativité de chaque page.
- Équipes qui veulent supprimer les feuilles de style orphelines.
- Projets où le style doit rester lisible à côté du composant qu'il habille.
Quand envisager une autre approche
- Des maquettes ponctuelles et très typées, où les classes utilitaires deviennent illisibles.
- Un projet sans étape de compilation.
- Une équipe qui maintient déjà un système de style éprouvé.
Fiche technique
Architecture et exploitation
| Architecture | Les jetons de design (couleurs, espacements, typographie) sont déclarés une fois et deviennent les seules valeurs disponibles. Une variante hors échelle devient visible en revue de code. |
|---|---|
| Coût | Libre. La feuille de style produite ne contient que les classes réellement utilisées. |
| Sécurité | Sans objet côté sécurité applicative. |
| Maintenance | Le style vit avec le composant : supprimer un composant supprime son style, ce qui évite l'accumulation de règles mortes. |
| Cas d’usage | Sites sur mesure · Interfaces d'applications métier · Systèmes de composants partagés |
Les alternatives : CSS écrit à la main avec une méthodologie de nommage
Sur un site très typé, où chaque page a sa propre identité graphique.
Questions
Préparer le choix.
Le HTML ne devient-il pas illisible ?
Il devient plus long. En contrepartie, on sait ce qu'une classe fait sans ouvrir un autre fichier, et on peut supprimer un composant sans laisser de style orphelin.
La feuille de style finale est-elle lourde ?
Non : seules les classes réellement présentes dans le code sont produites.
Les autres fiches
Comprendre les choix qui se complètent.
Partons de votre usage.
Le choix technique vient soutenir votre projet, ses contraintes et son évolution.
Parlons de votre projet