Ang post na ito ay naglalarawan ng lahat ng posibleng aspeto upang magdagdag ng “base style” sa Tailwind CSS.
Paano Magdagdag ng Mga Estilo ng 'base' sa Tailwind?
Ang 'Tailwind CSS' ay kasama ng sumusunod na tatlong paraan upang idagdag ang 'base' na mga estilo sa buong HTML na nilalaman o sa isang partikular na elemento:
- Gamitin ang 'CSS' upang Magdagdag ng mga base na istilo sa Tailwind.
- Gamitin ang “Plugin” para Magdagdag ng mga baseng istilo sa Tailwind.
Tuklasin natin sila isa-isa.
Mga kinakailangan
Bago lumipat sa praktikal na pagpapatupad, tingnan muna ang bagong likhang proyekto na pinangalanang 'Linuxhint' na ginagamit para sa pagdaragdag ng 'mga base na istilo':
Istruktura ng File ng Proyekto
Ngayon, mag-navigate sa “index.html” file at tingnan ang HTML code nito:
< html >< ulo >
< link href = '/dist/output.css' rel = 'stylesheet' >
< / ulo >
< katawan >
< h2 klase = 'salungguhitan ang text-center font-bold text-pink-600' > Maligayang pagdating sa Linuxhint! < / h2 >< br >
< h3 klase = 'text-center font-bold text–orange-600' > Tutorial: Pagdaragdag ng mga base na istilo sa Tailwind. < / h3 >< br >
< / katawan >
Sa mga linya ng code sa itaas:
Output
Ang output ng code sa itaas ay ipinapakita dito:
Ngayon, gamitin ang tinalakay na paraan upang i-customize ang HTML code sa itaas sa pamamagitan ng pagdaragdag ng mga base style. Magsimula tayo sa pamamaraang 'CSS' ng Tailwind.
Paraan 1: Gumamit ng CSS upang Magdagdag ng 'mga base na istilo' sa Tailwind
Ang pinakasimpleng at pinakamadaling paraan upang magdagdag ng base style sa partikular na elemento ng HTML ay ang idagdag ang mga ito sa pangunahing CSS file ng proyekto. Gawin natin ang gawaing ito nang praktikal sa pamamagitan ng pagsunod sa mga ibinigay na hakbang.
Hakbang 1: Buksan ang CSS File
Una, buksan ang pangunahing CSS file ibig sabihin, ' style.css ” na naglalaman ng built-in na tailwind na 'base', 'mga bahagi', at ang mga layer ng 'utility':
Hakbang 2: Idagdag ang CSS
Susunod, idagdag ang istilong “base” para sa partikular na “
” at “” na elemento ng HTML sa pamamagitan ng paglalapat ng mga klase gamit ang “ @mag-apply ” direktiba sa layer na “base” sa tulong ng “ @layer ” keyword. Ang mga keyword na '@layer' ay nagdaragdag ng mga tinukoy na klase sa tinukoy na 'base' na layer: @layer base {
h2 {
@apply text-3xl;
}
h3 {
@apply text-xl;
}
}
h2 {
@apply text-3xl;
}
h3 {
@apply text-xl;
}
}
Sa mga linya ng code sa itaas, ang ' Laki ng Font Ang klase ng ” ay inilapat sa “
” at sa “” na mga elemento upang palakihin ang mga ito hanggang sa tinukoy na laki, ayon sa pagkakabanggit:
I-save (Ctrl + S) ang file.
Hakbang 3: Output
Ngayon, patakbuhin ang code sa live na server at tingnan ang output, tulad ng sumusunod:
Dito, ipinapakita ng output na ang klase ng Tailwind na 'Laki ng Font' ay matagumpay na nailapat sa tinukoy na elemento sa base layer.
Tandaan : Ang parehong diskarte ay ginagamit para sa lahat ng iba pang mga klase ng Tailwind CSS.
Paraan 2: Gamitin ang Plugin para Magdagdag ng 'mga base na istilo' sa Tailwind
Ang isa pang kapaki-pakinabang na paraan upang magdagdag ng mga istilong 'base' ay ang pagsulat ng ' isaksak 'at gamitin ang' addBase() ” function. Ang function na ito ay tumutulong upang magrehistro ng mga bagong klase sa ' base ” direktiba ng layer. Ginagamit ang function na ito sa Tailwind “tailwind.config.js” file. Gawin natin ito nang praktikal.
Hakbang 1: Tukuyin ang 'addBase()' Function
Una, mag-navigate sa ' tailwind.config.js ” configuration file at idagdag ang mga base na istilo mula sa plugin at tawagan ang function na “addBase()”:
I-save ang file.
Hakbang 2: Output
Panghuli, patakbuhin ang ibinigay na HTML code at tingnan ang output:
Gaya ng nakikita, ang klase ng Tailwind na 'Laki ng Font' na tinukoy sa function na 'addBase()' bilang object ng JavaScript ay inilalapat sa mga tinukoy na elemento ng HTML.
Konklusyon
Ang Tailwind Base Styles ay madaling maidagdag gamit ang ' CSS ” mga klase sa pangunahing CSS file at ang “ Isaksak ' kasama ang ' addBase() ” function sa configuration file. Ang pamamaraang 'CSS' ay itinuturing na pinakasimpleng paraan dahil tinutukoy lamang nito ang mga base na istilo sa layer na 'base' at awtomatikong ipinapatupad ang mga ito sa tinukoy na elemento. Sa kabilang banda, ang seksyong 'plugin' ng ' tailwind.config.js ” file ay nangangailangan ng function na “addBase()” upang tukuyin ang mga base style bilang mga object ng JavaScript. Inilarawan ng post na ito ang lahat ng posibleng aspeto para magdagdag ng mga base style sa Tailwind CSS.