Esta publicación ilustra todos los aspectos posibles para agregar 'estilos base' en Tailwind CSS.
¿Cómo agregar estilos 'base' en Tailwind?
“Tailwind CSS” viene con los siguientes tres métodos para agregar los estilos “base” en todo el contenido HTML o en un elemento específico:
- Use 'CSS' para agregar estilos base en Tailwind.
- Use 'Complemento' para agregar estilos base en Tailwind.
Vamos a explorarlos uno por uno.
requisitos previos
Antes de pasar a la implementación práctica, primero, eche un vistazo al proyecto recién creado llamado 'Linuxhint' que se usa para agregar los 'estilos base':
Estructura del archivo del proyecto
Ahora, navegue hasta el archivo 'index.html' y eche un vistazo a su código HTML:
< html >< cabeza >
< enlace href = '/dist/output.css' real = 'hoja de estilo' >
< / cabeza >
< cuerpo >
< h2 clase = 'subrayar texto-centro fuente-negrita texto-rosa-600' > ¡Bienvenido a Linuxhint! < / h2 >< hermano >
< h3 clase = 'texto-centro fuente-texto en negrita–naranja-600' > Tutorial: Adición de estilos base en Tailwind. < / h3 >< hermano >
< / cuerpo >
En las líneas de código anteriores:
Producción
La salida del código anterior se muestra aquí:
Ahora, use el método discutido para personalizar el código HTML anterior agregando los estilos base. Comencemos con el método Tailwind 'CSS'.
Método 1: use CSS para agregar 'estilos base' en Tailwind
El método más simple y sencillo para agregar un estilo base a un elemento HTML específico es agregarlo en el archivo CSS principal del proyecto. Realicemos esta tarea prácticamente siguiendo los pasos dados.
Paso 1: abre el archivo CSS
Primero, abra el archivo CSS principal, es decir, ' estilo.css ” que contiene las capas integradas de viento de cola “base”, “componentes” y “utilidades”:
Paso 2: Agrega el CSS
A continuación, agregue el estilo 'base' para los elementos HTML específicos '
' y '' aplicando las clases usando el ' @aplicar ” directiva en la capa “base” con la ayuda de la “ @capa ” palabra clave. Las palabras clave '@layer' agregan las clases definidas en la capa 'base' especificada: @capa base {
h2 {
@aplicar texto-3xl;
}
h3 {
@aplicar texto-xl;
}
}
h2 {
@aplicar texto-3xl;
}
h3 {
@aplicar texto-xl;
}
}
En las líneas de código anteriores, el ' Tamaño de fuente La clase ” se aplica a los elementos “
” y “” para agrandarlos hasta el tamaño especificado, respectivamente:
Guarde (Ctrl + S) el archivo.
Paso 3: Salida
Ahora, ejecute el código en el servidor en vivo y vea el resultado, de la siguiente manera:
Aquí, el resultado muestra que la clase 'Tamaño de fuente' de Tailwind se aplica con éxito al elemento especificado en la capa base.
Nota : El mismo enfoque se utiliza para todas las demás clases de Tailwind CSS.
Método 2: use el complemento para agregar 'estilos base' en Tailwind
Otro método útil para agregar estilos 'base' es escribir un ' enchufar ” y usa el “ añadirBase() ' función. Esta función ayuda a registrar nuevas clases en el “ base ” directiva de capa. Esta función se utiliza en el archivo “tailwind.config.js” de Tailwind. Hagámoslo de manera práctica.
Paso 1: Definir la función “addBase()”
Primero, navegue hasta el ' tailwind.config.js ” archivo de configuración y agregue los estilos base del complemento y llame a la función “addBase ()”:
Guarda el archivo.
Paso 2: Salida
Por último, ejecute el código HTML dado y vea el resultado:
Como se ve, la clase “Tamaño de fuente” de Tailwind definida en la función “addBase()” como un objeto JavaScript se aplica a los elementos HTML especificados.
Conclusión
Los estilos base Tailwind se pueden agregar fácilmente usando el ' CSS ” clases en el archivo CSS principal y el “ Enchufar ' con el ' añadirBase() ” función en el archivo de configuración. El método 'CSS' se considera el método más simple, ya que solo define los estilos base en la capa 'base' y los implementa automáticamente en el elemento especificado. Por otro lado, la sección “plugin” de la “ tailwind.config.js ” requiere la función “addBase()” para definir los estilos base como objetos JavaScript. Esta publicación ilustró todos los aspectos posibles para agregar estilos base en Tailwind CSS.