Cuando trabajas con Tailwind CSS, todas las etiquetas HTML pierden sus estilos por defecto. Esto significa que un h1, un h2 y un h3 se ven exactamente igual: sin tamaño diferenciado, sin negrita, sin ningún estilo visual. La directiva @apply resuelve este problema de forma elegante, permitiéndote definir estilos base que se mantendrán consistentes en todo tu proyecto.
¿Por qué Tailwind elimina los estilos por defecto de las etiquetas HTML?
Tailwind CSS aplica un reset a todos los elementos HTML para que partas desde cero. Esto es útil porque te da control total sobre el diseño, pero también implica que etiquetas como h1, h2 o h3 no tendrán ninguna diferencia visual entre sí [0:18]. Sin estilos predefinidos, necesitas una forma de inicializar tus etiquetas con los estilos que desees.
Aquí es donde entra la directiva @apply, que te permite usar clases de utilidad de Tailwind directamente dentro de tu archivo CSS.
¿Cómo funciona @apply en la práctica?
Primero se crea un archivo HTML con la estructura básica y se vincula el archivo CSS de Tailwind. Luego se agregan etiquetas con contenido diferente, por ejemplo un h1, h2 y h3 [0:30].
En el archivo CSS, se utiliza la directiva de la siguiente manera:
css
h1 {
@apply text-xl text-green-700 font-semibold;
}
h2 {
@apply text-lg text-blue-700 font-semibold;
}
h3 {
@apply text-base text-red-700 font-semibold;
}
Con este código, cada vez que uses estas etiquetas en cualquier parte del proyecto, mantendrán los mismos estilos sin necesidad de repetir clases en cada elemento HTML [1:24].
¿Qué clases de utilidad se pueden usar con @apply?
Dentro de @apply puedes incluir cualquier clase de utilidad de Tailwind:
- text-xl, text-lg, text-base: controlan el tamaño de la tipografía.
- text-green-700, text-blue-700: definen el color del texto usando la paleta de colores de Tailwind.
- font-semibold: establece el peso de la fuente como semi negrita.
La ventaja principal es que escribes estas clases una sola vez en tu CSS y se aplican automáticamente a todas las instancias de esa etiqueta [1:05].
¿Cuál es la diferencia entre usar @apply y clases inline?
Cuando aplicas clases directamente en el HTML, necesitas repetirlas en cada elemento. Con @apply, defines los estilos una vez en tu hoja de estilos y todas las etiquetas del mismo tipo heredan esas propiedades. Esto hace tu código más limpio, más fácil de mantener y garantiza consistencia visual en todo el desarrollo.
La directiva @apply también es útil para extraer componentes, es decir, crear clases reutilizables que agrupen varias utilidades de Tailwind bajo un solo nombre. Esto permite construir sistemas de diseño más organizados sin perder la flexibilidad que ofrece el framework.
¿Ya estás usando @apply en tus proyectos? Comparte cómo organizas tus estilos base con Tailwind CSS.
