Ipapaliwanag ng artikulong ito ang paraan ng paggamit ng mga static na utility sa Tailwind CSS.
Paano Gamitin ang Static Utility sa Tailwind?
Upang gamitin ang mga static na utility sa Tailwind, idagdag ang “ addUtilities() ” function sa “tailwind.config.js” na file at i-configure ang gustong mga static na utility. Pagkatapos, gumamit ng mga static na utility sa HTML program at tiyaking gumagana nang maayos ang mga static na utility kapag tinitingnan ang HTML web page.
Tuklasin natin ang mga sumusunod na hakbang:
Hakbang 1: I-configure ang Static Utilities sa “tailwind.config.js” File
Buksan ang ' tailwind.config.js ” file at idagdag ang “ mga plugin ” seksyon. Pagkatapos, gamitin ang ' addUtilities() ” function upang i-configure ang nais na mga static na utility. Halimbawa, na-configure namin ang mga sumusunod na static na utility:
const plugin = nangangailangan('tailwindcss/plugin')
module.exports = {
nilalaman: ['./index.html'],
mga plugin: [
plugin(function({ addUtilities }) {
addUtilities({
'.content-auto': {
'content-visibility': 'auto',
},
'.content-hidden': {
'content-visibility': 'hidden',
},
'.bg-coral': {
background: 'coral'
},
'.skew-5deg': {
transform: 'skewY(-5deg)',
},
})
})
]
};
dito:
- Ang ' addUtilities() Ang function na ” ay nagrerehistro ng mga pasadyang static na utility sa pamamagitan ng pagbibigay ng isang bagay na naglalaman ng mga klase ng utility at ang kanilang mga kaukulang istilo.
- Ang ' .content-auto Itinatakda ng klase ng utility ang content-visibility property sa auto.
- Ang ' .nakatagong nilalaman Itinatakda ng klase ng utility ang content-visibility property sa hidden.
- Ang ' .bg-coral ” Itinatakda ng klase ng utility ang kulay ng coral sa background.
- Ang ' .skew-5deg ” Itinatakda ng klase ng utility ang transform property sa skewY(-5deg).
Hakbang 2: Gamitin ang Static Utilities sa HTML Program
Ngayon, gamitin ang ninanais na mga static na utility sa HTML program:
< div klase = 'h-screen bg-coral' >
< p klase = 'content-auto' >Kumusta< / p >
< p klase = 'nakatago ang nilalaman' >Welcome Dito< / p >
< p klase = 'skew-5deg' >Transform Text< / p >
< / div >
< / katawan >
Hakbang 3: I-verify ang Output
Panghuli, patakbuhin ang HTML program upang matiyak na gumagana nang maayos ang mga static na utility:
Ang output sa itaas ay nagpapahiwatig na ang mga static na utility ay gumagana nang maayos ayon sa kung saan sila ay tinukoy.
Konklusyon
Upang magamit ang mga static na utility sa Tailwind, kinakailangan na gamitin ang ' addUtilities() ” function sa “tailwind.config.js” na file at i-configure ang gustong mga static na utility. Ang function na 'addUtilities()' at magdagdag ng mga utility class na maaaring direktang ilapat sa HTML program. Ipinaliwanag ng artikulong ito ang paraan ng paggamit ng mga static na utility sa Tailwind CSS.