Šiame rašte bus iliustruotas stiliaus antraščių metodas, pridedant pagrindinį stilių „Tailwind“.
Kaip sukurti antraštes naudojant pagrindinio stiliaus tailwind?
Norėdami sukurti antraštes „Tailwind“, peržiūrėkite pateiktus veiksmus:
- Atidarykite projekto CSS failą.
- CSS faile pridėkite pagrindinį stilių prie antraščių naudodami „ @sluoksnis “ direktyvą pagal „ @tailwind bazė; “ direktyvą.
- Sukurkite HTML programą ir naudokite joje antraštės elementus.
- Paleiskite HTML programą ir patikrinkite išvestį.
1 veiksmas: pridėkite pagrindinį stilių prie CSS failo antraščių
Pirmiausia atidarykite „ stilius.css “ failą ir pridėkite pagrindinį stilių prie jame esančių antraščių naudodami „ @sluoksnis “ direktyvą. Pavyzdžiui, pagrindinį stilių įtraukėme į šias antraštes:
@tailwind bazė ;
@sluoksnis bazė {
h1 {
@taikyti tekstas-6xl ;
}
h2 {
@taikyti tekstas-5xl ;
}
h3 {
@taikyti tekstas-4xl ;
}
h4 {
@taikyti tekstas-3xl ;
}
h5 {
@taikyti tekstas-2xl ;
}
}
@tailwind komponentai ;
@tailwind Komunalinės paslaugos ;
Čia:
- “ @sluoksnio bazė { … } “ apibrėžia naują pagrindinį sluoksnį ir apima antraštės komponentų stilius.
- “ h1 { @taikyti tekstą-6xl; } “ taiko „ tekstas-6xl „naudingumo klasė“ į „ h1 “ elementai.
- Panašiai „ h2 “, „ h3 “, „ h4 “ ir „ h5 ' elementų šrifto dydžiai nustatomi naudojant ' @taikyti “ ir atitinkamas naudingumo klases (text-5xl, text-4xl, text-3xl ir text-2xl).
2 veiksmas: sukurkite HTML tinklalapį naudodami antraštes
Tada sukurkite HTML programą ir naudokite joje esančius antraštės elementus. Čia panaudojome šiuos antraštės elementus:
< kūnas >
< div klasė = 'h-screen justify-center text-center bg-violet-400' >
< h1 > 1 antraštė < / h1 >
< h2 > 2 antraštė < / h2 >
< h3 > 3 antraštė < / h3 >
< h4 > 4 antraštė < / h4 >
< h5 > 5 antraštė < / h5 >
< / div >
< / kūnas >
3 veiksmas: paleiskite HTML programą
Galiausiai paleiskite HTML programą ir patikrinkite tinklalapį:
Aukščiau pateiktame išvestyje antraštės buvo pateiktos taip, kaip CSS failo stiliai.
Išvada
Norėdami stilizuoti antraštes „Tailwind“, atidarykite CSS failą ir pridėkite pagrindinį stilių prie antraštių naudodami „ @sluoksnis “ direktyvą pagal „ @tailwind bazė; “ direktyvą. Tada sukurkite HTML programą ir naudokite joje antraštės elementus. Galiausiai peržiūrėkite HTML tinklalapį, kad patikrintumėte išvestį. Šiame rašte paaiškintas stiliaus antraščių metodas, pridedant pagrindinį stilių „Tailwind“.