Tailwind CSS es un framework de CSS muy popular entre los desarrolladores web. Sin conocimientos previos en diseño gráfico, te resuelve el estandarizado de espacios, colores y tamaños. Pero además, si eres tenuemente desorganizado, te fuerza a una metodología de trabajo basada en crear grandes estructuras a partir de utilidades sencillas (Utility-First Fundamentals). Y a todo ello hay que sumar una documentación fácil de entender con un buscador impecable.
Lo he usado en varios proyectos. Me ha ayudado a crear interfaces de usuario rápidamente. Y a pesar de todo ello, es una herramienta que no recomendaría. Por ello, en este artículo, te voy a dar razones por las cuales no deberías usar Tailwind CSS en proyectos medianos o grandes. El único requisito que te pido es una mente abierta, autocrítica y una actitud de aprendizaje.
Debes aprender decenas de clases
En la version 2.2.19 de Tailwind CSS contiene un total de 6.504 clases. Aunque la documentación es muy buena, es un reto aprender únicamente las clases básicas. Lo más probable es que acabes desarrollando con una pestaña abierta de tu navegador con el buscador constantemente trabando. Invirtiendo tiempo en entendiendo la forma más adecuada de aplicar cada clase. Un proceso lento y tedioso. Y si has creado tus propias clases que se mezclan con las de Tailwind, la dificultad aumenta.
CSS ya es demasiado complejo de aprender para además tener que recordar el uso correcto de Tailwind CSS.
Dependes de JavaScript
Existe un proceso de instalación con Node.js que no podrás sortear. O usando Tailwind CLI, PostCSS o integrando a tu framework de JavaScript.
Por otro lado tenemos a PostCSS que es una herramienta que transforma CSS con plugins de JavaScript. Tailwind CSS lo necesita para crear componentes más complejos o quitar carga a tus HTML con @apply. Si no estás familiarizado con la herramienta, tendrás que aprenderla. Añade una capa de complejidad a tu proyecto en JavaScript.
Para terminar, es recomendable que uses PurgeCSS para quitar todo el CSS innecesario. Añadiendo más dependencias y configuraciones a tu proyecto.
No es una buena idea depender tanto de JavaScript para un proyecto web que tal vez no lo necesite.
Rompe la separación entre la estructura y el diseño
Tailwind CSS es una biblioteca de utilidades de CSS gigantesca, clases atómicas con tareas específicas. A no ser que utilices la ayuda de PostCSS (JavaScript), deberás incluir todas las clases en tu HTML. Esto rompe la regla elemental de separar la estructura del diseño, o el HTML del CSS. Además de engordar todo el HTML, que ya es alarmante de por sí, la legibilidad del código se ve comprometida, se pierde rendimiento en el renderizado y la capacidad de reutilizar el código. Insisto, a no ser que utilices una capa de JavaScript para agrupar clases.
¿Por qué en los años 90 se decidió separar el HTML del CSS? Porque los sitios se volvieron más complejos, y separar ambas responsabilidades lograba más facilidad en el mantener, mejoras en su lectura y posibilidades de reutilizar. Tailwind CSS da un paso atrás, a no ser que añadas más complejidad.
No es consistente
Su nomenclatura no es coherente, en algunos momentos opaca y tiende a confundir. Por ejemplo, las clases de alineación y justificación. ¿Cuál es la diferencia entre items-center, justify-center, text-centery place-content-center? El nombre de las clases no es intuitivo y no sigue un patrón claro. Si tienes curiosidad, items-center es para alinear elementos en un contenedor flex, justify-center es para alinear elementos en el eje principal, text-center es para centrar texto y place-content-center es para centrar elementos en un contenedor grid. Voy a cambiar los nombres buscando coherencia: flex-align-items-center, flex-justify-content-center, text-align-center y grid-place-items-center. ¿Notas alguna diferencia?
No es una buena puerta de entrada para aprender CSS
Tailwind CSS es fácil de usar y comprender si estas familiarizado con los estilos. Pero para aquellos que poseen poca experiencia en CSS, crea una falsa sensación de aprendizaje. Trasmite que es una versión minimalista a la hora de crear CSS, quitando el esfuerzo de mantener un código ordenado. Usar tantas clases prediseñadas obstaculiza la capacidad de un desarrollador para dominar CSS. El tiempo que ahorras en crear clases y pensar una nomenclatura, lo pierdes usando el framework de la forma más eficiente. Usar Tailwind CSS es un desafío, para los desarrolladores de todos los niveles. Y no podemos ignorar que si profundizas en el framework, te alejas de aprender los fundamentos del CSS. En otras palabras, a mis alumnos o compañeros de trabajo les recomendaría antes aprender CSS que Tailwind CSS. Y si eres un desarrollador experimentado, tal vez ni siquiera necesites usar el framework.
Es difícil de leer
A continuación voy a mostrarte un botón con color de fondo indigo, texto blanco, fuente seminegrita, bordes redondeados, hover y focus.
Primero en CSS vainilla. Voy a tomarme la libertad de añadir variables para los colores y los espacios. Usaré anidamiento para el hover y focus, ya que actualmente es compatible con todos los navegadores.
:root {
--color-blanco: #fff;
--color-negro: #000;
--color-indigo: #4f46e5;
--color-indigo-hover: #4338ca;
--gap-s: 0.5rem;
--gap-m: 1rem;
}
.boton {
padding: var(--gap-s) var(--gap-m);
background-color: var(--color-indigo);
color: var(--color-blanco);
font-weight: 700;
border-radius: var(--gap-s);
&:hover, &:focus {
background-color: var(--color-indigo-hover);
}
}
Ahora en Tailwind CSS usando @apply.
.boton {
@apply py-2 px-4 bg-indigo-500 text-white font-semibold rounded-lg hover:bg-indigo-700 focus:bg-indigo-700;
}
</style>
El CSS vainilla es auto explicativo, mientras que con Tailwind CSS deberás revisar la documentación. ¿Qué color es bg-indigo-500? ¿Cómo de redondo es rounded-lg? ¿bg-indigo-700 es más oscuro que bg-indigo-500? Por otro lado, el primero código es más fácil de mantener, la curva de aprendizaje para un nuevo desarrollador es baja y el CSS tiende a ser modular. Por supuesto que realizas un esfuerzo mayor con CSS vainilla, pero solo al inicio. A continuación posees el control total de las variables, cascada y nomenclatura.
Como regalo me gustaría mostrarte la equivalencia en un preprocesador como SASS.
$color-blanco: #fff
$color-negro: #000
$color-indigo: #4f46e5
$color-indigo-hover: #4338ca
$gap-s: 0.5rem
$gap-m: 1rem
.boton
padding: $gap-s $gap-m
background-color: $color-indigo
color: $color-blanco
font-weight: 700
border-radius: $gap-s
&:hover, &:focus
background-color: $color-indigo-hover
Ignora la cascada
Poder controlar la prioridad de los selectores y los estilos que se irán sobrescribiendo dependiendo de la posición en las hojas de CSS es básico para cualquier arquitectura. Un error muy común entre diseñadores web poco experimentados es que creen que el orden de las clases en HTML determinan cual estará por delante.
Por ejemplo, si yo tengo el siguiente código.
<p class="color-rojo color-verde">Soy un texto</p>
¿De que color será? La respuesta es que no lo sabes. Necesitas ver el orden de cascada.
.color-verde {
color: green;
}
.color-rojo {
color: red;
}
Ahora te puedo responder que será rojo, que ya esta por debajo del verde.
Veamos un ejemplo similar con Tailwind CSS.
<p class="text-green-500 text-red-500">Soy un texto</p>
La respuesta es la misma, no lo sabes. Si revisas el CSS generado por Tailwind CSS, comprobarás que el color verde está por debajo del rojo. Debería ser rojo. ¡Pero en cambio se muestra verde! No respecta ni su propia cascada, la adultera, y eso es un problema. Solo te queda añadir !important a la clase que quieras que tenga prioridad.
No es cómodo trabajar con Dev Tools
Al construir los componentes con una gran cantidad de clases, controlar con el inspector de elementos que estilos se están aplicando se vuelve lento. Debes hacer scroll buscando que se aplica y sobrescribe. En cambio, con CSS vainilla, puedes ver rápidamente que estilos se están aplicando y en que orden. Además, si tienes un error, es más fácil de encontrar y corregir.
No es compatible con preprocesadores de CSS como SASS o LESS
Si estás acostumbrado a trabajar con preprocesadores, tendrás que aprender una nueva forma de escribir CSS. Esto puede ser un obstáculo para algunos desarrolladores, tanto nuevos como experimentados. Además, si tienes un proyecto grande con muchos estilos, puede ser difícil de migrar a Tailwind CSS.
Conclusión
Tailwind CSS te permite crear prototipos de interfaz de usuario rápidamente. Puedes delegar tareas como la creación de estilos, nomenclaturas, espaciados, colores, breakpoints y normaliza los componentes. Esto es genial para los desarrolladores que necesitan moverse con rapidez. Sin embargo, si el objetivo esta apuntando a un mantenimiento a largo plazo, posiblemente exista un movimiento de desarrolladores, se necesite un control preciso de los estilos y quitar complejidad a la cascada, no te recomendaría usar Tailwind CSS en un proyecto web mediano, grande o con una vida larga. El esfuerzo inicial que evitas, lo pagas con creces en el futuro.
{{ comments.length }} comentarios