Šī ziņa ilustrē visus iespējamos aspektus, lai pievienotu “bāzes stilus” Tailwind CSS.
Kā pievienot “pamata” stilus programmā Tailwind?
“Tailwind CSS” ir pieejams ar šādām trim metodēm, lai pievienotu “bāzes” stilus visam HTML saturam vai konkrētam elementam:
- Izmantojiet “CSS”, lai pievienotu bāzes stilus programmā Tailwind.
- Izmantojiet “Plugin”, lai pievienotu bāzes stilus programmā Tailwind.
Izpētīsim tos pa vienam.
Priekšnoteikumi
Pirms pāriet uz praktisko ieviešanu, vispirms apskatiet jaunizveidoto projektu ar nosaukumu “Linuxhint”, kas tiek izmantots “bāzes stilu” pievienošanai:
Projekta faila struktūra
Tagad pārejiet uz failu “index.html” un apskatiet tā HTML kodu:
< html >< galvu >
< saite href = '/dist/output.css' rel = 'stila lapa' >
< / galvu >
< ķermeni >
< h2 klasē = 'pasvītrot teksta centra fontu-treknrakstā tekstu-rozā-600' > Laipni lūdzam Linuxhint! < / h2 >< br >
< h3 klasē = 'text-center font-bold text-orange-600' > Apmācība: bāzes stilu pievienošana programmā Tailwind. < / h3 >< br >
< / ķermeni >
Iepriekš minētajās koda rindās:
Izvade
Iepriekš minētā koda izvade ir parādīta šeit:
Tagad izmantojiet apspriesto metodi, lai pielāgotu iepriekš minēto HTML kodu, pievienojot bāzes stilus. Sāksim ar Tailwind “CSS” metodi.
1. metode: izmantojiet CSS, lai programmā Tailwind pievienotu “bāzes stilus”.
Vienkāršākā un vienkāršākā metode bāzes stila pievienošanai konkrētajam HTML elementam ir pievienot tos projekta galvenajā CSS failā. Veiksim šo uzdevumu praktiski, izpildot norādītās darbības.
1. darbība: atveriet CSS failu
Vispirms atveriet galveno CSS failu, t.i., ' stils.css ”, kas satur iebūvēto aizvēja “bāzi”, “komponentus” un “utilītu” slāņus:
2. darbība. Pievienojiet CSS
Pēc tam pievienojiet “bāzes” stilu konkrētajiem “
” un “” HTML elementiem, piemērojot klases, izmantojot “ @piesakies ” direktīvu “bāzes” slānī, izmantojot “ @slānis ” atslēgvārds. Atslēgvārdi “@layer” pievieno definētās klases norādītajā “bāzes” slānī: @slāņa bāze {
h2 {
@piemērot tekstu-3xl;
}
h3 {
@piemērot tekstu-xl;
}
}
h2 {
@piemērot tekstu-3xl;
}
h3 {
@piemērot tekstu-xl;
}
}
Iepriekš minētajās koda rindās ' Fonta izmērs ” klase tiek piemērota elementiem “
” un “”, lai tos attiecīgi palielinātu līdz norādītajam izmēram:
Saglabājiet failu (Ctrl + S).
3. darbība: izvade
Tagad palaidiet kodu tiešraides serverī un skatiet izvadi šādi:
Šeit izvade parāda, ka Tailwind “Fonta lieluma” klase ir veiksmīgi piemērota norādītajam elementam pamata slānī.
Piezīme : tā pati pieeja tiek izmantota visām pārējām Tailwind CSS klasēm.
2. metode: izmantojiet spraudni, lai programmā Tailwind pievienotu “pamata stilus”.
Vēl viena noderīga metode “bāzes” stilu pievienošanai ir uzrakstīt “ iespraust ” un izmantojiet „ addBase() ” funkcija. Šī funkcija palīdz reģistrēt jaunas klases ' bāze ” slāņa direktīva. Šī funkcija tiek izmantota Tailwind failā “tailwind.config.js”. Darīsim to praktiski.
1. darbība: definējiet funkciju “addBase()”.
Vispirms dodieties uz ' tailwind.config.js ” konfigurācijas failu un pievienojiet bāzes stilus no spraudņa un izsauciet funkciju “addBase()”:
Saglabājiet failu.
2. darbība: izvade
Visbeidzot, palaidiet norādīto HTML kodu un skatiet izvadi:
Kā redzams, norādītajiem HTML elementiem tiek lietota klase Tailwind “Fonta lielums”, kas definēta funkcijā “addBase()” kā JavaScript objekts.
Secinājums
Tailwind bāzes stilus var viegli pievienot, izmantojot “ CSS ' klases galvenajā CSS failā un ' Iespraust ' Ar ' addBase() ” funkciju konfigurācijas failā. “CSS” metode tiek uzskatīta par vienkāršāko metodi, jo tā definē tikai bāzes stilus “bāzes” slānī un automātiski ievieš tos norādītajā elementā. No otras puses, sadaļas “spraudnis” tailwind.config.js ” failam ir nepieciešama funkcija “addBase()”, lai bāzes stilus definētu kā JavaScript objektus. Šī ziņa ilustrē visus iespējamos aspektus, lai pievienotu bāzes stilus Tailwind CSS.