Ta članek bo razložil metodo za uporabo statičnih pripomočkov v Tailwind CSS.
Kako uporabljati statične pripomočke v Tailwindu?
Če želite uporabljati statične pripomočke v Tailwindu, dodajte » addUtilities() « v datoteki »tailwind.config.js« in konfigurirajte želene statične pripomočke. Nato uporabite statične pripomočke v programu HTML in zagotovite, da statični pripomočki med ogledom spletne strani HTML pravilno delujejo.
Raziščimo naslednje korake:
1. korak: Konfigurirajte statične pripomočke v datoteki »tailwind.config.js«.
Odprite ' tailwind.config.js ' in dodajte ' vtičniki ”. Nato uporabite » addUtilities() ” za konfiguracijo želenih statičnih pripomočkov. Na primer, konfigurirali smo naslednje statične pripomočke:
const plugin = require('tailwindcss/plugin')
module.exports = {
vsebina: ['./index.html'],
vtičniki: [
plugin(function({ addUtilities }) {
addUtilities({
'.content-auto': {
'content-visibility': 'auto',
},
'.content-hidden': {
'content-visibility': 'skrito',
},
'.bg-koral': {
ozadje: 'koral'
},
'.skew-5deg': {
transformacija: 'skewY(-5deg)',
},
})
})
]
};
Tukaj:
- ' addUtilities() ” funkcija registrira statične pripomočke po meri tako, da zagotovi objekt, ki vsebuje razrede pripomočkov in njihove ustrezne sloge.
- ' .content-auto ” razred pripomočkov nastavi lastnost vidnosti vsebine na samodejno.
- ' .vsebina-skrita ” razred pripomočkov nastavi lastnost vidnosti vsebine na skrito.
- ' .bg-koral ” uporabni razred nastavi koralno barvo za ozadje.
- ' .naklon-5deg ” razred pripomočkov nastavi lastnost transformacije na skewY(-5deg).
2. korak: Uporabite statične pripomočke v programu HTML
Zdaj uporabite želene statične pripomočke v programu HTML:
< div razred = 'h-zaslon bg-koral' >
< str razred = 'samodejna vsebina' >Pozdravljeni< / str >
< str razred = 'vsebina skrita' >Dobrodošli tukaj< / str >
< str razred = 'poševno-5deg' >Pretvori besedilo< / str >
< / div >
< / telo >
3. korak: Preverite izhod
Na koncu zaženite program HTML, da zagotovite, da statični pripomočki delujejo pravilno:
Zgornji izhod kaže, da statični pripomočki delujejo pravilno, v skladu s katerim so bili definirani.
Zaključek
Če želite uporabljati statične pripomočke v Tailwindu, morate uporabiti » addUtilities() « v datoteki »tailwind.config.js« in konfigurirajte želene statične pripomočke. Funkcija »addUtilities()« in dodajte razrede pripomočkov, ki jih je mogoče uporabiti neposredno v programu HTML. V tem članku je razložen način uporabe statičnih pripomočkov v Tailwind CSS.