Tailwind CSS

Tailwind CSS est un framework CSS utility-first qui met en forme une page avec de petites classes à usage unique écrites directement dans le HTML. Des classes comme p-4, text-center et bg-blue-500 définissent chacune un seul style. Les développeurs combinent ces classes pour construire n'importe quel design sans écrire beaucoup de CSS personnalisé.

Le CSS utility-first consiste à construire un design avec de nombreuses petites classes qui font chacune une seule chose, au lieu d'écrire une classe personnalisée pour chaque composant. Un bouton tire son apparence de classes pour le padding, la couleur, l'arrondi et la graisse de police. Cette approche garde les styles près du balisage et évite des feuilles de style qui ne cessent de grossir.

Les développeurs choisissent Tailwind CSS parce qu'il accélère la mise en forme et garde le fichier CSS final léger. Plus besoin d'inventer des noms de classes ni de passer du HTML au CSS à chaque modification. Tailwind CSS fournit aussi une échelle cohérente d'espacements, de couleurs et de tailles de police, ce qui garde un design net.

Tailwind CSS fournit des classes utilitaires de bas niveau pour construire un design sur mesure, alors que Bootstrap fournit des composants prêts à l'emploi comme des barres de navigation, des cartes et des fenêtres modales. Bootstrap est plus rapide pour un rendu standard avec peu de travail de design. Tailwind CSS convient mieux quand un projet a besoin de son propre design unique sans lutter contre un thème par défaut.

On installe Tailwind CSS via npm et on le relie à l'outil de build du projet, comme Vite, PostCSS ou la CLI Tailwind. Dans la version 4 de Tailwind CSS, on ajoute le paquet puis on l'importe en haut du fichier CSS principal avec @import "tailwindcss". Le guide d'installation officiel propose des étapes courtes pour chaque framework courant, dont Laravel, Next.js et Vite.

Tailwind CSS convient aux débutants qui comprennent déjà les propriétés CSS de base comme margin, padding, flexbox et grid. Chaque classe Tailwind correspond à une vraie propriété CSS, donc apprendre d'abord le CSS rend les classes faciles à lire. Les débutants qui sautent les bases du CSS ont souvent du mal à corriger leurs mises en page avec Tailwind CSS.

La plupart des développeurs qui connaissent le CSS deviennent productifs avec Tailwind CSS en quelques jours. Les noms de classes suivent des logiques claires, donc apprendre un groupe de classes aide à deviner les autres. Maîtriser les variantes responsives, les thèmes personnalisés et les modèles de composants demande quelques semaines d'usage réel.

Le responsive design avec Tailwind CSS fonctionne en ajoutant des préfixes de breakpoint comme sm:, md: et lg: devant n'importe quelle classe utilitaire. Tailwind CSS est mobile first : une classe sans préfixe s'applique à tous les écrans, et une classe préfixée s'applique à partir de ce breakpoint. Par exemple, text-sm md:text-lg donne un petit texte sur téléphone et un texte plus grand sur les écrans plus larges.

Les breakpoints par défaut de Tailwind CSS sont sm à 640 pixels, md à 768 pixels, lg à 1024 pixels, xl à 1280 pixels et 2xl à 1536 pixels. Chaque breakpoint est une largeur minimale, conformément à l'approche mobile first de Tailwind. Un projet peut modifier ces valeurs ou ajouter de nouveaux breakpoints dans les réglages de son thème.

On ajoute un mode sombre avec Tailwind CSS en plaçant le préfixe dark: devant n'importe quelle classe, comme dark:bg-gray-900. Par défaut, Tailwind CSS suit le réglage du système d'exploitation du visiteur. Pour laisser les utilisateurs changer de mode avec un bouton, on configure la variante dark pour qu'elle dépende d'une classe ou d'un attribut data sur la page.

Dans la version 4 de Tailwind CSS, on personnalise les couleurs et les polices avec des variables CSS dans un bloc @theme du fichier CSS principal. Une variable comme --color-brand crée automatiquement des classes comme bg-brand et text-brand. Les anciennes versions utilisaient un fichier tailwind.config.js pour cela, et cette méthode fonctionne encore en version 4 grâce à une option de compatibilité.

Tailwind CSS peut rendre le HTML chargé, car un élément peut porter de nombreuses classes. La plupart des équipes règlent ce point en transformant les motifs répétés en composants de leur framework, comme des composants Blade, React ou Vue. En contrepartie, les styles restent visibles à côté du balisage, ce qui rend les modifications rapides et sûres.

