En este artículo vamos a explicar algunos de los motivos por los que pienso que Tailwind es una excelente alternativa como framework de diseño web. Algunos de estos argumentos son absolutamente objetivos y están reflejados perfectamente en la página de inicio del framework. Otros son meramente personales y los cito en base a mi experiencia.

¿Por qué necesito un framework CSS / framework de diseño?

Hay una pregunta que me hago yo hace tiempo ¿por qué necesito Tailwind CSS o cualquier otro framework de diseño como Bootstrap? La verdad es que me siento muy cómodo desarrollando con CSS y nunca he visto la necesidad de usar algo por encima de CSS para mejorar mi desempeño.

Lo cierto es que nunca pude adaptarme a Bootstrap. Lo intenté algunas veces, pero no lo conseguí, no por el framework en sí sino por su enfoque. Incluso sirva de demostración que desarrollé la nueva versión de DesarrolloWeb.com en 1999 con Materialize CSS, un framework con enfoque idéntico a Bootstrap. A mitad del proyecto decidí eliminarlo del todo del desarrollo y enfocarme en el trabajo con CSS desde cero, para hacerlo totalmente mío y alcanzar la personalización y optimización que quería, sin tener que luchar contra los elementos.

Nunca me gustó colocar tantas clases CSS sobre las etiquetas, parecía casi como colocar estilos inline. Ni tener que aprenderme un nuevo sistema de rejilla, cuando ya conozco CSS y con flexbox o grid layout tengo todas las herramientas para hacer cualquier tipo de distribución completamente adaptada a las necesidades, y adaptable a los dispositivos.

Pero sin duda lo peor creo que era luchar contra el framework para poder modificar algunos estilos de los componentes. Buscando siempre selectores con más especificidad de los usados en el framework, que me permitieran cambiar los estilos a ciertas partes, o que mi css tuviera que crecer y crecer para poder personalizar los estilos que el framework aportaba.

Todo ello sin hablar de la mala optimización a la que condenas tu proyecto al usar estos frameworks, si es que no te lo curras para conseguir quedarte solo con las partes que necesitas y quitar el resto, que no siempre es tan fácil como podríamos creer.

Cómo conocí Tailwind CSS

Habitualmente uso Laravel como framework PHP para desarrollo web. Me parece un framework muy útil y sencillo de usar, pero no me gustaba demasiado el stack de tecnologías frontend que usaba hasta la versión 7. De hecho, con cada proyecto nuevo de Laravel lo primero que hacía era eliminar Bootstrap y VueJS para hacer mi propio CSS y usar Web Componente estándar en vez de componentes basados en una librería.

Entonces, me enteré de que Laravel iba a cambiar de Bootstrap a Tailwind y la verdad no esperaba que eso me hiciera cambiar la opinión que tenía, basada en los frameworks de diseño que ya conocía. Pero al estudiar Laravel 8 para usarlo en un nuevo proyecto decidí darle una oportunidad a Tailwind, para ver si me adaptaba. El resultado fue una grata sorpresa! En este artículo pretendo explicar por qué.

Clases de utilidad

Para captar las ventajas de Tailwind CSS hay que entender su enfoque de clases de utilidad. Básicamente consiste en que puedes crear cualquier estilo a cualquier elemento mediante un conjunto de clases sencillas y atómicas, que afectan a algo muy particular.

En Tailwind no hay tanto componentes como un ejército de clases de utilidad, que puedes usar para componer cualquier estilo. Los componentes los hace el desarrollador, bajo demanda para el proyecto en el que se encuentre y gracias a ello obtiene entre otras cosas versatilidad y diseños únicos.

Este enfoque de clases de utilidad ya está explicado en la categoría de Tailwind CSS. Si no lo entiendes te aconsejo su lectura. En cualquier caso, gracias a las clases de utilidad puedes mantener un control total sobre el sitio, algo que no consigues con otros frameworks CSS anteriores, como Bootstrap.

Para los que tenemos un control muy preciso de las CSS las clases de utilidad son un aliado, porque no nos obligan a aprender a hacer las cosas de nuevo. Algo tan sencillo para mi, como hacer un layout responsive, ya sea con grid o flex, y posicionar elementos de una manera radicalmente diferente para distintas anchuras de pantalla, lo puedo hacer en Tailwind usando los mismos conceptos y herramientas que manejo con CSS.

Personalización

Las clases de utilidad permiten personalización, a la hora de aplicarlas al diseño, para conseguir cualquier aspecto de un sitio web. Pero es que además, gracias a cómo está construido Tailwind, consigo también la posibilidad personalizar estas mismas clases.

Por ejemplo, TailwindCSS permite cambiar los nombres de las clases que sirven para hacer diseños adaptables (responsive) y agregar los breakpoints que sean necesarios para adaptarlos a cada proyecto. En otras palabras, es muy sencillo crear un breakpoint intermedio, entre dos saltos de los que ellos predefinen en el framework.

