Cet article illustrera la méthode d'utilisation des points d'arrêt réactifs dans Tailwind CSS.
Comment utiliser les points d'arrêt réactifs dans Tailwind ?
Pour utiliser des points d'arrêt réactifs dans Tailwind, utilisez les modificateurs réactifs, tels que ' nm ”, “ Maryland ”, “ lg ”, “ XL ' et ' 2xl ” avec les autres classes du programme HTML. Ensuite, affichez la page Web HTML et modifiez la taille de l'écran pour vous assurer que les points d'arrêt fonctionnent correctement.
Étape 1 : Utiliser des modificateurs réactifs dans le programme HTML
Créez un programme HTML et utilisez les modificateurs réactifs avec le style souhaité. Par exemple, nous avons utilisé le ' nm ”, “ Maryland ”, “ lg ”, “ XL ' et ' 2xl ” modificateurs réactifs :
< corps >
< div classe = 'h-screen bg-fuchsia-400 sm:bg-pink-600 md:bg-green-700 lg:bg-purple-500 xl:bg-teal-600 2xl:bg-yellow-500' >
< h1 classe = 'texte-7xl texte-blanc texte-centre p-20' > Astuce Linux < / h1 >
< / div >
< / corps >
Ici:
- ' bg-fuchsia-400 ” classe définit la couleur d'arrière-plan de la au fuchsia.
- ' sm:bg-rose-600 ” classe applique une couleur rose à l'arrière-plan pour les petits écrans.
- ' md:bg-vert-700 ” change la couleur d'arrière-plan en vert sur les écrans moyens.
- ' lg:bg-violet-50 ” définit la couleur d'arrière-plan sur violet pour les grands écrans.
- ' xl:bg-sarcelle-600 ” classe applique une couleur bleu sarcelle à l'arrière-plan pour les écrans extra-larges.
- ' 2xl:bg-jaune-500 ” change la couleur de fond en jaune sur les écrans 2xl.
Étape 2 : vérifier la sortie
Affichez la page Web HTML pour vérifier si les points d'arrêt réactifs fonctionnent correctement ou non :
Dans la page Web ci-dessus, on peut observer que la couleur de la page Web change avec la taille de l'écran en fonction de laquelle les points d'arrêt ont été spécifiés.
Conclusion
Pour utiliser des points d'arrêt réactifs dans Tailwind, utilisez les modificateurs réactifs, tels que ' nm ”, “ Maryland ”, “ lg ”, “ XL ' et ' 2xl ” avec les autres classes du programme HTML. Ces modificateurs sont utilisés pour appliquer différents styles à un élément particulier en fonction de la taille de l'écran. Cet article a illustré la méthode d'utilisation des points d'arrêt réactifs dans Tailwind CSS.