Tento příspěvek ilustruje všechny možné aspekty přidání „základních stylů“ do CSS Tailwind.
Jak přidat „základní“ styly v Tailwindu?
„Tailwind CSS“ přichází s následujícími třemi metodami, jak přidat „základní“ styly do celého obsahu HTML nebo do konkrétního prvku:
- Pomocí CSS přidejte základní styly do Tailwindu.
- Pomocí Pluginu přidejte základní styly do Tailwindu.
Pojďme je prozkoumat jeden po druhém.
Předpoklady
Než přejdete k praktické implementaci, nejprve se podívejte na nově vytvořený projekt s názvem „Linuxhint“, který se používá pro přidávání „základních stylů“:
Struktura souboru projektu
Nyní přejděte do souboru „index.html“ a podívejte se na jeho HTML kód:
< html >< hlava >
< odkaz href = '/dist/output.css' rel = 'stylesheet' >
< / hlava >
< tělo >
< h2 třída = 'podtržený text-střed písmo-tučný text-růžová-600' > Vítejte v Linuxhintu! < / h2 < br >
< h3 třída = 'text-center font-bold text-oranžová-600' > Kurz: Přidání základních stylů v Tailwindu. < / h3 < br >
< / tělo >
Ve výše uvedených řádcích kódu:
Výstup
Výstup výše uvedeného kódu je zobrazen zde:
Nyní použijte diskutovanou metodu k přizpůsobení výše uvedeného kódu HTML přidáním základních stylů. Začněme metodou Tailwind „CSS“.
Metoda 1: Použijte CSS k přidání „základních stylů“ v Tailwindu
Nejjednodušší a nejjednodušší metodou, jak přidat základní styl ke konkrétnímu prvku HTML, je přidat je do hlavního souboru CSS projektu. Proveďme tento úkol prakticky podle uvedených kroků.
Krok 1: Otevřete soubor CSS
Nejprve otevřete hlavní soubor CSS, tj. styl.css “, který obsahuje vestavěné vrstvy „základna“, „komponenty“ a „utility“ zadního větru:
Krok 2: Přidejte CSS
Dále přidejte styl „base“ pro konkrétní prvky HTML „
“ a „“ použitím tříd pomocí „ @aplikovat ” direktiva v „základní“ vrstvě pomocí „ @vrstva “. Klíčová slova „@layer“ přidávají definované třídy na zadanou „základní“ vrstvu: @vrstvový základ {
h2 {
@použít text-3xl;
}
h3 {
@použít text-xl;
}
}
h2 {
@použít text-3xl;
}
h3 {
@použít text-xl;
}
}
Ve výše uvedených řádcích kódu je „ Velikost písma Třída ” se použije na prvky „
“ a „“ a zvětší je na zadanou velikost, v tomto pořadí:
Uložte (Ctrl + S) soubor.
Krok 3: Výstup
Nyní spusťte kód na živém serveru a podívejte se na výstup následovně:
Zde výstup ukazuje, že třída Tailwind „Velikost písma“ byla úspěšně aplikována na zadaný prvek v základní vrstvě.
Poznámka : Stejný přístup se používá pro všechny ostatní třídy CSS Tailwind.
Metoda 2: Pomocí pluginu přidejte „základní styly“ v Tailwindu
Další užitečnou metodou, jak přidat „základní“ styly, je napsat „ zapojit “ a použijte „ addBase() funkce “. Tato funkce pomáhá registrovat nové třídy v „ základna direktiva vrstvy. Tato funkce se používá v souboru Tailwind „tailwind.config.js“. Udělejme to prakticky.
Krok 1: Definujte funkci „addBase()“.
Nejprve přejděte na „ tailwind.config.js ” a přidejte základní styly z pluginu a zavolejte funkci “addBase()”:
Uložte soubor.
Krok 2: Výstup
Nakonec spusťte daný HTML kód a podívejte se na výstup:
Jak je vidět, třída Tailwind „Velikost písma“ definovaná ve funkci „addBase()“ jako objekt JavaScript se použije na zadané prvky HTML.
Závěr
Styly základny Tailwind lze snadno přidat pomocí „ CSS třídy v hlavním souboru CSS a Zapojit “ s „ addBase() ” v konfiguračním souboru. Metoda „CSS“ je považována za nejjednodušší metodu, protože definuje pouze základní styly v „základní“ vrstvě a automaticky je implementuje na zadaný prvek. Na druhou stranu sekce „plugin“ v „ tailwind.config.js ” vyžaduje funkci “addBase()” k definování základních stylů jako objektů JavaScriptu. Tento příspěvek ilustroval všechny možné aspekty přidání základních stylů do Tailwind CSS.