Šajā rakstā ir izskaidrota statisko utilītu izmantošanas metode Tailwind CSS.
Kā lietot statiskās utilītas programmā Tailwind?
Lai lietotu statiskās utilītas programmā Tailwind, pievienojiet “ addUtilities() ” funkciju failā “tailwind.config.js” un konfigurējiet vajadzīgās statiskās utilītas. Pēc tam izmantojiet statiskās utilītas HTML programmā un pārliecinieties, vai statiskās utilītas darbojas pareizi, skatot HTML tīmekļa lapu.
Izpētīsim tālāk norādītās darbības.
1. darbība: konfigurējiet statiskās utilītas failā “tailwind.config.js”.
Atveriet ' tailwind.config.js ' failu un pievienojiet ' spraudņi ” sadaļa. Pēc tam izmantojiet ' addUtilities() ” funkciju, lai konfigurētu vēlamās statiskās utilītas. Piemēram, esam konfigurējuši šādas statiskās utilītas:
const spraudnis = prasīt('tailwindcss/plugin')
module.exports = {
saturs: ['./index.html'],
spraudņi: [
spraudnis(function({ addUtilities }) {
addUtilities({
'.content-auto': {
'content-visibility': 'auto',
},
'.content-hidden': {
'content-visibility': 'slēpts',
},
'.bg-coral': {
fons: 'koraļļi'
},
'.skew-5deg': {
pārveidot: 'skewY(-5deg)',
},
})
})
]
};
Šeit:
- ' addUtilities() ” funkcija reģistrē pielāgotās statiskās utilītas, nodrošinot objektu, kas satur utilītu klases un to atbilstošos stilus.
- ' .content-auto ” lietderības klase iestata satura redzamības rekvizītu uz auto.
- ' .saturs-slēpts ” lietderības klase iestata satura redzamības rekvizītu uz slēptu.
- ' .bg-koraļļi ” lietderības klase nosaka koraļļu krāsu uz fona.
- ' .šķībs-5grādi ” lietderības klase iestata transformācijas rekvizītu uz skewY(-5deg).
2. darbība: izmantojiet statiskās utilītas HTML programmā
Tagad izmantojiet vajadzīgās statiskās utilītas HTML programmā:
< div klasē = 'h-screen bg-coral' >
< lpp klasē = 'saturs-auto' >Sveiki< / lpp >
< lpp klasē = 'slēptais saturs' >Laipni lūdzam šeit< / lpp >
< lpp klasē = 'šķībs-5 grādi' >Pārveidot tekstu< / lpp >
< / div >
< / ķermenis >
3. darbība: pārbaudiet izvadi
Visbeidzot, palaidiet HTML programmu, lai pārliecinātos, ka statiskās utilītas darbojas pareizi:
Iepriekš minētā izvade norāda, ka statiskās utilītas darbojas pareizi, saskaņā ar kurām tās tika definētas.
Secinājums
Lai lietotu statiskās utilītas programmā Tailwind, ir jāizmanto “ addUtilities() ” funkciju failā “tailwind.config.js” un konfigurējiet vajadzīgās statiskās utilītas. Funkciju “addUtilities()” un pievienojiet utilītu klases, kuras var lietot tieši HTML programmā. Šajā rakstā ir izskaidrota metode statisko utilītu izmantošanai Tailwind CSS.