Este artículo tiene más de 2 años. Si contiene información técnica es posible que no se ajuste a las últimas versiones.

Tailwind CSS, disciplina y diversión a partes iguales para diseñar tus proyectos web

El CSS entra en la categoría de esas materias que son fáciles de aprender, pero difíciles de dominar. Creo que uno de los motivos está en la bendita libertad que ofrece el CSS, ya que más allá de conocer la sintaxis y cumplir unos mínimos, no impone unas reglas muy estrictas. Uno va construyendo sus hojas de estilo siguiendo, nunca mejor dicho, un estilo personal. Aquellas personas que vienen de la disciplina de la programación o que son muy ordenadas, se imponen un sistema propio o prefieren utilizar metodologías estándar como BEM.

Pero para la mayoría el proceso de aprender y de incorporar el CSS en sus sitios web es muy personal y eso incluye la forma de nombrar las clases o de organizar tus archivos. Lo malo de no seguir un sistema es que la dificultad de compartir tu proyecto con otras personas o lo que es incluso peor, hablar contigo mismo en el futuro a través de tu propio CSS y no entenderte 😩😩

Tira cómica de hombre que dice Me encanta almorzar utilidades CSS cada día
Si hubiera que escoger las características más deseables con las que debe contar tu CSS, podríamos incluir:

  • Consistente: La nomenclatura es consistente en todo el proyecto, evitando nombrar libremente tus clases y usando un sistema predefinido y predecible.
  • Mantenible: Nuestro CSS debe ser fácilmente mantenible en el tiempo, evitando los habituales problemas de especifidad en la cascada.
  • Reutilizable: Podemos usar nuestra base CSS para otros proyectos, haciendo independientes las instrucciones CSS de la implementación concreta de cada proyecto.

A pesar de que estas características son genéricas para cualquier método que uses, creo que Tailwind CSS ha logrado gracias a su enfoque de pequeñas utilidades y su capacidad de extensibilidad, que diseñar con CSS sea al mismo tiempo una diversión y una asumible disciplina. Tras varios proyectos realizados con Tailwind CSS y con la experiencia también de haber usado otras herramientas, y por supuesto, haberme peleado tiempo con mi propio CSS, voy a contar las bondades de esta herramienta. Por cierto no hace mucho hablamos de esta herramienta en el podcast República Web:

Un framework CSS que no impone decisiones de diseño

Lo primero sería definir Tailwind CSS como una librería o un framework. Creo que aunque librería es un término más habitual, en el caso de Tailwind se ajustaría mejor la palabra framework. El motivo es que su principal virtud consiste en ser extensible y muy personalizable. Además otra gran virtud es que se trata de una herramienta que no impone ni pretende imponer unas decisiones de diseño. Cuando usas otras librerías o herramientas de interfaz de usuario como Bootstrap o Bulma, te están condicionando mucho el diseño (muchas webs son iguales por algo). Aunque este enfoque de “Utility First” basado en clases con un único propósito, pueda chocar en exceso con nuestras “buenas prácticas en CSS” como la refactorización, creo que supone una excelente forma de cumplir las características de consistencia, mantenimiento y reutilización de nuestro código. Y esto no es cualquier cosa.

Diseñar con Tailwind CSS también impone, a su manera, sus normas; existen unos nombres y una configuración, pero en mi opinión ofrece siempre una excelente respuesta a las situaciones más habituales cuando te enfrentas a un diseño.

Una de las principales críticas que siempre tienen los framework es que terminas por hacer las cosas condicionado al diseño de ese framework. Diseñar con Tailwind CSS también impone, a su manera, sus normas; existen unos nombres y una configuración, pero en mi opinión ofrece siempre una excelente respuesta a las situaciones más habituales cuando te enfrentas a un diseño. Pero lo que es más importante, sin ninguna imposición. Tailwind hace lo que necesitas (posición de elementos, apariencia y maquetación) pero deja abierta siempre la puerta de extensibilidad.

Ejemplo de maquetación con Tailwind CSS

Cuando diseñas con Tailwind CSS te sorprende comprobar lo poco que debes ampliar o extender la herramienta con tu propio CSS. Con otras librerías o kits, siempre he terminado por necesitar escribir líneas adicionales y casualmente, siempre han sido las partes más difíciles de mantener más tarde. Si esto es admitir que uno es un terrible diseñador CSS, estoy más que dispuesto a aceptarlo. Prefiero la conveniencia y las buenas prácticas, a la soberbia de pensar que soy un experto en CSS. La base de código de Tailwind es predecible y muy organizada. Es realmente fácil acostumbrarse a ella. Tanto que me he visto tentado a usar las mismas clases en proyectos anteriores que no usaban.

La separación de responsabilidades hay que tomársela con precaución

