Introducción a Tailwind ✅

Tailwind es más que un sistema de diseño, es una metodología de trabajo, un mindset, una forma de pensar, no se trata de dejar de utilizar CSS sino de la forma de optimizar, el uso de CSS.

El término “utilidades primero” (utility-first) consiste en componer estilos complejos con clases atómicas directamente en el HTML, antes que crear componentes.

// Utility classes

.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}

.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

// algunas más complejas, que dependen de variables
.grayscale {
  --tw-grayscale: grayscale(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

En este archivo CSS podemos ver que nuestras clases no representan objetos o componentes, si no la propia utilidad que aplican.

¿Pero, qué sería lo contrario de utility-first?

Lo que usamos más frecuentemente en nuestro CSS es un método llamado, component-first, que consiste en crear clases que representan la estructura de un componente*.*

<nav class="nav">
	<img class="nav-logo" src="..." alt="logo" />
	<div>
		<a href="#!" >Contacto</a>
		<a href="#!" class="nav-cta">Iniciar</a>	
	</div>
</nav>

Observa este componente, es una barra de navegación, las clases CSS que poseen representan la estructura y la jerarquía.

Este CSS se ve algo así:

.nav {
	display:flex;	
}

.nav div {
	display:flex;
}

.nav a {
	text-decoration:underline;
}

.nav .nav-cta {
	text-decoration:underline;
}

Cuando miramos el CSS de este componente, vemos que se describe perfectamente el maquetado HTML, está completamente acoplado.

Podemos decir entonces, que el CSS consume al HTML. 🧐 Mantén esto en mente. 🧠 🤏🏼

Ahora, probemos con utility-first

En vez de crear clases orientadas al componente con multiples propiedades, podemos crear clases atómicas, es decir, pequeñitas, que apliquen una sola propiedad de CSS o un pequeño grupo de propiedades que suelen usarse juntas.

.flex {
  display: flex;
}
.underline {
  -webkit-text-decoration: underline dotted;
	text-decoration: underline dotted;
}
.w-full {
  width: 100%;
}
.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}
.bg-blue-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
}

De esta forma se crea intencionalmente un catalogo de utilidades limitadas y controladas por un tema que además podemos modificar. Pero lo mejor, es que con esta técnica, invertimos el consumo.

Es ahora el HTML quien consume al CSS a través de clases que representan utilidades. 😃

Imagina que el HTML está sentado en un restaurante y le presentan una charola llena de postres espolvoreados con CSS, el HTML tomará el que más se le antoje. 🍽️ 🤤

<nav class="flex">
	<img class="w-full object-cover" src="..." alt="logo" />
	<div>
		<a class="underline" href="#!" >Contacto</a>
		<a class="underline bg-blue-500" href="#!" >Iniciar</a>	
	</div>
</nav>

Recuerda que estas utilidades ya existen en Tailwind, de hecho de eso se trata Tailwind, de emplear utilidades lo más universales posibles. para que todos las podamos memorizar más fácilmente. 🧠 

👀 Ahora puedes eliminar cualquier parte de este componente sin tener que preocuparte de borrar el CSS en absoluto. 🥳😃

Utility-first y después componentes

Esta metodología, te invita a agregar utilidades específicas hasta que reconozcas patrones repetidos y necesites un componente, por eso el nombre utility-first.

De esta manera se simplifican las vistas y se fomenta la creación orgánica de componentes. Pues es más fácil construir un componente con utilidades que revertir uno, hecho con component-first.

Pero bliss, el amontonadero de utilidades se ve feo

Es cierto, y este es uno de los argumentos más comunes en contra de la metodología utility-first pero, “no lo se Rick”.

Mira, hagamos memoria un poquito; ¿ubicas la metodología BEM, para escribir clases de CSS?

Block Element Modifier. Cuando se presentó esta metodología, la mayoría la rechazó casi de inmediato, sin embargo con el tiempo se convirtió en una de las metodología más empleadas en la web.

Esta metodología crea componentes que se ven algo así:

