- Installation via npm :
npm install tailwindcss
text-{color}: Couleur du texte (par exemple,text-red-500).text-{size}: Taille du texte (par exemple,text-xl).font-{family}: Famille de police (par exemple,font-sans).
container: Conteneur centré avec des marges automatiques.mx-auto: Marge horizontale automatique pour le centrage.
w-{size}: Largeur (par exemple,w-1/2pour la moitié de la largeur).h-{size}: Hauteur (par exemple,h-16pour une hauteur de 4rem).
m-{size}: Marge (par exemple,m-4pour une marge de 1rem).p-{size}: Remplissage (par exemple,p-2pour un remplissage de 0.5rem).
bg-{color}: Couleur de fond (par exemple,bg-blue-300).text-{color}: Couleur du texte (par exemple,text-white).
flex: Éléments en affichage flex.grid: Éléments en affichage grille.justify-{value}: Alignement horizontal des éléments (par exemple,justify-center).items-{value}: Alignement vertical des éléments (par exemple,items-center).
hidden: Élément masqué.block: Élément affiché en tant que bloc.inline: Élément affiché en tant qu'élément en ligne.
border: Ajout d'une bordure.rounded: Coins arrondis.shadow-{value}: Ajout d'une ombre (par exemple,shadow-md).
cursor-{value}: Style de curseur (par exemple,cursor-pointer).pointer-events-{value}: Événements de pointeur (par exemple,pointer-events-none).
Vous pouvez également utiliser des pseudo-classes telles que hover:, focus:, active:, etc., pour appliquer des styles interactifs à vos éléments.
<div class="container mx-auto p-4">
<h1 class="text-2xl font-bold text-blue-500">Mon Titre</h1>
<p class="mt-4">Contenu du paragraphe.</p>
<button class="bg-green-400 hover:bg-green-500 text-white font-semibold py-2 px-4 rounded">Bouton</button>
</div>text-left: Aligner le texte à gauche.text-center: Aligner le texte au centre.text-right: Aligner le texte à droite.text-justify: Justifier le texte.align-middle: Aligner verticalement au milieu (dans un conteneur flex).align-top: Aligner en haut (dans un conteneur flex).align-bottom: Aligner en bas (dans un conteneur flex).
grid-cols-{n}: Définir le nombre de colonnes dans une grille (par exemple,grid-cols-2pour 2 colonnes).col-span-{n}: Étendre une colonne sur un certain nombre de colonnes (par exemple,col-span-3pour 3 colonnes).grid-rows-{n}: Définir le nombre de lignes dans une grille.row-span-{n}: Étendre une ligne sur un certain nombre de lignes.
absolute: Position absolue par rapport au conteneur parent.relative: Position relative par rapport à la position normale.fixed: Position fixe par rapport à la fenêtre du navigateur.inset-{value}: Définir la position (par exemple,inset-0pour 0 pixels de tous les côtés).z-{value}: Indice de superposition z (par exemple,z-10pour une superposition z de 10).
sm:,md:,lg:,xl:: Préfixes pour le rendu réactif (par exemple,sm:hiddenpour masquer sur les petits écrans).
space-x-{size}: Espace horizontal entre les éléments d'une liste (par exemple,space-x-4).space-y-{size}: Espace vertical entre les éléments d'une liste.divide-x-{size}: Diviseur horizontal entre les éléments d'une liste.divide-y-{size}: Diviseur vertical entre les éléments d'une liste.
font-normal: Police normale.font-medium: Police moyenne (gras).font-semibold: Police semi-gras.font-bold: Police en gras.italic: Texte en italique.
object-contain: Ajuster la taille de l'image pour qu'elle tienne dans son conteneur.object-cover: Ajuster la taille de l'image pour qu'elle couvre son conteneur.
form-input: Style par défaut pour les éléments de formulaire.form-select: Style pour les élémentsselect.form-checkbox: Style pour les cases à cocher.form-radio: Style pour les boutons radio.form-textarea: Style pour les zones de texte.
hover:{property}-{value}: Appliquer un style au survol (par exemple,hover:bg-gray-200).focus:{property}-{value}: Appliquer un style lorsqu'un élément obtient le focus (par exemple,focus:outline-none).
text-xs: Texte très petit.text-sm: Texte petit.text-base: Texte de base (taille normale).text-lg: Texte grand.text-xl: Texte très grand.text-2xl: Texte encore plus grand.text-3xl: Texte très grand.text-4xl: Texte énorme.
m-{size}: Marge négative (par exemple,m-4).mt-{size}: Marge négative en haut.mb-{size}: Marge négative en bas.ml-{size}: Marge négative à gauche.mr-{size}: Marge négative à droite.
space-x-{value}: Espacement horizontal personnalisé (par exemple,space-x-6).space-y-{value}: Espacement vertical personnalisé.
container-{value}: Largeur personnalisée pour un conteneur (par exemple,container-sm).w-{value}: Largeur personnalisée (par exemple,w-3/5).
transition-{property}: Appliquer une transition à une propriété (par exemple,transition-opacity).
opacity-{value}: Définir l'opacité d'un élément (par exemple,opacity-50pour une opacité de 50%).
space-x-{value}: Espacement horizontal personnalisé entre les enfants d'un conteneur (par exemple,space-x-6).space-y-{value}: Espacement vertical personnalisé entre les enfants d'un conteneur.
table: Afficher un élément comme une table.table-row: Afficher un élément comme une ligne de tableau.table-cell: Afficher un élément comme une cellule de tableau.
border-{property}-{value}: Définir une bordure personnalisée (par exemple,border-t-2pour une bordure supérieure de 2 pixels).
flex-{value}: Définir la valeur de flex (par exemple,flex-1).
parent-{selector}: Cibler l'élément parent (par exemple,parent:hover).
space-x-{value}: Espacement horizontal entre les enfants d'un élément parent (par exemple,space-x-4).
Tailwind CSS utilise des préfixes de classe pour appliquer des styles spécifiques à certaines tailles d'écran. Les préfixes de classe réactifs sont les suivants :
sm:: Small (petit) - Les écrans de petite taille, tels que les téléphones mobiles en mode portrait.md:: Medium (moyen) - Les écrans de taille moyenne, comme les tablettes en mode paysage.lg:: Large (large) - Les écrans de grande taille, tels que les ordinateurs de bureau et les tablettes en mode portrait.xl:: Extra Large (très large) - Les écrans extra larges, comme les écrans d'ordinateurs de bureau larges.
Préfixes de classe dans le HTML pour rendre l'interface utilisateur réactive :
<div class="bg-blue-500">Contenu visible sur tous les écrans</div>
<div class="sm:hidden">Contenu masqué sur les petits écrans</div>
<div class="md:hidden lg:block">Contenu visible sur les écrans moyens et larges</div>
<div class="xl:flex">Contenu affiché en flexbox sur les très grands écrans</div>Dans cet exemple, le contenu est affiché ou masqué en fonction de la taille de l'écran grâce aux classes réactives. Vous pouvez également utiliser ces classes pour ajuster la mise en page, la taille de la police, la largeur des éléments, etc., en fonction de la taille de l'écran.
Tailwind CSS propose également des classes réactives pour la mise en page et la disposition, telles que grid, flex, float, clear, order, etc. Par exemple, vous pouvez utiliser lg:flex pour activer la disposition flex sur les grands écrans uniquement.
Outre les classes réactives prédéfinies, Tailwind CSS vous permet de créer des classes personnalisées pour des tailles d'écran spécifiques. Par exemple, vous pouvez ajouter des classes comme xxl: pour les écrans extra extra larges et les personnaliser selon vos besoins.
<div class="xxl:flex">Contenu affiché en flexbox sur les écrans très larges personnalisés</div>