Acest articol va explica metoda de utilizare a utilităților statice în Tailwind CSS.
Cum se utilizează utilitare statice în Tailwind?
Pentru a utiliza utilitățile statice în Tailwind, adăugați „ addUtilities() ” în fișierul „tailwind.config.js” și configurați utilitățile statice dorite. Apoi, utilizați utilitare statice în programul HTML și asigurați-vă că utilitarele statice funcționează corect atunci când vizualizați pagina web HTML.
Să explorăm următorii pași:
Pasul 1: Configurați utilitare statice în fișierul „tailwind.config.js”.
Deschide ' tailwind.config.js ” și adăugați „ pluginuri ' secțiune. Apoi, utilizați „ addUtilities() ” pentru a configura utilitățile statice dorite. De exemplu, am configurat următoarele utilitare statice:
const plugin = require('tailwindcss/plugin')
module.exports = {
conținut: ['./index.html'],
pluginuri: [
plugin(funcție({ addUtilities }) {
addUtilities({
„.content-auto”: {
„content-visibility”: „auto”,
},
„.content-hidden”: {
„content-visibility”: „ascuns”,
},
„.bg-coral”: {
fundal: „coral”
},
„.skew-5deg”: {
transforma: „skewY(-5deg)”,
},
})
})
]
};
Aici:
- „ addUtilities() ” funcția înregistrează utilitățile statice personalizate furnizând un obiect care conține clase de utilități și stilurile corespunzătoare acestora.
- „ .conținut-auto ” clasa de utilitate setează proprietatea de vizibilitate a conținutului la auto.
- „ .conținut-ascuns ” clasa de utilitate setează proprietatea de vizibilitate a conținutului la ascuns.
- „ .bg-coral ” clasa de utilitate setează culoarea coralului pe fundal.
- „ .skew-5grade ” clasa de utilitate setează proprietatea transform la skewY(-5deg).
Pasul 2: Utilizați utilitarele statice în programul HTML
Acum, utilizați utilitățile statice dorite în programul HTML:
< div clasă = „h-screen bg-coral” >
< p clasă = „conținut-auto” >Bună ziua< / p >
< p clasă = 'conținut ascuns' >Bine ați venit aici< / p >
< p clasă = 'inclinat-5 grade' >Transformați textul< / p >
< / div >
< / corp >
Pasul 3: Verificați ieșirea
În cele din urmă, rulați programul HTML pentru a vă asigura că utilitățile statice funcționează corect:
Ieșirea de mai sus indică faptul că utilitățile statice funcționează corect conform cărora au fost definite.
Concluzie
Pentru a utiliza utilitățile statice în Tailwind, este necesar să utilizați „ addUtilities() ” în fișierul „tailwind.config.js” și configurați utilitățile statice dorite. Funcția „addUtilities()” și adăugați clase de utilitate care pot fi aplicate direct în programul HTML. Acest articol a explicat metoda de utilizare a utilităților statice în Tailwind CSS.