Todo mundo habla de Tailwindcss, pero, ¿Qué es Tailwind?

Todo mundo habla de Tailwindcss, pero, ¿Qué es Tailwind?

Aprende qué es Tailwindcss y por qué deberías usarlo.

Play this article

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 bootstrap es simplemente un set de componentes muy poco optimizados que aumentan el tamaño de tu sitio web y que son muy poco 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. Una manera de hacer CSS, "utility-first" que te permite construir interfaces de usuario a supervelocidad, sin tener que preocuparte por administrar y mantener decenas de archivos o cientos de clases CSS, y sin dejar el archivo HTML en el que estás trabajando. Es configurable y personalizable por medio de "themes" que lo hacen en extremo flexible.

¿Qué es utility-first?

Hay muchas definiciones allá afuera, pero la definición que quiero dibujarte para que lo entiendas de forma más simple, que las clases que Tailwindcss te ofrece para tu usarlas están orientadas a una sola propiedad CSS (algunas son un pequeño grupo de propiedades 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, solo las que realmente se están ocupando, aligerando con esto increíblemente el peso del CSS resultante.

10 Ventajas al usar Tailwindcss:

Tengo un par que he experimentado este último año que me di la oportunidad de usarlo en más de 4 proyectos de clientes y también en Fixtergeek.com:

  1. El proceso de construcción del UI se acelera ¡masivamente!

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

  3. Es un framework de bajo nivel, esto quiere decir que en vez de ofrecer componentes como botones o cards como lo hace Bootstrap o Materialize, 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.

  6. Ya no debes inventarte nombres ridículos para tus clases CSS 🤭

  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 te ofrece es muy flexible y fácil de usar, que también te permite personalizar profundamente tus estilos y animaciones.

  9. Está 100% orientado a mobile-first, lo que te asegura que tu sitio será responsivo.

  10. Soporta los themes básicos dark y light de forma nativa.

Conclusión

Si Tailwindcss te ha generado curiosidad, te recomiendo que la explores, que intentes utilizarlo y te des 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.

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

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

  • Puedes también probarlo directamente en un archivo HTML sin configurar con su CDN: <script src="https://cdn.tailwindcss.com"></script>

¡Y ya está!, si lo pruebas no olvides contarme cómo te fue y que opinas, siempre puedes contactarme en mi Twitter.

Abrazo. Bliss.

Did you find this article valuable?

Support Héctor BlisS by becoming a sponsor. Any amount is appreciated!