Conception Réactive

Tailwind CSS facilite la création de designs réactifs en fournissant des classes utilitaires pour les points de rupture et les requêtes média.

Points de rupture

Les points de rupture dans Tailwind CSS sont définis à des tailles d'écran spécifiques, vous permettant d'appliquer différents styles à différentes largeurs de fenêtre d'affichage.

Points de rupture par défaut

Ces points de rupture peuvent être utilisés comme préfixes pour appliquer des styles conditionnellement en fonction de la largeur de la fenêtre d'affichage.

Explication

1. bg-blue-500: Définit la couleur de fond par défaut sur une teinte de bleu ;
2. p-4: Ajoute une marge intérieure de 1rem (16px) de tous les côtés ;
3. sm:bg-green-500: Définit la couleur de fond sur une teinte de vert sur les petits écrans et plus grands (min-width: 640px) ;
4. md:bg-red-500: Définit la couleur de fond sur une teinte de rouge sur les écrans moyens et plus grands (min-width: 768px) ;
5. lg:bg-yellow-500: Définit la couleur de fond sur une teinte de jaune sur les grands écrans et plus grands (min-width: 1024px) ;
6. xl:bg-purple-500: Définit la couleur de fond sur une teinte de violet sur les écrans extra-larges et plus grands (min-width: 1280px).

Application de styles réactifs

Vous pouvez appliquer des styles réactifs à n'importe quelle classe utilitaire dans Tailwind CSS en la préfixant avec un point de rupture.

Explication

Marge intérieure (Padding):

1. p-4: Ajoute une marge intérieure de 1rem (16px) de tous les côtés par défaut;
2. sm:p-6: Ajoute une marge intérieure de 1.5rem (24px) de tous les côtés pour les petits écrans et plus grands (min-width: 640px);
3. md:p-8: Ajoute une marge intérieure de 2rem (32px) de tous les côtés pour les écrans moyens et plus grands (min-width: 768px);
4. lg:p-10: Ajoute une marge intérieure de 2.5rem (40px) de tous les côtés pour les grands écrans et plus grands (min-width: 1024px);
5. xl:p-12: Ajoute une marge intérieure de 3rem (48px) de tous les côtés pour les très grands écrans et plus grands (min-width: 1280px).

Taille du texte:

1. sm:text-sm: Définit la taille de la police à petite (0.875rem ou 14px) pour les petits écrans et plus grands (min-width: 640px);
2. md:text-base: Définit la taille de la police à base (1rem ou 16px) pour les écrans moyens et plus grands (min-width: 768px);
3. lg:text-lg: Définit la taille de la police à grande (1.125rem ou 18px) pour les grands écrans et plus grands (min-width: 1024px);
4. xl:text-xl: Définit la taille de la police à très grande (1.25rem ou 20px) pour les très grands écrans et plus grands (min-width: 1280px).

Poids de la police:

1. sm:font-light: Applique un poids de police léger pour les petits écrans et plus grands (min-width: 640px);
2. md:font-normal: Applique un poids de police normal pour les écrans moyens et plus grands (min-width: 768px);
3. lg:font-semibold: Applique un poids de police semi-gras pour les grands écrans et plus grands (min-width: 1024px);
4. xl:font-bold: Applique un poids de police gras pour les très grands écrans et plus grands (min-width: 1280px).

Remarque

Vous cherchez des informations spécifiques sur la réactivité ? Consultez le lien suivant.