Den här texten kommer att illustrera metoden för att utforma rubriker genom att lägga till basstilen i Tailwind.
Hur stilar man rubriker med Base Style Tailwind?
För att utforma rubriker i Tailwind, kolla in de angivna stegen:
- Öppna projektets CSS-fil.
- I CSS-filen lägger du till basstilen till rubrikerna med hjälp av ' @lager ' direktiv enligt ' @medvindsbas; ' direktiv.
- Gör ett HTML-program och använd rubrikelement i det.
- Kör HTML-programmet och verifiera resultatet.
Steg 1: Lägg till basstil till rubriker i CSS-fil
Öppna först ' style.css '-filen och lägg till basstilen till rubrikerna i den med hjälp av ' @lager ' direktiv. Till exempel har vi lagt till basstilen till följande rubriker:
@medvind bas ;
@lager bas {
h1 {
@tillämpa text-6xl ;
}
h2 {
@tillämpa text-5xl ;
}
h3 {
@tillämpa text-4xl ;
}
h4 {
@tillämpa text-3xl ;
}
h5 {
@tillämpa text-2xl ;
}
}
@medvind komponenter ;
@medvind verktyg ;
Här:
- ' @lagerbas { … } ” definierar ett nytt baslager och innehåller stilarna för rubrikkomponenterna.
- ' h1 { @apply text-6xl; } ' tillämpar ' text-6xl ' nyttoklass till ' h1 ' element.
- På samma sätt, ' h2 ”, “ h3 ”, “ h4 ', och ' h5 '-element har sina teckenstorlekar inställda med ' @tillämpa ” och respektive verktygsklasser (text-5xl, text-4xl, text-3xl och text-2xl).
Steg 2: Skapa HTML-webbsida med hjälp av rubriker
Gör sedan HTML-programmet och använd rubrikelementen i det. Här har vi använt följande rubrikelement:
< kropp >
< div klass = 'h-screen justify-center text-center bg-violet-400' >
< h1 > Rubrik 1 < / h1 >
< h2 > Rubrik 2 < / h2 >
< h3 > Rubrik 3 < / h3 >
< h4 > Rubrik 4 < / h4 >
< h5 > Rubrik 5 < / h5 >
< / div >
< / kropp >
Steg 3: Kör HTML-programmet
Kör slutligen HTML-programmet och se webbsidan för verifiering:
Ovanstående utdata har visat rubrikerna som de var stilar i CSS-filen.
Slutsats
För att utforma rubriker i Tailwind, öppna CSS-filen och lägg till basstilen till rubrikerna med hjälp av ' @lager ' direktiv enligt ' @medvindsbas; ' direktiv. Gör sedan ett HTML-program och använd rubrikelement i det. Se slutligen HTML-webbsidan för att verifiera resultatet. Den här artikeln har förklarat metoden för att formatera rubriker genom att lägga till basstilen i Tailwind.