Introduction à TailwindCSS

16/06/2019 - MAJ : 19/06/2019

#css #tailwind

TailwindCSS est un framework CSS personnalisable et sans design ou composant prédéfini. Plutôt que de préconfigurer les titres avec une certaine taille de caractère et des marges, ou un système de grille, le framework propose des classes de bases qui permettront de définir le design souhaité. L'utilisation de l'extraction de classes avec la directive @apply de Tailwind permet de profiter de la souplesse de ce framework en limitant le nombre de classes à écrire. TailwindCSS s'intègre bien également aux composants Web tel qu'utilisés dans Vue ou React.

Quelques exemples

Padding / margin

Les classes définissant les padding commence par p et celles définissant les margins par m. Ce préfixe peut-être suivi d'une lettre indiquant le côté ou la 'direction' : t pour top, r pour right, b pour bottom, l pour left, x pour horizontal (c'est à dire right et left) et y pour vertical (c'est à dire top et bottom). On termine la classe par un tiret et un chiffre, de 1 = 0.25rem à 64 = 16 rem. 

Par exemple, pour appliquer un padding de 1 rem à tous les côtés d'un élément, on indiquera p-4. Si l'on ne voulait que la marge intérieure du haut, on aurait écrit pt-4. Et si l'on souhaitait une marge vertical de 16 rem, on pourra écrire my-16.

Couleurs

Tailwind CSS fournit une palette par défaut qui peut-être personnalisé selon les besoins. Chaque couleur de base se décline en 9 teintes, de 100 la teinte la plus claires à 900 la plus foncée. On ajoute à cela le préfixe, bg pour la couleur de fond, text pour la couleur du texte ou border pour la couleur de bordure. 

Par exemple, pour un fond gris moyen-clair, on pourra utiliser la classe bg-gray-400. Pour un texte bleu foncé, on pourra indiquer la classe bg-blue-900.

Responsive design

Un préfixe peut être ajouté à chaque classe Tailwind, y compris les couleurs par exemple, pour indiquer à partir de quel taille d'écran l'appliquer. Tailwind est 'mobile first', une classe sans préfixe s'appliquera à toutes les tailles d'écran. Une classe préfixée s'appliquera à partir d'une taille d'écran et au-dessus. Quatre tailles sont disponibles par défaut :

/* Petit (sm) */ @media (min-width: 640px) { /* ... */ } /*

Moyen (md) */ @media (min-width: 768px) { /* ... */ } /*

Large (lg) */ @media (min-width: 1024px) { /* ... */ } /*

Extra large (xl) */ @media (min-width: 1280px) { /* ... */ }

La taille s'ajoute avant la classe suivi de deux points ':'. Par exemple, pour définir une marge à gauche d'un élément de 0.25rem pour les mobiles et de 1rem pour les écrans de taille moyenne et au-dessus, on pourrait écrire les classes : ml-1 md:ml-4