<nav class="nav">
	<img class="nav__img" src="..." alt="logo" />
	<div>
		<a class="nav__link" href="#!" >Contacto</a>
		<a class="nav__link-cta" href="#!" >Iniciar</a>	
	</div>
</nav>

O también así:

<figure class="photo">
  <img class="photo__img photo__img--highlighted" src="me.jpg">
  <figcaption class="photo__caption photo__caption--highlighted">Look at me!</figcaption>
</figure>

Así que sí, ya hace tiempo que toleramos esta sintaxis chistosa, no es nueva y hay una enorme cantidad de developers acostumbrados a esta sintaxis en todo el mundo, y personalmente, no creo que la de Tailwind sea más perturbadora, ¿o si?. Pero está bien, para eso hay variedad de metodologías, para que cada quien disfrute de la suya a su manera. 🏳️‍🌈 Pero ahora que sabemos cuál es la estrategia de Tailwind, veamos lo que dice su creador.

Hay que pensar en la dirección de la dependencia

O dependency direction, en palabras del creador de **Tailwind CSS, Adam Wathan y se refiere **a lo que nosotros ya analizamos antes. **

Se trata de invertir quien consume a quien*,* el HTML al CSS o viceversa.

Cuando comparamos la eficiencia de cada una de las direcciones de dependencia, encontramos que es mucho más eficiente que el HTML consuma al CSS.

🤯 Utility-first trae muchas ventajas como para ignorarlas

Entre las muchas ventajas que obtenemos al consumir CSS en forma de utilidades con Tailwind, se encuentran:

1. No tienes que cambiar de archivo, puedes trabajar solo en el HTML, incluso si solo estilizas.
2. Puedes pensar en CSS como si fuera una biblioteca, una colección limitada de herramientas de estilo, listas para usarse.
3. No tienes que preocuparte por actualizar o mantener ningún archivo CSS en todo el sitio**. Tailwind se encargará** de llevar las utilidades que uses en tu código al archivo resultante, las que ocupaste y nada más.
4. No mantienes representaciones de maquetado que se desactualizan de inmediato (CSS Legacy code).
5. Las utilidades de Tailwind no están anidadas, son de un solo nivel de profundidad, lo que le hace muy eficiente la lectura e interpretación al motor de CSS del navegador. Es decir, que los estilos de Tailwind son muy eficientes en el navegador. 🚈 ✅

Tailwind se ha convertido en una de las maneras más populares de administrar los estilos CSS de un sitio web.

No importar si estás trabajando del lado del servidor o del cliente, igual puedes utilizar Tailwind.

Uno de los beneficios más importantes de Tailwind para mi, es que facilita la colaboración entre los programadores y los diseñadores, gracias al Utility First Workflow que es muy fácil de leer.

👾 Pequeños ejemplos para entender mejor el Utility First Workflow.

Supongamos que queremos crear una clase para estilizar un título.

.heading {
	font-size: 36px;
	font-family: sans-serif;
	font-weight: 700;
}

<h2 class="heading" >Hola blissmo</h2>

Este sería el procedimiento común utilizando CSS únicamente. ¿Puede esto ser más simple?

Sí, en vez de ocultar lo que se está aplicando detrás del nombre de una clase semántica que se nos acaba de ocurrir: .heading, mejor, vamos a exponer las utilidades que se están aplicando con Tailwind.

<h2 class="font-bold text-4xl" ></h2>

Ahora podemos ver con claridad los estilos que a este elemento HTML se le aplican. Estamos consumiendo el CSS que necesitamos y ni siquiera necesitamos salir del archivo HTML. 🤯

Estas clases de Tailwind que representan una utilidad en específico cada una, hacen obvio, visible lo que se está aplicando a cierto nodo, lo que facilita mucho la lectura y la modificación por cualquier miembro del equipo, sin la necesidad de interpretar, buscar, investigar, leer y hacer sentido, de clases semánticas que pocas veces son semánticas. 👎🏼

La carga de trabajo cognitivo al colaborar con utilidades de Tailwind, es el mínimo.

