Comment utiliser les utilitaires statiques dans Tailwind ?

Comment Utiliser Les Utilitaires Statiques Dans Tailwind



Tailwind est un framework bien connu qui offre une collection de classes utilitaires pour styliser les éléments HTML. Cependant, les développeurs peuvent parfois avoir besoin d'utiliser certaines propriétés ou valeurs CSS personnalisées qui ne sont pas disponibles dans la configuration par défaut de Tailwind. Dans cette situation, ils peuvent utiliser les utilitaires statiques pour créer leurs propres classes d'utilitaires avec des règles CSS personnalisées.

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 :

< corps >

< 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.