Tailwind CSS fournit ' clair ” utilitaires qui contrôlent le comportement d'un élément particulier lorsqu'il se trouve à côté d'un élément flottant. Par exemple, les classes utilitaires 'clear-left' et 'clear-right' permettent aux développeurs de déplacer les éléments spécifiés sous tout élément flottant à gauche ou à droite dans le conteneur. Cependant, parfois, les utilisateurs souhaitent désactiver tout effacement appliqué à certains éléments et leur permettre d'apparaître à côté des éléments flottants. Dans de telles circonstances, l'utilitaire 'clear-none' peut être utilisé pour définir la valeur par défaut de l'élément.
Cet article illustrera la procédure pour désactiver tous les effacements appliqués dans Tailwind CSS.
Comment désactiver tous les effacements appliqués dans Tailwind ?
Pour désactiver tous les effacements appliqués dans Tailwind, créez un fichier HTML et ajoutez le ' clair-aucun ” classe utilitaire avec l'élément souhaité dans le programme HTML. Cet utilitaire réinitialise tout « clair » appliqué à un élément spécifique et définit la valeur par défaut.
Syntaxe
< élément classe = 'clair-aucun' > ... élément >
Exemple
Dans cet exemple, nous utiliserons le ' clair-aucun ' utilitaire avec le ' ” pour réinitialiser les effacements appliqués et lui permettre de flotter sur les côtés gauche et droit :
< corps >
< div classe = 'h-96 mx-10 p-8 bg-sky-500' >
< image src = 'tailwindcss_img.png' classe = 'float-gauche p-3 w-28 h-24' tout = 'image' />
< image src = 'tailwindcss_img.png' classe = 'flotteur droit p-3' tout = 'image' />
< p classe = 'clair-aucun' > Tailwind CSS fournit 'clair' utilitaires pour contrôler l'habillage du contenu autour d'un élément.
Cet exemple montre comment désactiver tous les effacements appliqués aux éléments. Pour réinitialiser les effacements appliqués à un élément particulier, le 'clair-aucun' utilitaire est utilisé. p >
div >
corps >
Ici:
- ' flottant-gauche ” la classe fait flotter l'élément
sur le côté gauche du conteneur.
- ' Flotter à droite ” la classe fait flotter l'élément
sur le côté droit du conteneur.
- ' clair-aucun ” la classe désactive tout clear appliqué à l'élément
et permet à l'élément de flotter des deux côtés.
Sortir
Dans la page Web ci-dessus, on peut observer que le contenu flotte des deux côtés du conteneur. Cela indique que tous les effacements appliqués ont été désactivés à partir de l'élément spécifié.
Conclusion
Pour désactiver tous les effacements appliqués dans Tailwind, utilisez le ' clair-aucun ” classe utilitaire avec l'élément souhaité dans le programme HTML. Cet utilitaire réinitialise tout clear appliqué à un élément particulier et spécifie la valeur par défaut. Pour vérification, accédez à la page Web et affichez les modifications. Cet article a démontré l'exemple pour désactiver tous les effacements appliqués dans Tailwind CSS.