Este artículo ilustrará el método para aplicar estilo a los encabezados agregando el estilo base en Tailwind.
¿Cómo aplicar estilo a los encabezados usando Tailwind de estilo base?
Para dar estilo a los encabezados en Tailwind, consulte los pasos proporcionados:
- Abra el archivo CSS del proyecto.
- En el archivo CSS, agregue el estilo base a los encabezados usando el ' @capa ” directiva bajo el “ @base de viento de cola; ” directiva.
- Haga un programa HTML y use elementos de encabezado en él.
- Ejecute el programa HTML y verifique la salida.
Paso 1: agregue el estilo base a los encabezados en el archivo CSS
Primero, abra el ' estilo.css ” y agregue el estilo base a los encabezados en él usando el “ @capa ” directiva. Por ejemplo, hemos agregado el estilo base a los siguientes encabezados:
@tailwind base ;
@capa base {
h1 {
@aplicar texto-6xl ;
}
h2 {
@aplicar texto-5xl ;
}
h3 {
@aplicar texto-4xl ;
}
h4 {
@aplicar texto-3xl ;
}
h5 {
@aplicar texto-2xl ;
}
}
@tailwind componentes ;
@tailwind utilidades ;
Aquí:
- “ @capa base {...} ” define una nueva capa base y contiene los estilos para los componentes del encabezado.
- “ h1 { @aplicar texto-6xl; } ” aplica el “ texto-6xl ” clase de utilidad a la “ h1 ” elementos.
- Similarmente, ' h2 ”, “ h3 ”, “ h4 ', y ' h5 Los elementos ” tienen sus tamaños de fuente establecidos usando “ @aplicar ” y las respectivas clases de utilidad (text-5xl, text-4xl, text-3xl y text-2xl).
Paso 2: Cree una página web HTML usando encabezados
Luego, haga el programa HTML y use los elementos de encabezado en él. Aquí, hemos utilizado los siguientes elementos de encabezado:
< cuerpo >
< división clase = 'h-pantalla justificar-centro texto-centro bg-violet-400' >
< h1 > Título 1 < / h1 >
< h2 > Título 2 < / h2 >
< h3 > Título 3 < / h3 >
< h4 > Título 4 < / h4 >
< h5 > Título 5 < / h5 >
< / división >
< / cuerpo >
Paso 3: Ejecute el programa HTML
Finalmente, ejecute el programa HTML y vea la página web para verificar:
El resultado anterior ha mostrado los encabezados como si fueran estilos en el archivo CSS.
Conclusión
Para diseñar encabezados en Tailwind, abra el archivo CSS y agregue el estilo base a los encabezados usando el ' @capa ” directiva bajo el “ @base de viento de cola; ” directiva. Luego, haga un programa HTML y use elementos de encabezado en él. Por último, vea la página web HTML para verificar el resultado. Este artículo ha explicado el método para dar estilo a los encabezados agregando el estilo base en Tailwind.