Tailwind nos ahorra, la inmensa inversión de tiempo y el trabajo de asignación de sentido, que representa leer un archivo CSS o SASS, sobre todo, cuando alguien más lo escribió.

👀 font-family: sans-serif Es un default en Tailwind, por eso no necesitamos agregar ninguna utilidad.

🤓 En mi propia experiencia

Tailwind es la herramienta que no sabía que necesitaba.

Resolvió un problema que no sabía que tenía y este tipo de soluciones son las mejores. Porque te liberan de tareas que pensabas inevitables.

Durante mi carrera como programador profesional, he tenido la suerte de colaborar con multiples equipos de desarrollo, locales e internacionales y el punto débil de la mayoría, son los estilos. Las tareas que involucran la modificación de estilos puede tomar mucho tiempo y resultar en la creación de más clases “abstractas y originales” con tal de no tener que leer o entender las que ya existen. ¿Te suena? 😶‍🌫️

En estos casi 10 años como ingeniero de software he probado de todo con respecto a los estilos de un sitio web, pero sobre todo me he ocupado de responder la pregunta:

¿Cuál es la mejor herramienta para trabajar en equipo y no maldecir los estilos de los demás? 🧐

Siempre me pareció que escribir clases de CSS era una cosa muy artística, personal, llena de creatividad, pero luego aparecieron estas nomenclaturas y reglas BEM para escribir un CSS más escalable y que permiten una colaboración más eficiente, así que en vez de apreciar el arte de los demás, comenzamos a leernos las reglas unos a otros, cual dogma, nos perseguíamos para obligarnos a crear siguiendo las reglas, solo para descubrir que seguimos debugueando sin encontrar cuál es el CSS que falla. 😥

Parecía que no había solución a la pérdida de tiempo de leer el archivo CSS de alguien más, o peor, un archivo CSS Frankestein, hecho con pedazos y clases escritas por diversos miembros del equipo que ya ni siquiera son parte de la empresa desde hace años… 😰

¡Y puedo seguir he! Pero creo que ya sabes a qué me refiero. 🤓

Con Tailwind todos en el equipo hablamos el mismo idioma, no improvisamos, pues tenemos un theme muy útil a la mano donde están los colores de la marca y tokens, y tenemos también muchos defaults y buenas prácticas incluidas, además siempre es fácil personalizar a detalle, gracias a que Tailwind es una biblioteca CSS de bajo nivel.

Usar Tailwind este último año, me ha convertido en un programador frontend (cuando me toca serlo) más feliz. Y también ha facilitado mucho la colaboración con otros programadores y diseñadores, es bonito estar todos en la misma página y concentrarse en lo que se crea y no en los estilos. Con el mínimo tamaño en nuestro CSS, Tailwind no incluirá todas las utilidades en el archivo resultante, solo las que se utilizaron.

¿Genial no? 🤯

Tailwind CSS es fácil de usar, rápido de configurar y muy potente

Posee un ecosistema de plugins que nos permiten realizar tareas que de lo contrario, requerirían mucho esfuerzo y trabajo.

Como su plugin para formularios que nos ayuda con la personalización de todo tipo de inputs (te dejo un video).

Tailwind es soportado por todos los Frameworks web más populares como Next, Remix o Vite. Lo que lo vuelve muy portable. 🎒

¿Qué aprenderás en mi curso de Tailwind CSS?

En este curso aprenderás a configurar Tailwind CSS sin Framework y dentro de Vite, con lo mínimo necesario para comenzar a aprender sus utilidades, porque la sintaxis ya la conoces, solo son clases CSS. 🧩 😎

Vas a adquirir mucha velocidad en tu proceso de creación de interfaces.

Seguro te sorprenderá lo eficiente que te volverás a la hora de llevar tu diseño al código, lo que te libera para ser aún más creativa(o). 👩🏻‍🎨

Abrazo bliss.

Enlaces relacionados

Checa esta excelente charla de Sarah Dayan

https://youtu.be/R50q4NES6Iw

Tailwind Forms

https://youtu.be/tC1tpIpasuY