Ez a cikk elmagyarázza a statikus segédprogramok használatát a Tailwind CSS-ben.
Hogyan használjuk a statikus segédprogramokat a Tailwindben?
A statikus segédprogramok Tailwindben való használatához adja hozzá a „ addUtilities() ” függvényt a „tailwind.config.js” fájlban, és konfigurálja a kívánt statikus segédprogramokat. Ezután használjon statikus segédprogramokat a HTML programban, és győződjön meg arról, hogy a statikus segédprogramok megfelelően működnek a HTML weboldal megtekintésekor.
Vizsgáljuk meg a következő lépéseket:
1. lépés: Állítsa be a statikus segédprogramokat a „tailwind.config.js” fájlban
Nyissa meg a „ tailwind.config.js ' fájlt, és add hozzá a ' bővítmények ” szakaszban. Ezután használja a „ addUtilities() ” funkciót a kívánt statikus segédprogramok konfigurálásához. Például a következő statikus segédprogramokat konfiguráltuk:
const plugin = request('tailwindcss/plugin')
module.exports = {
tartalom: ['./index.html'],
bővítmények: [
plugin(function({ addUtilities }) {
addUtilities({
'.content-auto': {
'content-visibility': 'auto',
},
'.content-hidden': {
'content-visibility': 'rejtett',
},
'.bg-coral': {
háttér: 'korall'
},
'.skew-5deg': {
transzformáció: 'skewY(-5deg)',
},
})
})
]
};
Itt:
- A ' addUtilities() ” függvény regisztrálja az egyéni statikus segédprogramokat egy segédprogramosztályokat és a hozzájuk tartozó stílusokat tartalmazó objektum biztosításával.
- A ' .content-auto ” segédprogram osztály a content-visibility tulajdonságot auto értékre állítja.
- A ' .tartalom-rejtett ” segédprogram osztály a content-visibility tulajdonságot rejtettre állítja.
- A ' .bg-korall ” használati osztály a korall színét állítja a háttérbe.
- A ' .ferde-5 fok ” segédosztály a transzformációs tulajdonságot skewY(-5deg) értékre állítja.
2. lépés: Használja a HTML program statikus segédprogramjait
Most használja a kívánt statikus segédprogramokat a HTML programban:
< div osztály = 'h-screen bg-coral' >
< p osztály = 'tartalom-automatikus' >Szia< / p >
< p osztály = 'tartalom-rejtett' >Üdvözöllek itt< / p >
< p osztály = 'ferde-5 fok' >Szöveg átalakítása< / p >
< / div >
< / test >
3. lépés: Ellenőrizze a kimenetet
Végül futtassa a HTML programot, hogy megbizonyosodjon arról, hogy a statikus segédprogramok megfelelően működnek:
A fenti kimenet azt jelzi, hogy a statikus segédprogramok megfelelően működnek, annak megfelelően, ahogyan meghatározták őket.
Következtetés
A statikus segédprogramok Tailwind programban való használatához a „ addUtilities() ” függvényt a „tailwind.config.js” fájlban, és konfigurálja a kívánt statikus segédprogramokat. Az „addUtilities()” függvény és olyan segédosztályok hozzáadása, amelyek közvetlenül alkalmazhatók a HTML programban. Ez a cikk elmagyarázza a statikus segédprogramok használatának módszerét a Tailwind CSS-ben.