Tento zápis ilustruje metodu stylování nadpisů přidáním základního stylu do Tailwindu.
Jak stylizovat nadpisy pomocí základního stylu Tailwind?
Chcete-li stylovat nadpisy v Tailwindu, podívejte se na uvedené kroky:
- Otevřete soubor CSS projektu.
- V souboru CSS přidejte základní styl do nadpisů pomocí „ @vrstva “ směrnice pod “ @základna zadního větru; “směrnice.
- Vytvořte HTML program a použijte v něm prvky nadpisu.
- Spusťte program HTML a ověřte výstup.
Krok 1: Přidejte základní styl do nadpisů v souboru CSS
Nejprve otevřete „ styl.css “ a přidejte základní styl k nadpisům v něm pomocí „ @vrstva “směrnice. Základní styl jsme například přidali do následujících nadpisů:
@tailwind základna ;
@vrstva základna {
h1 {
@aplikovat text-6xl ;
}
h2 {
@aplikovat text-5xl ;
}
h3 {
@aplikovat text-4xl ;
}
h4 {
@aplikovat text-3xl ;
}
h5 {
@aplikovat text-2xl ;
}
}
@tailwind komponenty ;
@tailwind utility ;
Tady:
- “ @základ vrstvy { … } ” definuje novou základní vrstvu a obsahuje styly pro komponenty nadpisů.
- “ h1 { @použít text-6xl; } “ platí „ text-6xl „užitná třída do „ h1 ' Prvky.
- Podobně, “ h2 “, “ h3 “, “ h4 ', a ' h5 “prvky mají velikost písma nastavenou pomocí “ @aplikovat ” a příslušné pomocné třídy (text-5xl, text-4xl, text-3xl a text-2xl).
Krok 2: Vytvořte HTML webovou stránku pomocí nadpisů
Poté vytvořte HTML program a použijte v něm prvky nadpisu. Zde jsme použili následující prvky nadpisu:
< tělo >
< div třída = 'h-screen justify-center text-center bg-violet-400' >
< h1 > Nadpis 1 < / h1 >
< h2 > Nadpis 2 < / h2 >
< h3 > Nadpis 3 < / h3 >
< h4 > Nadpis 4 < / h4 >
< h5 > Nadpis 5 < / h5 >
< / div >
< / tělo >
Krok 3: Spusťte program HTML
Nakonec spusťte program HTML a zobrazte webovou stránku pro ověření:
Výše uvedený výstup zobrazil nadpisy tak, jak byly styly v souboru CSS.
Závěr
Chcete-li stylovat nadpisy v Tailwindu, otevřete soubor CSS a přidejte základní styl do nadpisů pomocí „ @vrstva “ směrnice pod “ @základna zadního větru; “směrnice. Poté vytvořte HTML program a použijte v něm prvky nadpisu. Nakonec si prohlédněte webovou stránku HTML a ověřte výstup. Tento zápis vysvětluje metodu stylování nadpisů přidáním základního stylu do Tailwindu.