Ta objava ponazarja vse možne vidike dodajanja »osnovnih slogov« v Tailwind CSS.
Kako dodati 'osnovne' sloge v Tailwind?
»Tailwind CSS« ima naslednje tri metode za dodajanje »osnovnih« slogov v celotno vsebino HTML ali v določen element:
- Uporabite »CSS« za dodajanje osnovnih slogov v Tailwind.
- Uporabite »Plugin« za dodajanje osnovnih slogov v Tailwind.
Raziščimo jih enega za drugim.
Predpogoji
Preden preidete na praktično izvedbo, si najprej oglejte novo ustvarjeni projekt z imenom »Linuxhint«, ki se uporablja za dodajanje »osnovnih slogov«:
Struktura projektne datoteke
Zdaj se pomaknite do datoteke »index.html« in si oglejte njeno kodo HTML:
< html >< glavo >
< povezava href = '/dist/output.css' rel = 'stylesheet' >
< / glavo >
< telo >
< h2 razred = 'podčrtano besedilo-center font-krepko besedilo-roza-600' > Dobrodošli v Linuxhintu! < / h2 >< št >
< h3 razred = 'text-center font-bold text–orange-600' > Vadnica: Dodajanje osnovnih slogov v Tailwind. < / h3 >< št >
< / telo >
V zgornjih vrsticah kode:
Izhod
Izhod zgornje kode je prikazan tukaj:
Zdaj uporabite opisano metodo za prilagoditev zgornje kode HTML z dodajanjem osnovnih slogov. Začnimo z metodo »CSS« Tailwind.
1. način: uporabite CSS za dodajanje »osnovnih slogov« v Tailwind
Najenostavnejša in najlažja metoda za dodajanje osnovnega sloga določenemu elementu HTML je, da jih dodate v glavno datoteko CSS projekta. Opravimo to nalogo praktično tako, da sledimo podanim korakom.
1. korak: Odprite datoteko CSS
Najprej odprite glavno datoteko CSS, tj. style.css «, ki vsebuje vgrajene plasti »osnove«, »komponente« in »pripomočkov« za hrbtni veter:
2. korak: Dodajte CSS
Nato dodajte »osnovni« slog za posebne elemente HTML »
« in »«, tako da uporabite razrede z uporabo » @prijavi ' v sloju 'base' s pomočjo ' @plast ” ključna beseda. Ključne besede »@layer« dodajo definirane razrede na podano »osnovno« plast: @layer base {
h2 {
@uporabi besedilo-3xl;
}
h3 {
@uporabi besedilo-xl;
}
}
h2 {
@uporabi besedilo-3xl;
}
h3 {
@uporabi besedilo-xl;
}
}
V zgornjih vrsticah kode je » Velikost pisave ” je uporabljen za elemente “
” in “”, da jih povečate na določeno velikost:
Shranite (Ctrl + S) datoteko.
3. korak: Izhod
Zdaj zaženite kodo v strežniku v živo in si oglejte izhod, kot sledi:
Tukaj izhod kaže, da je razred Tailwind »Velikost pisave« uspešno uporabljen za navedeni element v osnovni plasti.
Opomba : Enak pristop se uporablja za vse druge razrede CSS Tailwind.
2. način: uporabite vtičnik za dodajanje »osnovnih slogov« v Tailwind
Druga uporabna metoda za dodajanje »osnovnih« slogov je pisanje » vključiti « in uporabite » addBase() ”. Ta funkcija pomaga registrirati nove razrede v ' osnova ” slojna direktiva. Ta funkcija se uporablja v datoteki Tailwind »tailwind.config.js«. Naredimo to praktično.
1. korak: Definirajte funkcijo »addBase()«.
Najprej se pomaknite do » tailwind.config.js « in dodajte osnovne sloge iz vtičnika ter pokličite funkcijo »addBase()«:
Shranite datoteko.
2. korak: Izhod
Na koncu zaženite dano kodo HTML in si oglejte rezultat:
Kot je razvidno, je razred Tailwind »Velikost pisave«, definiran v funkciji »addBase()« kot objekt JavaScript, uporabljen za navedene elemente HTML.
Zaključek
Osnovne sloge hrbtnega vetra je mogoče preprosto dodati z uporabo ' CSS ' v glavni datoteki CSS in ' Vključiti ' z ' addBase() ” v konfiguracijski datoteki. Metoda 'CSS' velja za najpreprostejšo metodo, saj definira le osnovne sloge v 'osnovni' plasti in jih samodejno implementira na določen element. Po drugi strani pa razdelek »plugin« razdelka » tailwind.config.js ” zahteva funkcijo “addBase()” za definiranje osnovnih slogov kot objektov JavaScript. Ta objava je ponazorila vse možne vidike dodajanja osnovnih slogov v Tailwind CSS.