
Mira el video si prefieres:
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.

¿Por qué deberías usar Cloudflare workers?
Checa este otro Post
