Crear clases personalizadas que agrupen múltiples utilidades de Tailwind CSS es una técnica poderosa para mantener el código limpio y reutilizable. Cuando un proyecto crece, repetir las mismas cadenas de clases en cada elemento se vuelve insostenible, y es aquí donde la extracción de componentes marca la diferencia.
¿Qué significa extraer componentes en Tailwind CSS?
Extraer componentes consiste en crear clases de estilos propias que encapsulen todas las utilidades de Tailwind aplicadas a un elemento específico. De esta forma, en lugar de escribir una larga lista de clases en cada input o botón, se usa una sola clase personalizada que se puede reutilizar en todo el proyecto [0:15].
Antes de comenzar la extracción, es importante revisar cómo se ve el diseño en modo responsivo. En el ejemplo práctico, el formulario estaba ubicado incorrectamente dentro de los cards, lo que causaba problemas visuales. Al corregir la estructura y agregar utilidades como mt-4 para separación y container mx-auto para centrado, el formulario quedó en su lugar correcto [0:30].
¿Cómo se usa la directiva @apply para crear clases reutilizables?
El proceso se realiza dentro del archivo CSS de Tailwind, utilizando la directiva @apply. Esta directiva permite agrupar múltiples clases de utilidad bajo un solo nombre personalizado.
¿Cómo crear un form control reutilizable?
Para extraer un input como componente se siguen estos pasos [1:15]:
- Copiar todas las clases del elemento, excepto las pseudoclases como hover y focus.
- Crear una nueva clase llamada
.form-control en el archivo CSS.
- Usar
@apply seguido de las clases copiadas.
- Reemplazar las clases originales en el HTML por
form-control.
css
.form-control {
@apply /* aquí van todas las clases de utilidad del input */;
}
Un detalle importante: al intentar incluir atributos personalizados como placeholder-secondary dentro de @apply, Tailwind lanza un error porque no reconoce atributos creados por el usuario. La solución es remover ese tipo de clases personalizadas del componente extraído [2:00].
¿Cómo manejar pseudoclases como hover y focus?
Las pseudoclases requieren clases separadas. Se crean componentes adicionales como .form-control-hover y .form-control-focus [2:45]:
- Se toman las clases que usan el prefijo
hover: o focus:.
- Se quita el prefijo de la pseudoclase.
- Se aplican con
@apply dentro de la regla CSS correspondiente.
css
.form-control:hover {
@apply /* clases de hover sin el prefijo hover: */;
}
.form-control:focus {
@apply /* clases de focus sin el prefijo focus: */;
}
Una vez creadas estas reglas, se eliminan las pseudoclases del HTML y el componente mantiene todos sus efectos visuales de forma centralizada.
¿Cómo extraer un botón con variantes en Tailwind?
El mismo principio aplica para botones. Se copian las clases del botón sin las pseudoclases, se crea una clase .btn y se usa @apply [3:30]:
css
.btn {
@apply /* clases base del botón */;
}
.btn:hover {
@apply /* clases de hover del botón */;
}
Además, se pueden crear variantes del botón. Por ejemplo, un botón primario con un color específico [4:05]:
css
.btn-primary {
@apply bg-yellow-600;
}
En el HTML basta con usar btn btn-primary para obtener un botón amarillo con todos los estilos base heredados. Este patrón es muy similar al que usan frameworks como Bootstrap, pero con la flexibilidad total de Tailwind.
Las ventajas de esta técnica son claras:
- Código más limpio: el HTML queda libre de cadenas largas de clases.
- Reutilización real: cualquier cambio en el componente se refleja en todos los elementos que lo usan.
- Mantenimiento sencillo: se modifica un solo lugar en vez de buscar en múltiples archivos.
¿Ya estás usando @apply en tus proyectos? Comparte cómo organizas tus componentes extraídos y qué patrones te han funcionado mejor.
