Tento zápis ilustruje spôsob úpravy nadpisov pridaním základného štýlu v Tailwinde.
Ako upraviť štýl nadpisov pomocou základného štýlu Tailwind?
Ak chcete upraviť nadpisy v Tailwinde, pozrite si uvedené kroky:
- Otvorte súbor CSS projektu.
- V súbore CSS pridajte základný štýl do nadpisov pomocou „ @vrstva “ smernicu podľa “ @základňa zadného vetra; “.
- Vytvorte HTML program a použite v ňom prvky nadpisov.
- Spustite program HTML a skontrolujte výstup.
Krok 1: Pridajte základný štýl do nadpisov v súbore CSS
Najprv otvorte „ style.css “ a pridajte základný štýl k nadpisom v ňom pomocou „ @vrstva “. Základný štýl sme napríklad pridali do nasledujúcich nadpisov:
@tailwind základňu ;
@vrstva základňu {
h1 {
@použiť text-6xl ;
}
h2 {
@použiť text-5xl ;
}
h3 {
@použiť text-4xl ;
}
h4 {
@použiť text-3xl ;
}
h5 {
@použiť text-2xl ;
}
}
@tailwind komponentov ;
@tailwind komunálne služby ;
Tu:
- “ @základ vrstvy { … } ” definuje novú základnú vrstvu a obsahuje štýly pre komponenty nadpisov.
- “ h1 { @použiť text-6xl; } “ platí „ text-6xl 'úžitková trieda do ' h1 “prvky.
- Podobne, “ h2 “, “ h3 “, “ h4 “ a „ h5 “prvky majú veľkosť písma nastavenú pomocou “ @použiť ” a príslušné pomocné triedy (text-5xl, text-4xl, text-3xl a text-2xl).
Krok 2: Vytvorte webovú stránku HTML pomocou nadpisov
Potom vytvorte program HTML a použite v ňom prvky nadpisu. Tu sme použili nasledujúce prvky nadpisu:
< telo >
< div trieda = '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 >
< / telo >
Krok 3: Spustite program HTML
Nakoniec spustite program HTML a zobrazte webovú stránku na overenie:
Vyššie uvedený výstup zobrazuje nadpisy tak, ako to boli štýly v súbore CSS.
Záver
Ak chcete upraviť štýl nadpisov v Tailwinde, otvorte súbor CSS a pridajte základný štýl do nadpisov pomocou „ @vrstva “ smernicu podľa “ @základňa zadného vetra; “. Potom vytvorte HTML program a použite v ňom prvky nadpisov. Nakoniec si pozrite webovú stránku HTML a overte výstup. Tento zápis vysvetlil metódu štýlu nadpisov pridaním základného štýlu v Tailwinde.