Hasta hace unos años, cuando se trataba de estilo front-end, era una práctica común crear nombres de clases únicos de acuerdo con convenciones de nomenclatura como BEM y crear diseños yendo y viniendo a archivos CSS. Pero ahora, ese panorama ha cambiado por completo con “Tailwind CSS”. ¿Por qué el concepto de utilidad pública ha atraído a tantos desarrolladores?
En esta ocasión, para aquellos que estén considerando implementar Tailwind CSS, analizaremos a fondo sus ventajas y desventajas.
Beneficio 1: Libre de preocupaciones profundas sobre los nombres de las clases
“¿Cómo deberíamos llamar el elemento contenedor para este botón… contenedor-botón? ¿contenedor-acción?”
¿Alguna vez has perdido el tiempo con pensamientos tan inútiles? Tailwind agrega clases de utilidad breves predefinidas (flex, p-4, text-center, etc.) directamente al HTML, eliminando por completo la carga mental de nombrar clases.
Beneficio 2: Eliminación de cambios de contexto
En el desarrollo convencional, era inevitable ir y venir entre escribir HTML (o JSX), abrir un archivo CSS y regresar a HTML. Tailwind escribe estilos directamente en el marcado, lo que reduce los movimientos oculares y la navegación de archivos, lo que le permite ensamblar componentes sin interrumpir su pensamiento. Esto acelera la velocidad de desarrollo más de lo que puedas imaginar.
Desventaja 1: HTML parece “sucio”
Una crítica común a Tailwind es que los atributos de clase HTML se vuelven demasiado largos, lo que reduce la legibilidad. Es cierto que un componente complejo tiene docenas de clases y puede resultar difícil entender lo que sucede a primera vista. Para evitar esto, los marcos como React y Vue deben dividirse en unidades de componentes y tener un diseño que evite que un solo archivo se vuelva demasiado grande.
Desventaja 2: Es difícil adquirir conocimientos únicos de CSS
Debido a que confiamos demasiado en clases de utilidad convenientes, tendemos a descuidar la comprensión del CSS sin procesar subyacente (especificaciones de Flexbox, mecanismos de Grid, etc.). Si no comprende ni utiliza los nombres de clase de Tailwind a qué propiedades CSS están asignadas, puede quedarse atascado al crear sus propias animaciones y diseños complejos.
Diagnóstico de idoneidad del proyecto
Entonces, ¿para qué tipo de proyectos es adecuado Tailwind CSS? En conclusión, es casi seguro que cualquier proyecto que utilice un marco moderno orientado a componentes (como React/Next.js/Vue/Nuxt) se beneficiará. Por otro lado, si tiene un sitio estático creado utilizando sólo archivos HTML antiguos y en buen estado, o un entorno donde no existe el concepto de reutilizar componentes, el resultado puede ser simplemente un código más largo.
Comprenda las fortalezas y debilidades y use esta poderosa arma en el lugar correcto.