Questo articolo illustrerà il metodo per modellare le intestazioni aggiungendo lo stile di base in Tailwind.
Come definire lo stile delle intestazioni utilizzando lo stile base Tailwind?
Per dare uno stile alle intestazioni in Tailwind, controlla i passaggi forniti:
- Apri il file CSS del progetto.
- Nel file CSS, aggiungi lo stile di base alle intestazioni usando ' @strato ” direttiva ai sensi del “ @base del vento in poppa; ” direttiva.
- Crea un programma HTML e usa gli elementi di intestazione al suo interno.
- Eseguire il programma HTML e verificare l'output.
Passaggio 1: aggiungi lo stile di base alle intestazioni nel file CSS
Innanzitutto, apri il ' style.css ” e aggiungi lo stile di base alle intestazioni in esso contenute usando il “ @strato ” direttiva. Ad esempio, abbiamo aggiunto lo stile di base alle seguenti intestazioni:
@tailwind base ;
@strato base {
h1 {
@fare domanda a testo-6xl ;
}
h2 {
@fare domanda a testo-5xl ;
}
h3 {
@fare domanda a testo-4xl ;
}
h4 {
@fare domanda a testo-3xl ;
}
h5 {
@fare domanda a testo-2xl ;
}
}
@tailwind componenti ;
@tailwind utilità ;
Qui:
- “ @livello di base { … } ” definisce un nuovo livello di base e contiene gli stili per i componenti dell'intestazione.
- “ h1 { @applica testo-6xl; } ” applica il “ testo-6xl ” classe di utilità alla “ h1 ' elementi.
- Allo stesso modo, “ h2 ”, “ h3 ”, “ h4 ', E ' h5 'gli elementi hanno le dimensioni dei caratteri impostate utilizzando' @fare domanda a ” e le rispettive classi di utilità (testo-5xl, testo-4xl, testo-3xl e testo-2xl).
Passaggio 2: creare una pagina Web HTML utilizzando le intestazioni
Quindi, crea il programma HTML e usa gli elementi di intestazione in esso contenuti. Qui, abbiamo utilizzato i seguenti elementi di intestazione:
< corpo >
< div classe = 'h-screen justify-center text-center bg-violet-400' >
< h1 > Titolo 1 < / h1 >
< h2 > Titolo 2 < / h2 >
< h3 > Titolo 3 < / h3 >
< h4 > Capo 4 < / h4 >
< h5 > Capo 5 < / h5 >
< / div >
< / corpo >
Passaggio 3: eseguire il programma HTML
Infine, esegui il programma HTML e visualizza la pagina Web per la verifica:
L'output sopra ha mostrato le intestazioni come se fossero stili nel file CSS.
Conclusione
Per dare uno stile alle intestazioni in Tailwind, apri il file CSS e aggiungi lo stile di base alle intestazioni utilizzando il simbolo ' @strato ” direttiva ai sensi del “ @base del vento in poppa; ” direttiva. Quindi, crea un programma HTML e usa gli elementi di intestazione al suo interno. Infine, visualizzare la pagina Web HTML per verificare l'output. Questo articolo ha spiegato il metodo per modellare le intestazioni aggiungendo lo stile di base in Tailwind.