Tailwind CSS garde le fichier CSS léger en analysant les fichiers du projet et en ne générant que les classes réellement utilisées. Les utilitaires inutilisés n'arrivent jamais dans la feuille de style finale. Un fichier CSS de production construit avec Tailwind CSS reste généralement léger, même pour de grands sites.

La directive @apply de Tailwind CSS permet d'utiliser des classes utilitaires Tailwind dans vos propres règles CSS. Elle est pratique pour mettre en forme un contenu que vous ne contrôlez pas, comme le HTML produit par un éditeur de texte. L'équipe Tailwind recommande de l'utiliser avec modération, car les composants sont généralement une façon plus propre de réutiliser des styles.

Oui, Tailwind CSS fonctionne très bien avec Laravel, et les nouveaux projets Laravel sont déjà configurés pour l'utiliser avec Vite. On écrit les classes Tailwind dans les templates Blade, et Vite construit le CSS final. Les starter kits de Laravel utilisent aussi Tailwind CSS pour leurs écrans de connexion et de tableau de bord.

Oui, Tailwind CSS fonctionne avec React, Vue, Svelte et la plupart des autres frameworks JavaScript. Les classes se placent dans le balisage du composant via className en React ou class en Vue. Comme chaque composant porte ses propres classes, Tailwind CSS s'intègre bien aux frameworks à base de composants.

Tailwind CSS n'a pas d'effet direct sur le classement dans les moteurs de recherche, mais il peut aider le SEO indirectement en gardant le fichier CSS léger et les pages rapides. La vitesse des pages fait partie des signaux d'expérience de page de Google. Le contenu, la structure des pages et la sémantique HTML comptent toutefois bien plus que l'outil de mise en forme.

Les valeurs arbitraires de Tailwind CSS permettent d'utiliser une valeur exacte absente du thème en l'écrivant entre crochets. Par exemple, w-[37%] ou top-[117px] crée à la volée une classe pour cette valeur précise. Les valeurs arbitraires sont utiles pour les cas ponctuels, mais une valeur utilisée souvent a sa place dans le thème.

Les états hover et focus dans Tailwind CSS fonctionnent en ajoutant un préfixe d'état comme hover:, focus: ou active: devant une classe utilitaire. Par exemple, bg-blue-500 hover:bg-blue-600 assombrit un bouton quand la souris le survole. Ces préfixes se combinent avec les breakpoints et le mode sombre, comme md:hover:underline.

Non, Tailwind CSS lui-même ne contient que des classes utilitaires, pas de composants prêts à l'emploi comme des fenêtres modales ou des barres de navigation. Les composants prêts viennent de collections séparées, comme le Tailwind Plus officiel ou des bibliothèques communautaires comme daisyUI et Flowbite. Beaucoup d'équipes construisent leur propre petit jeu de composants au-dessus des utilitaires.

Oui, Tailwind CSS prend en charge les mises en page de droite à gauche grâce aux variantes rtl: et ltr: et aux classes utilitaires logiques. Des classes logiques comme ms-4 et pe-2 définissent la marge et le padding au début ou à la fin d'une ligne, elles s'inversent donc automatiquement en arabe. Un seul balisage fonctionne ainsi pour les pages en anglais comme en arabe.

La version 4 de Tailwind CSS a déplacé la configuration dans le CSS, avec le bloc @theme et une seule ligne @import. Elle a aussi apporté un moteur de build plus rapide, la détection automatique des fichiers de contenu et des fonctions CSS modernes comme les cascade layers. La plupart des projets qui passent de la version 3 peuvent utiliser l'outil de mise à niveau officiel pour mettre à jour leur code.

Tailwind CSS n'est pas forcément le bon choix quand un projet a besoin d'un jeu complet de composants prêts avec presque aucun design personnalisé, ou quand l'équipe préfère écrire du CSS classique. Une petite page statique avec quelques styles n'a parfois besoin d'aucun framework. Tailwind CSS est le plus rentable sur les projets au design personnalisé qui ne cessent de grandir.

On garde les classes Tailwind CSS organisées en transformant les motifs répétés en composants et en triant les classes dans un ordre cohérent. Le plugin Prettier officiel pour Tailwind CSS trie automatiquement les classes à l'enregistrement. Définir les couleurs et les espacements de la marque dans le thème garde aussi des classes courtes et cohérentes.

Oui, Tailwind CSS est open source sous licence MIT, il peut donc être utilisé dans des projets personnels et commerciaux. La licence autorise à utiliser, modifier et distribuer Tailwind CSS dans n'importe quel produit. Le code source est public sur GitHub, où chacun peut le lire et signaler des problèmes.