El uso de utilidades o clases automáticas no es nuevo. Si sólo fuera por esta utilidad, quizás Tailwind vendría a ser uno más. El enfoque extensible de la herramienta es la que consigue diferenciarse de otras herramientas como Tachyons (precursora de este estilo). Una de las críticas más habituales a esta técnica de utilidades de clases, es que el marcado HTML termina por ser “feo y superpoblado”. También que el marcado HTML, impone una fuerte dependencia de la presentación. ¿Es esto malo? En mi opinión, las ventajas descritas anteriomente superan con mucho a las reservas más clásicas. Y aquí entramos en la famosa separación de responsabilidades tan clásica en el diseño web: un diseño puro y elegante no admite esto de las utilidades y esa “sopa de clases” en las etiquetas HTML, pero en la práctica, que es lo que muchas veces nos importa es altamente productivo.

Hoy los proyectos web son fuertemente dependientes de librerías y metodologías, y eso afecta también al CSS.

Atrás queda ese “estilo zen CSS” que promulgaba una independencia total de la presentación, de la estructura y la semántica. Hoy los proyectos web son fuertemente dependientes de librerías y metodologías, y eso afecta también al CSS. Los sitios web suelen ser creados con un lenguaje de servidor detrás, tienen también fuentes de datos y están construidos sobre varias capas (componentes, vistas, controladores, etc).

Mi experiencia hasta la fecha con Tailwind CSS

Ya son varios proyectos usando Tailwind CSS (incluyendo el rediseño de este sitio web). No voy a contarte aquí como usarla porque la documentación del proyecto es excelente (pero en inglés). Lo que sí me gustaría es destacar sus puntos fuertes, y en especial lo que ha mejorado mi experiencia diseñando webs con esta herramienta.

  • Escribo muchísimo menos CSS: Como comentaba anteriormente, he dejado de escribir o complementar mi código CSS. Es normal podrás decir, viendo el tamaño del archivo CSS. Pero en contraprestación, ganas un estilo muy cuidado que trabaja francamente bien los elementos del diseño de la web (layout, tamaños) y una fenomenal librería de clases con todo lo necesario para maquetar tu web.
  • El mantenimiento y la modificación de la web es mucho más sencillo: Ahora cualquier cambio es sumamente sencillo, ya que evito volver a ejecutar la creación de hojas de estilo, cambiando clases CSS. Es tan fácil como añadir o quitar clases en el lugar exacto.
  • Diseñar se hace más divertido y más rápido: Ahora es fácil lanzarse a nuevos diseños ya que la rapidez a la hora de construir la interfaz es asombrosamente rápida. Es una gozada poder componer rápidamente la estructura del sitio y hacer modificaciones de diseño y pruebas con cambiar unas pocas clases o marcado HTML.
  • Se aprovecha un montón de código en el mismo proyecto y otros: Esto me resulta inestimable. Poder crear diferentes componentes (sliders, bloques, navegación) asegurándome que no debo añadir o modificar estilos CSS en mis proyectos. De nuevo, una ganancia de productividad tremenda.
  • Trabajo con un código sólido y extensible: Tailwind CSS es técnicamente un logro tremendo. Como comentaba el nombre de clases y el sistema que sigue es muy predecible y elegante. De alguna forma enseguida te das cuenta que todo tiene su sitio y que es muy fácil extender la herramienta según tus necesidades. Cuidado, no es la típica librería para llamar completa desde un CDN. Exige configuración personalizada.
  • Perfecto para diseños responsive: Con Tailwind CSS es muy intuitivo crear diseños flexibles y adaptados a casi cualquier dispositivo, muy en especial a las pantallas más pequeñas. Las diferentes “media queries” que presenta el código y la facilidad de crear variaciones es una ayuda inestimable para crear diseños flexibles a una velocidad tremenda, sin necesidad de crear complejos anidamientos en tu CSS.

Conclusión

Creo que Tailwind CSS tiene todos los ingredientes para marcar tendencia en el mundo CSS. Es una herramienta intuitiva y muy completa. Por si fuera poco, aporta sentido y orden sin necesidad de que aprendas mucho CSS. Se nota que está hecha por experimentados desarrolladores con experiencia en la creación de interfaz de usuario. Destacaría que no es una herramienta para personas que quieran aprender desde cero, como es lo que pasa con cualquier framework. Por cierto el creador de Tailwind CSS Adam Wathan ha iniciado unos útiles screencasts para iniciarse en la herramienta:

En cambio es una ayuda inestimable para los desarrolladores que necesitan un base sólida de código en sus proyectos, y que al mismo tiempo, buscan cierta libertad de diseño. Prueba de la calidad del código es que una vez te acostumbras a ella, es complicado retomar otros sistemas. Estoy convencido de que con el tiempo, veremos nuevos complementos y un proyecto mucho más maduro. Mientras tanto, sigamos divirtiéndonos con la mente siempre abierta a nuevas técnicas.