No, Tailwindcss no es como bootstrap. La principal diferencia entre los dos es que Tailwind está orientado a utilidades que reducen el peso y el volumen del CSS que usas en tu sitio web, por medio de una compilación. Mientras que bootstrap es simplemente un set de componentes, tokens y muchas clases abarrotadas de !important, muy poco optimizados, que aumentan el tamaño de tu sitio web y que son muy poco o nada configurables.

En este pequeño artículo intentaré explicarte brevemente en qué consiste Tailwind y cuáles son los beneficios que obtendrás con él.

¿Qué es Tailwind, pues?

Tailwindcss es un framework y un design-system a la vez.

Una manera de hacer CSS, "utility-first" con la que puedes construir interfaces de usuario a supervelocidad.

No tienes que preocuparte por administrar y mantener decenas de archivos o cientos de clases CSS, tampoco tienes que dejar el archivo HTML en el que estás trabajando.

Tailwind es también una herramienta configurable y personalizable por medio de "themes" que lo hacen en extremo flexible.

¿Oye, pero, Qué es utility-first?

Hay muchas definiciones allá afuera, pero la definición que quiero darte para que lo entiendas de forma más simple, es que:

Las clases que Tailwindcss te ofrece, están orientadas a una sola propiedad CSS (algunas son un pequeño grupo de propiedades CSS que suelen trabajar juntas).

Un ejemplo de esto es cualquiera de sus utilidades de texto:

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

Esto resulta en dos utilidades que apuntan a dos atributos específicos:

.text-xl {
    font-size:1.25rem;    
}

.font-bold{
    font-weight:bold;
}

Tailwind detecta estas utilidades en tu HTML y las agrega al único archivo CSS resultante.

Lo mejor de esto es que Tailwind solo agregará las utilidades que estés empleando en tu HTML, de esta forma, no estás forzada a incluir todas las utilidades en tu aplicación, solo las que realmente se están ocupando, aligerando con esto increíblemente el peso del CSS resultante.

Esto trae muchas ventajas, te voy a enlistar solo 10 ✅:

He experimentado este último año con Tailwind, me di la oportunidad de usarlo en más de 4 proyectos de clientes y también en Fixtergeek.com en 2022:

1- La mayor ventaja para nosotros en Fixtergeek es, que el proceso de construcción del UI se acelera ¡masivamente!, al no perder tiempo interpretando clases o creando archivos de estilos. ⚡️

2- Al ser un framework orientado a "utility-first", nos permite olvidarnos de mantener archivos CSS para poseer solo 1 para el sitio entero, sin preocuparnos por crear clases con nombre superconfusos que se sobreescriben entre sí o tener que ¡crear un archivo CSS por componente! 😰

3- Es un framework de bajo nivel, esto quiere decir que en vez de ofrecer componentes como botones o cards como lo hace Bootstrap, Materialize e incluso ChakraUI, Tailwind te ofrece "utility classes" para que puedas producir tus propios componentes. 🍱

4- Lo anterior ofrece un mayor control y flexibilidad en tus componentes, mientras que otros frameworks CSS limitan lo que puedes cambiar de sus componentes. ⛔️

5- El punto anterior resulta en un sitio web único con componentes únicos y más originales, con total control y libertad en el diseño. Esto también te permite concentrarte en mejorar tus buenas prácticas de diseño en general. 😎

6- Ya no debes inventarte nombres ridículos para tus clases CSS (.embed-responsive-container__header_container__first_child-4by3) 🤭

7- El archivo CSS resultante es absurdamente ligero y con muy pocas líneas de código, que además, estará minificado. 🪶

8- El "theme" que Tailwind te ofrece es muy flexible y fácil de usar, también te permite personalizar profundamente tus estilos y animaciones. 🪐

9- De la mano del punto anterior, siempre puedes ir directamente al archivo CSS que Tailwind utiliza para generar el resultante, y agregar selectores o animaciones específicas que necesites, o código CSS que uses regularmente y quieres reutilizar. 💾

10- Está 100% orientado a mobile-first, lo que te asegura que tu sitio será responsivo, además resulta más fácil que poner media-queries. 📲

11- Soporta los themes básicos dark y light de forma nativa. 🌗

Espera, ¡dijimos 10 nada más, agárrenme que le sigo! 🤩

Conclusión

Si Tailwindcss te ha generado curiosidad, te recomiendo que lo explores, déjate llevar y pruébalo, intenta utilizarlo y date una vuelta por su documentación.

Tailwind necesita de una pequeña configuración, pero vale la pena, ya que puedes emplearlo con o sin framework front end. Checa este video

Tailwind también te ofrece un par de formas amigables para explorarlo:

Puedes jugar con Tailwind en https://play.tailwindcss.com/

También puedes probarlo directamente en un archivo HTML sin el paso de compilación con su CDN: <script src="https://cdn.tailwindcss.com"></script> (esto solo para explorar, no para producción 😉)

¡Y ya está!, ✅ si lo pruebas no olvides contarme cómo te fue y que opinas.

Siempre puedes contactarme en mi Twitter.

Abrazo. Bliss.