Ovaj post ilustrira sve moguće aspekte dodavanja 'osnovnih stilova' u Tailwind CSS.
Kako dodati 'osnovne' stilove u Tailwind?
“Tailwind CSS” dolazi sa sljedeće tri metode za dodavanje “osnovnih” stilova u cijeli HTML sadržaj ili u određeni element:
- Koristite “CSS” za dodavanje osnovnih stilova u Tailwind.
- Koristite “Plugin” za dodavanje osnovnih stilova u Tailwind.
Istražimo ih jednu po jednu.
Preduvjeti
Prije nego prijeđete na praktičnu implementaciju, prvo pogledajte novostvoreni projekt pod nazivom 'Linuxhint' koji se koristi za dodavanje 'osnovnih stilova':
Struktura datoteke projekta
Sada dođite do datoteke “index.html” i pogledajte njen HTML kod:
< html >< glava >
< veza href = '/dist/output.css' rel = 'list stilova' >
< / glava >
< tijelo >
< h2 razreda = 'underline text-center font-bold text-pink-600' > Dobrodošli u Linuxhint! < / h2 >< br >
< h3 razreda = 'text-center font-bold text–orange-600' > Vodič: Dodavanje osnovnih stilova u Tailwindu. < / h3 >< br >
< / tijelo >
U gornjim linijama koda:
Izlaz
Izlaz gornjeg koda prikazan je ovdje:
Sada upotrijebite opisanu metodu za prilagodbu gornjeg HTML koda dodavanjem osnovnih stilova. Počnimo s metodom Tailwind 'CSS'.
Metoda 1: Koristite CSS za dodavanje 'osnovnih stilova' u Tailwind
Najjednostavniji i najlakši način dodavanja osnovnog stila određenom HTML elementu je dodavanje u glavnu CSS datoteku projekta. Izvršimo ovaj zadatak praktično slijedeći dane korake.
Korak 1: Otvorite CSS datoteku
Prvo otvorite glavnu CSS datoteku, tj. ' stil.css ” koji sadrži ugrađene slojeve “baze”, “komponenti” i “pomoćnih programa” za stražnji vjetar:
Korak 2: Dodajte CSS
Zatim dodajte “osnovni” stil za određene HTML elemente “
” i “” primjenom klasa pomoću “ @primijeniti ' u 'osnovnom' sloju uz pomoć ' @sloj ” ključna riječ. Ključne riječi “@layer” dodaju definirane klase na navedeni “bazni” sloj: @slojna baza {
h2 {
@primijeni tekst-3xl;
}
h3 {
@primijeni tekst-xl;
}
}
h2 {
@primijeni tekst-3xl;
}
h3 {
@primijeni tekst-xl;
}
}
U gornjim redovima koda, ' Veličina fonta ” klasa se primjenjuje na elemente “
” i “” kako bi se povećali do određene veličine:
Spremite (Ctrl + S) datoteku.
Korak 3: Izlaz
Sada pokrenite kod na poslužitelju uživo i pogledajte izlaz, kako slijedi:
Ovdje izlaz pokazuje da je klasa Tailwind “Veličina fonta” uspješno primijenjena na navedeni element u osnovnom sloju.
Bilješka : Isti se pristup koristi za sve ostale Tailwind CSS klase.
Metoda 2: Koristite dodatak za dodavanje 'osnovnih stilova' u Tailwind
Druga korisna metoda za dodavanje 'osnovnih' stilova je pisanje ' uključiti ' i koristite ' addBase() ” funkcija. Ova funkcija pomaže registrirati nove razrede u ' baza ” direktiva sloja. Ova se funkcija koristi u datoteci Tailwind 'tailwind.config.js'. Učinimo to praktično.
Korak 1: Definirajte funkciju 'addBase()'.
Prvo idite na ' tailwind.config.js ” konfiguracijsku datoteku i dodajte osnovne stilove iz dodatka i pozovite funkciju “addBase()”:
Spremite datoteku.
Korak 2: Izlaz
Na kraju, pokrenite dani HTML kod i pogledajte izlaz:
Kao što se vidi, klasa Tailwind “Veličina fonta” definirana u funkciji “addBase()” kao JavaScript objekt primjenjuje se na navedene HTML elemente.
Zaključak
Osnovni stilovi stražnjeg vjetra mogu se jednostavno dodati pomoću ' CSS ' klase u glavnoj CSS datoteci i ' Uključiti ' s ' addBase() ” u konfiguracijskoj datoteci. Metoda 'CSS' smatra se najjednostavnijom metodom jer samo definira osnovne stilove u sloju 'osnova' i automatski ih implementira na navedeni element. S druge strane, odjeljak 'plugin' odjeljka ' tailwind.config.js ” zahtijeva funkciju “addBase()” za definiranje osnovnih stilova kao JavaScript objekata. Ovaj post ilustrirao je sve moguće aspekte dodavanja osnovnih stilova u Tailwind CSS.