Desde los inicios de la web el CSS (hojas de estilo en cascada) ha desempeñado un papel vital en el desarrollo web, agregando el estilo estilístico que separa páginas aburridas y estáticas de sitios vibrantes e interactivos.
A lo largo de los años, varios frameworks y enfoques CSS, como Bootstrap y BEM (Block-Element -Model) han ofrecido a los desarrolladores comodidad y rapidez. Sin embargo, hay un nuevo framework predominante: Tailwind CSS. Desde su lanzamiento inicial en 2017, Tailwind ha ganado gran popularidad entre los desarrolladores. Pero, ¿qué diferencia a Tailwind CSS de otros enfoques?
La flexibilidad: Tailwind > Bootstrap
Cuando se utilizan frameworks CSS convencionales como Bootstrap o bibliotecas de componentes como Material UI, los componentes vienen predefinidos con su estilo. Esta característica, si bien es conveniente, es increíblemente restrictiva, especialmente cuando los desarrolladores trabajan con diseñadores profesionales que requieren mucha personalización, capacidad de respuesta e interactividad en las aplicaciones y sitios.
Tailwind CSS introdujo un nuevo paradigma: la utilidad primero. En lugar de luchar con estilos predeterminados dominantes, ahora comenzamos con HTML básico (o JSX) y construimos nuestros diseños desde cero, aplicando clases que corresponden directamente a las propiedades de CSS pero que son mucho más cortas de escribir, especialmente para consultas de medios. Inicialmente, este control granular parece extraño, pero ofrece a los desarrolladores una flexibilidad incomparable.
Personalizar componentes predefinidos para que se ajusten a un diseño único puede ser una lucha enorme. En mi experiencia, a menos que el diseñador ya se sienta cómodo con cualquier enfoque prediseñado que esté utilizando, el desarrollador no ahorrará tiempo al utilizar componentes prediseñados.
Aún peor es la sensación de intentar implementar un sistema de diseño completo nuevo usando una herramienta tosca como Material UI entre otros. Al principio parece genial, pero una vez que salgas de la etapa de creación de prototipos, empezarás a tener pesadillas con el diseño.
Para solucionar este problema, Tailwind CSS proporciona un sistema altamente personalizable. Con la ayuda del archivo de configuración, tailwind.config.js, los desarrolladores pueden ajustar el tema predeterminado del framework, definir colores, espacios, tamaños de fuente personalizados y mucho más. Este framework de personalización facilita la creación de diseños únicos sin desviarse de la filosofía del marco.
Más importante aún, Tailwind CSS proporciona plantillas prediseñadas para un sistema de diseño. ¿Quieres un rosa más oscuro? Olvídate de los códigos hexadecimales; simplemente vas a cambiar bg-pink-400 (Barbie) por una bg-pink-500 un poco más oscuro. Es así de fácil.
La transformación: CSS funcional a CSS Tailwind
A medida que avanzaba el proyecto de Tailwind, se hizo evidente que el término "CSS funcional" era demasiado genérico para un framework y un enfoque tan único. Por lo tanto, a principios de 2018, se renombró como "Tailwind CSS". El nombre era una metáfora apropiada para la misión: crear una herramienta que ayudará a los desarrolladores profesionales a navegar sin problemas a través de las múltiples variables y opciones de CSS.
Desde su cambio y lanzamiento oficial, Tailwind CSS ha ido creciendo exponencialmente en popularidad. La adopción del framework se ha visto favorecida por su diseño centrado en los desarrolladores y una comunidad activa de desarrolladores que contribuyen regularmente a su ecosistema. El lanzamiento de Tailwind UI en 2020 fue un hito importante que proporcionó una amplia biblioteca de componentes listos para usar, mejorando aún más el atractivo del framework.
PurgeCSS: un enfoque eficiente
Muchos desarrolladores pueden sorprenderse ante la perspectiva de un framework CSS que priorice las utilidades, dado el potencial de aumento del tamaño de los archivos. La idea aquí es que si cargas "todas las clases posibles de Tailwind CSS", terminarás con un archivo CSS particularmente grande. Esta preocupación, si bien es válida, se olvida por la forma en que Tailwind usa PurgeCSS automáticamente, sin necesidad de configuración.
PurgeCSS reduce significativamente el tamaño del archivo CSS final al eliminar las clases no utilizadas de la hoja de estilo, garantizando así que su compilación de producción sea lo más sencilla posible. Gracias a PurgeCSS, el enfoque de Tailwind de priorizar las utilidades no infla el tamaño del archivo, lo que lo convierte en una opción viable para proyectos preocupados por el rendimiento. ¡Debería ser tu opción predeterminada si te importa el rendimiento web (y core web vitals)!
Para justificar esa afirmación, mencionemos brevemente las alternativas. Si usa CSS-in-JS, inflarás cada componente y no tendrás reutilización, así que digamos que terminas con 100 KB de transferencia de datos. El modelo BEM será similar ya que escribirá display: flex; en varias docenas de componentes separados, lo que dará como resultado ~100 KB de transferencia de datos.
En teoría, podrías optimizar un archivo CSS normal, con o sin PurgeCSS, pero nunca he visto a nadie hacerlo. Los archivos CSS típicos de nivel profesional tienden a tener 10,000 líneas o más y, por lo general, no se puede eliminar nada para evitar que se rompan, al menos no sin una herramienta como PurgeCSS. En comparación, Tailwind CSS solo enviará el CSS requerido, lo que generalmente resulta en sólo 20 a 40 KB de transferencia de datos para un sitio web grande.
La experiencia del desarrollador es intuitiva y sencilla
El auge de Tailwind CSS no se puede atribuir únicamente a sus características técnicas. La experiencia general de desarrollador que ofrece es un factor importante en su popularidad. Una vez que te acostumbras, encontrarás Tailwind intuitivo; poner las clases directamente en HTML parece normal y requiere menos escritura que CSS.
La comunidad y los recursos de Tailwind
Tailwind CSS cuenta con una comunidad próspera que contribuye a su crecimiento. La disponibilidad de tutoriales, recursos y complementos creados en torno a Tailwind hace que el aprendizaje y el uso del framework sean más accesibles. Un gran ejemplo es el “Complemento de sujeción de línea”, que acorta automáticamente las líneas mediante puntos suspensivos (…). ¡Ese complemento era tan popular que ahora está integrado en Tailwind!
Además, el equipo de desarrollo de Tailwind se comunica frecuentemente con la comunidad, realizando actualizaciones y perfeccionando el producto en función de los comentarios de los usuarios.
Conclusión
La popularidad de Tailwind CSS se puede atribuir a su filosofía de dar prioridad a la utilidad, su alto grado de personalización, optimizaciones automáticas de rendimiento listas para usar y su enfoque de dar prioridad al desarrollador y total libertad al diseñador. Esa combinación de características da como resultado un código que es más rápido de escribir que el CSS normal (ya que hay menos caracteres para escribir) y que reduce la carga mental con su enfoque de "solo un archivo" (en lugar de saltar de un lado a otro de los archivos CSS).
En otras palabras, Tailwind CSS se hizo tan popular porque cumple con las demandas técnicas de los desarrolladores web modernos y brinda una experiencia agradable para los desarrolladores.