En resumen, gracias al archivo de configuración de Tailwind yo tengo absoluto control sobre qué clases de utilidad se generan, en número y variantes. Ajustando el generador de código CSS, es posible personalizar las clases de utilidad para agregar aquellas que nosotros necesitemos, para configurar colores, espaciados, saltos de mediaqueries, animaciones, etc.

Flujo más optimizado que otros frameworks

Estoy convencido de que los desarrolladores acostumbrados a Bootstrap encontrarán muchas ventajas al usar Tailwind. Para ilustrarlo usaré un ejemplo que seguramente os haya pasado.

Por ejemplo, tenemos un componente de acordeón o de lista en Bootstrap o Materialize. Entonces queremos que el margen sea tal o cual, en vez del configurado de manera predeterminada, o una negrilla en determinada anchura de pantalla. Lo que ocurre en muchos de estos casos es que te tienes que meter muy a fondo con el uso de selectores, para conseguir llegar a mandar sobre los estilos marcados por el framework. ¿No os ha pasado eso? A veces parece una lucha entre tú y el framework por llevarse un estilo determinado y acabas generando selectores locos para conseguir tus objetivos.

Esto no ocurre con Tailwind gracias a su enfoque de clases de utilidad. Como cada elemento tiene una serie de clases determinada y por separado, si algo no nos interesa en uno en concreto, simplemente quitamos esa clase y punto. No hay drama.

Además, Tailwind no te obliga a escribir más y más CSS, aparte de los componentes de base del framework, por lo que el peso de las hojas de estilo en cascada se mantiene siempre muy ajustado.

Es cierto que Tailwind te obliga a escribir más y más clases en tu HTML. Algo que con Bootstrap solucionabas con un "btn btn-primary", en Tailwind requiere colocar por lo menos media docena de clases muy específicas. En este sentido es una perversión aún mayor del paradigma de separación de contenido y presentación. Sin embargo, @apply viene al rescate en Tailwind CSS.

Optimización

Tailwind se usa mediante PostCSS y en el flujo de trabajo con este framework se incorporar numerosas herramientas para optimizar el código.

Al final, tu proyecto solamente tendrá el CSS que requiera, en función de las clases de utilidad que hayas usado en el código HTML o en tus templates. Esta optimización la veremos más adelante, en artículos sucesivos del Manual de Tailwind CSS.

Cómo Tailwind CSS ayuda a mitigar las desventajas de frameworks de diseño

Bueno, no dudo que un framework de diseño puede ofrecernos productividad en lo que respecta a la definición del aspecto, ya que no necesitamos editar el código CSS y el código HTML a la vez. Solamente añadiendo las clases adecuadas en el HTML conseguimos el objetivo, que es dejar la página bonita. En la medida que obtengamos experiencia, podremos alcanzar un mayor rendimiento.

Pero también veo algunas desventajas. La primera es ensuciar el HTML. El código HTML debería servir para especificar el contenido de las páginas y no la presentación. Con la declaración de tantas clases de utilidad estamos transfiriendo el peso de la presentación al mismísimo HTML, perdiendo la potencia que existe en la separación de contenido y presentación desde que tenemos CSS. Afortunadamente, Tailwind nos ofrece vías para mitigar esto. Estoy hablando de la directiva @apply, que abordaremos más adelante.

Frameworks CSS y Web Components

Finalmente, y esto lamentablemente no tiene solución, a mi me gusta usar Web Components, gracias a los cuales puedo construir botones, tarjetas, navegadores, listas... Muchos de los componentes de mis sitios web son Custom Elements, del estándar de Web Components.

En Web Components no siempre es posible o aconsejable basarse en estilos globales. Al contrario, usamos habitualmente estilos locales a cada componente, lo que nos permite una completa encapsulación y saber en qué lugar preciso están los estilos CSS que afectan a cada pieza del diseño.

Frameworks como Bootstrap o Tailwind CSS resultan de poca utilidad en componentes que usan Shadow DOM, ya que este marcado está completamente encapsulado.

Por eso considero importante que estos frameworks puedan optimizarse bien, como es el caso de Tailwind, para que no representen un peso muy representativo, más del imprescindible para los pocos estilos globales que pueda acabar usando en algunos proyectos.

Conclusión

Espero que esta disertación haya ayudado a más de uno a entender las ventajas, y las desventajas de los frameworks CSS y cómo Tailwind nos ofrece algunas mejoras con respecto a lo que antes había.

Después de tanto rollo, en el artículo siguiente cambiaremos al lado práctico, abordando algo tan importante como es la creación de componentes usando clases personalizadas y la directiva @apply de Tailwind CSS.