Cet article explique la méthode d'utilisation des utilitaires statiques dans Tailwind CSS.
Comment utiliser les utilitaires statiques dans Tailwind ?
Pour utiliser les utilitaires statiques dans Tailwind, ajoutez le ' addUtilities() » dans le fichier « tailwind.config.js » et configurez les utilitaires statiques souhaités. Ensuite, utilisez des utilitaires statiques dans le programme HTML et assurez-vous que les utilitaires statiques fonctionnent correctement lors de l'affichage de la page Web HTML.
Explorons les étapes suivantes :
Étape 1 : Configurer les utilitaires statiques dans le fichier 'tailwind.config.js'
Ouvrez le ' tailwind.config.js ' fichier et ajoutez le ' plugins ' section. Ensuite, utilisez le ' addUtilities() ” pour configurer les utilitaires statiques souhaités. Par exemple, nous avons configuré les utilitaires statiques suivants :
const plugin = require('tailwindcss/plugin')
module.exports = {
contenu : ['./index.html'],
plugins : [
plugin(fonction({ addUtilities }) {
addUtilities({
'.content-auto' : {
'contenu-visibilité' : 'auto',
},
'.content-hidden' : {
'contenu-visibilité' : 'caché',
},
'.bg-corail' : {
fond : 'corail'
},
'.skew-5deg' : {
transformer : 'skewY(-5deg)',
},
})
})
]
} ;
Ici:
- Le ' addUtilities() ” enregistre les utilitaires statiques personnalisés en fournissant un objet contenant des classes d'utilitaires et leurs styles correspondants.
- Le ' .content-auto ” la classe utilitaire définit la propriété content-visibility sur auto.
- Le ' .content-caché ” la classe utilitaire définit la propriété content-visibility sur hidden.
- Le ' .bg-corail ” la classe utilitaire définit la couleur corail en arrière-plan.
- Le ' .skew-5deg ' La classe utilitaire définit la propriété de transformation sur skewY (-5deg).
Étape 2 : Utiliser les utilitaires statiques dans le programme HTML
Maintenant, utilisez les utilitaires statiques souhaités dans le programme HTML :
< div classe = 'h-écran bg-corail' >
< p classe = 'contenu-auto' >Bonjour< / p >
< p classe = 'contenu caché' >Bienvenue ici< / p >
< p classe = 'inclinaison-5deg' >Transformer le texte< / p >
< / div >
< / corps >
Étape 3 : vérifier la sortie
Enfin, exécutez le programme HTML pour vous assurer que les utilitaires statiques fonctionnent correctement :
La sortie ci-dessus indique que les utilitaires statiques fonctionnent correctement en fonction de leur définition.
Conclusion
Pour utiliser les utilitaires statiques dans Tailwind, il est nécessaire d'utiliser le ' addUtilities() » dans le fichier « tailwind.config.js » et configurez les utilitaires statiques souhaités. La fonction 'addUtilities()' et ajouter des classes d'utilitaires qui peuvent être appliquées directement dans le programme HTML. Cet article a expliqué la méthode d'utilisation des utilitaires statiques dans Tailwind CSS.