Cet article illustrera la méthode d'application des points d'arrêt et des requêtes multimédias sur les utilitaires de 'débordement' dans Tailwind CSS.
Comment utiliser les points d'arrêt et les requêtes multimédias avec 'débordement' dans Tailwind ?
Pour appliquer des points d'arrêt et des requêtes multimédias particuliers sur les utilitaires de 'débordement' dans Tailwind, créez une structure HTML. Ensuite, utilisez le ' Maryland ' ou ' lg ” points d'arrêt avec les valeurs souhaitées 'débordement-
Exemple
Dans cet exemple, nous utiliserons le 'Maryland' point d'arrêt avec le 'débordement-défilement' utilité dans le
conteneur pour y ajouter les barres de défilement et les affiche toujours sur une taille d'écran moyenne : < corps >
< div classe = 'overflow-auto md:overflow-scroll bg-purple-300 p-4 mx-16 mt-5 h-36 text-justify' >
Tailwind CSS fournit divers utilitaires de 'débordement', tels que
« overflow-auto », « overflow-scroll », « overflow-hidden », « overflow-visible »
etc. Ces utilitaires déterminent comment un élément spécifique gère le contenu
qui dépasse la taille du conteneur. Chaque utilitaire offre des fonctionnalités uniques,
cependant, leur objectif final reste le même, c'est-à-dire contrôler le débordement
comportement de l'élément sélectionné.
< / div >
< / corps >
Ici:
- Le 'débordement-auto' la classe est utilisée pour ajouter les barres de défilement à la conteneur et ne les affichez que lorsque le défilement est nécessaire.
- Le 'md:débordement-défilement' classe ajoute les barres de défilement et les affiche toujours sur le 'Maryland' point d'arrêt (taille d'écran moyenne).
Sortir:
Selon la sortie ci-dessus, les points d'arrêt et les requêtes multimédias ont été appliqués avec succès sur les utilitaires de 'débordement'.
Conclusion
Pour appliquer des points d'arrêt et des requêtes multimédias sur les utilitaires de 'débordement' dans Tailwind, utilisez le ' nm ”, “ Maryland ' ou ' lg 'points d'arrêt avec le désiré' débordement-