Šiame straipsnyje bus paaiškintas statinių paslaugų naudojimo metodas „Tailwind CSS“.
Kaip naudoti statines paslaugas „Tailwind“?
Norėdami naudoti statines programas „Tailwind“, pridėkite „ addUtilities() “ funkciją faile „tailwind.config.js“ ir sukonfigūruokite norimas statines paslaugas. Tada naudokite statines priemones HTML programoje ir įsitikinkite, kad statinės priemonės tinkamai veikia peržiūrint HTML tinklalapį.
Išnagrinėkime šiuos veiksmus:
1 veiksmas: sukonfigūruokite statines paslaugų programas „tailwind.config.js“ faile
Atidaryk ' tailwind.config.js “ failą ir pridėkite „ įskiepių ' skyrius. Tada naudokite „ addUtilities() “, norėdami sukonfigūruoti norimas statines paslaugas. Pavyzdžiui, sukonfigūravome šias statines paslaugas:
const įskiepis = reikalauti('tailwindcss/plugin')
module.exports = {
turinys: ['./index.html'],
papildiniai: [
plugin(function({ addUtilities }) {
addUtilities({
'.content-auto': {
„content-visibility“: „automatinis“,
},
'.content-hidden': {
„turinys-matomumas“: „paslėptas“,
},
„.bg-coral“: {
fonas: 'koralas'
},
'.skew-5deg': {
transformuoti: 'skewY(-5deg)',
},
})
})
]
};
Čia:
- „ addUtilities() “ funkcija registruoja pasirinktines statines priemones, pateikdama objektą, kuriame yra paslaugų klasės ir jas atitinkantys stiliai.
- „ .content-auto ” naudingumo klasė nustato turinio matomumo ypatybę į auto.
- „ .turinys-paslėptas “ naudingumo klasė nustato turinio matomumo ypatybę į paslėptą.
- „ .bg-koralas “ naudingumo klasė nustato koralų spalvą į foną.
- „ .kreiptas-5 laipsniai ” naudingumo klasė nustato transformacijos ypatybę į skewY(-5deg).
2 veiksmas: naudokite statines priemones HTML programoje
Dabar naudokite norimas statines priemones HTML programoje:
< div klasė = 'h-screen bg-coral' >
< p klasė = „automatinis turinys“ >Sveiki< / p >
< p klasė = 'paslėptas turinys' >Sveiki čia< / p >
< p klasė = 'kreiptas-5 laipsniai' >Pakeisti tekstą< / p >
< / div >
< / kūnas >
3 veiksmas: patikrinkite išvestį
Galiausiai paleiskite HTML programą, kad įsitikintumėte, jog statinės paslaugos tinkamai veikia:
Aukščiau pateikta išvestis rodo, kad statinės paslaugos veikia tinkamai, pagal tai, kaip jos buvo apibrėžtos.
Išvada
Norint naudoti statines paslaugas programoje Tailwind, reikia naudoti addUtilities() “ funkciją faile „tailwind.config.js“ ir sukonfigūruokite norimas statines paslaugas. Funkciją „addUtilities()“ ir pridėkite naudingų paslaugų klases, kurias galima pritaikyti tiesiogiai HTML programoje. Šiame straipsnyje paaiškintas statinių paslaugų naudojimo metodas „Tailwind CSS“.