Ten opis zilustruje metodę stylizowania nagłówków przez dodanie stylu podstawowego w Tailwind.
Jak stylizować nagłówki za pomocą stylu podstawowego Tailwind?
Aby stylizować nagłówki w Tailwind, sprawdź podane kroki:
- Otwórz plik CSS projektu.
- W pliku CSS dodaj styl podstawowy do nagłówków, używając „ @warstwa ” dyrektywa w ramach „ @podstawa tylnego wiatru; dyrektywa.
- Stwórz program HTML i użyj w nim elementów nagłówka.
- Uruchom program HTML i sprawdź dane wyjściowe.
Krok 1: Dodaj styl podstawowy do nagłówków w pliku CSS
Najpierw otwórz „ styl.css ” i dodaj styl bazowy do zawartych w nim nagłówków za pomocą „ @warstwa dyrektywa. Na przykład dodaliśmy styl podstawowy do następujących nagłówków:
@tylny wiatr baza ;
@warstwa baza {
h1 {
@stosować tekst-6xl ;
}
h2 {
@stosować tekst-5xl ;
}
h3 {
@stosować tekst-4xl ;
}
h4 {
@stosować tekst-3xl ;
}
h5 {
@stosować tekst-2xl ;
}
}
@tylny wiatr składniki ;
@tylny wiatr media ;
Tutaj:
- “ @podstawa warstwy {…} ” definiuje nową warstwę bazową i zawiera style dla komponentów nagłówka.
- “ h1 { @zastosuj tekst-6xl; } ” stosuje się „ tekst-6xl „klasy użytkowej do” h1 ' elementy.
- Podobnie, ' h2 ”, „ h3 ”, „ h4 ', I ' h5 ” elementy mają ustawione rozmiary czcionek za pomocą „ @stosować ” i odpowiednie klasy użyteczności (text-5xl, text-4xl, text-3xl i text-2xl).
Krok 2: Utwórz stronę internetową HTML za pomocą nagłówków
Następnie utwórz program HTML i użyj w nim elementów nagłówka. Tutaj użyliśmy następujących elementów nagłówka:
< ciało >
< dz klasa = „h-screen justify-center text-center bg-violet-400” >
< h1 > Nagłówek 1 < / h1 >
< h2 > Nagłówek 2 < / h2 >
< h3 > Nagłówek 3 < / h3 >
< h4 > Nagłówek 4 < / h4 >
< h5 > Nagłówek 5 < / h5 >
< / dz >
< / ciało >
Krok 3: Uruchom program HTML
Na koniec uruchom program HTML i przejrzyj stronę internetową w celu weryfikacji:
Powyższe dane wyjściowe wyświetlają nagłówki tak, jak były stylami w pliku CSS.
Wniosek
Aby stylizować nagłówki w Tailwind, otwórz plik CSS i dodaj styl podstawowy do nagłówków za pomocą „ @warstwa ” dyrektywa w ramach „ @podstawa tylnego wiatru; dyrektywa. Następnie utwórz program HTML i użyj w nim elementów nagłówka. Na koniec wyświetl stronę internetową HTML, aby zweryfikować dane wyjściowe. W tym artykule wyjaśniono metodę stylizowania nagłówków przez dodanie stylu podstawowego w Tailwind.