Tento príspevok ilustruje všetky možné aspekty pridania „základných štýlov“ v CSS Tailwind.
Ako pridať „základné“ štýly v Tailwinde?
„Tailwind CSS“ sa dodáva s nasledujúcimi tromi metódami na pridanie „základných“ štýlov do celého obsahu HTML alebo do konkrétneho prvku:
- Použite CSS na pridanie základných štýlov v Tailwinde.
- Na pridanie základných štýlov v Tailwinde použite doplnok.
Preskúmajme ich jeden po druhom.
Predpoklady
Predtým, ako prejdete k praktickej implementácii, najprv sa pozrite na novovytvorený projekt s názvom „Linuxhint“, ktorý sa používa na pridávanie „základných štýlov“:
Štruktúra súboru projektu
Teraz prejdite do súboru „index.html“ a pozrite sa na jeho HTML kód:
< html >< hlavu >
< odkaz href = '/dist/output.css' rel = 'štýlov' >
< / hlavu >
< telo >
< h2 trieda = 'podčiarknuť text-stred písmo-tučný text-ružový-600' > Vitajte v Linuxhint! < / h2 < br >
< h3 trieda = 'text-center font-bold text-oranžová-600' > Návod: Pridávanie základných štýlov v Tailwinde. < / h3 < br >
< / telo >
Vo vyššie uvedených riadkoch kódu:
Výkon
Výstup vyššie uvedeného kódu je zobrazený tu:
Teraz použite diskutovanú metódu na prispôsobenie vyššie uvedeného kódu HTML pridaním základných štýlov. Začnime metódou Tailwind „CSS“.
Metóda 1: Použite CSS na pridanie „základných štýlov“ v Tailwinde
Najjednoduchším a najjednoduchším spôsobom, ako pridať základný štýl do konkrétneho prvku HTML, je pridať ho do hlavného súboru CSS projektu. Vykonajte túto úlohu prakticky podľa uvedených krokov.
Krok 1: Otvorte súbor CSS
Najprv otvorte hlavný súbor CSS, napr. style.css “, ktorý obsahuje zabudovanú „základňu“, „komponenty“ a „utilitné“ vrstvy zadného vetra:
Krok 2: Pridajte CSS
Potom pridajte štýl „base“ pre konkrétne prvky HTML „
“ a „“ použitím tried pomocou „ @použiť ” v základnej vrstve pomocou príkazu “ @vrstva kľúčové slovo. Kľúčové slová „@vrstva“ pridávajú definované triedy na špecifikovanú „základnú“ vrstvu: @vrstvový základ {
h2 {
@použiť text-3xl;
}
h3 {
@použiť text-xl;
}
}
h2 {
@použiť text-3xl;
}
h3 {
@použiť text-xl;
}
}
Vo vyššie uvedených riadkoch kódu je „ Veľkosť písma Trieda ” sa použije na prvky „
“ a „“, aby sa zväčšili na špecifikovanú veľkosť:
Uložte (Ctrl + S) súbor.
Krok 3: Výstup
Teraz spustite kód na živom serveri a pozrite si výstup takto:
Tu výstup ukazuje, že trieda Tailwind „Veľkosť písma“ bola úspešne aplikovaná na určený prvok v základnej vrstve.
Poznámka : Rovnaký prístup sa používa pre všetky ostatné triedy CSS Tailwind.
Metóda 2: Použite doplnok na pridanie „základných štýlov“ v Tailwinde
Ďalšou užitočnou metódou na pridanie „základných“ štýlov je napísanie „ zapojiť “ a použite „ addBase() “. Táto funkcia pomáha registrovať nové triedy v „ základňu Smernica vrstvy. Táto funkcia sa používa v súbore Tailwind „tailwind.config.js“. Urobme to prakticky.
Krok 1: Definujte funkciu „addBase()“.
Najprv prejdite na „ tailwind.config.js ” konfiguračný súbor a pridajte základné štýly z doplnku a zavolajte funkciu “addBase()”:
Uložte súbor.
Krok 2: Výstup
Nakoniec spustite daný HTML kód a pozrite si výstup:
Ako vidíte, trieda Tailwind „Veľkosť písma“ definovaná vo funkcii „addBase()“ ako objekt JavaScript sa použije na špecifikované prvky HTML.
Záver
Štýly základne Tailwind možno jednoducho pridať pomocou „ CSS “ triedy v hlavnom súbore CSS a „ Zapojiť “ s „ addBase() ” v konfiguračnom súbore. Metóda „CSS“ sa považuje za najjednoduchšiu metódu, pretože definuje iba základné štýly v „základnej“ vrstve a automaticky ich implementuje na určený prvok. Na druhej strane časť „doplnok“ v časti „ tailwind.config.js ” vyžaduje funkciu “addBase()” na definovanie základných štýlov ako objektov JavaScriptu. Tento príspevok ilustroval všetky možné aspekty pridávania základných štýlov do Tailwind CSS.