Technologie - Tailwind CSS : un framework CSS pour des interfaces web sur mesure
Tailwind CSS est un framework CSS qui fournit de petites classes utilitaires (une marge, une couleur, une taille de texte) qu'on combine directement dans le HTML. Naeka l'utilise pour construire des interfaces fidèles à la maquette, avec Vue.js, Ember.js ou Next.js, et des styles qui restent faciles à faire évoluer.
Qu'est-ce que Tailwind CSS ?
Tailwind CSS est un framework CSS dit « utility-first ». Au lieu d'écrire une classe .carte-produit dans une feuille de style puis de lui donner une marge, une ombre et des coins arrondis, on écrit directement p-6 shadow-md rounded-xl sur l'élément HTML. Chaque classe fait une seule chose.
Prenons un bouton qui doit passer du bleu au bleu foncé au survol et prendre toute la largeur sur mobile. Avec Tailwind, tout tient sur l'élément : bg-blue-600 hover:bg-blue-700 w-full sm:w-auto. Quand un développeur ouvre le composant six mois plus tard, il voit le rendu sans aller chercher la règle CSS correspondante dans un autre fichier, et il peut supprimer le bouton sans laisser derrière lui des styles que plus personne n'ose effacer.
Au moment du build, Tailwind ne garde que les classes réellement utilisées dans le code. La feuille de style envoyée au navigateur reste petite, même sur une grosse application.
Pourquoi nous utilisons Tailwind
Un design system dans la configuration
Les couleurs, les espacements, les polices et les points de rupture du responsive sont définis une fois dans la configuration de Tailwind. Les développeurs piochent dans cette palette au lieu d'inventer une nuance de gris à chaque écran, et l'interface reste cohérente d'une page à l'autre.
Le responsive et les états
Les préfixes sm:, md: ou lg: adaptent un style à la taille de l'écran, et hover:, focus: ou disabled: à l'état de l'élément. Le mode sombre se gère de la même façon, avec dark:.
Des composants faciles à maintenir
Avec un framework de composants comme Vue.js ou Ember.js, le style vit avec le composant. On réutilise un composant plutôt qu'une classe CSS, et quand on modifie un composant, on sait exactement ce que la modification touche.
Des classes toujours dans le même ordre
Nous utilisons le plugin Prettier officiel de Tailwind, qui trie les classes automatiquement à chaque formatage. Deux développeurs qui écrivent le même composant obtiennent le même code, et les relectures de merge request se concentrent sur ce qui change vraiment.
Nos projets avec Tailwind
- Cobra : La cohorte COBRA, promue par l’INSERM, a pour but de suivre les facteurs de risques cliniques, biologiques et génétiques de l’évolution de l’asthme et la BPCO.
- Simplauto : Simplauto est un site e-commerce à fort trafic, il permet aujourd'hui à des milliers d'utilisateurs de réserver le contrôle technique de leurs véhicules.
Le site que vous êtes en train de lire est aussi construit avec Tailwind, sur Next.js.
Ce que Naeka peut faire pour vous
- intégrer vos maquettes avec Tailwind, en restant fidèle au design, sur mobile comme sur grand écran
- traduire votre charte graphique en configuration Tailwind, pour que toute l'équipe parte des mêmes couleurs, espacements et typographies
- construire une bibliothèque de composants réutilisables pour votre application
- migrer une interface existante, écrite en CSS classique ou avec Bootstrap, vers Tailwind, écran par écran
- monter de version Tailwind sur une application existante : la version 4, sortie en janvier 2025, change la façon de configurer le framework, désormais directement en CSS
Parlons de votre interface
Vous avez une interface à construire ou une feuille de style devenue difficile à maintenir ? Contactez-nous pour en discuter.