Search for a command to run...
Aprende qué es Tailwindcss y por qué deberías usarlo.
I'm a self-made indie developer, passionate about freedom and curiosity. Working in my own stuff from México, learning all the time, and eager to collaborate with the entire world. I'm learning to write (English and Spanish) so here I am.
No comments yet. Be the first to comment.
I was playing around with Qwik. The most insanely fast web framework out there. Yes, the most. And this is mainly because of the philosophy behind Qwik and its creator. Which you can read about here. An excellent read. If you ever liked Angular like ...
El método forEach() del Array, ejecuta la función que le provees una vez por cada elemento en el array.(Mdn docs). Básicamente, el método forEach es una de las mejores maneras para usar un ciclo en un array, es mucho más simple que usar un for(). Lo ...
Si eres un desarrollador front end seguro sabes que no deberías decirle JavaScript. También si te gusta estar actualizado(a) o si eres parte de la comunidad OSS (Open Source) seguro sabrás este grupo de datos, con lo que desde hace ya varios años les...
… Y ahora soy plenamente feliz.
Hablamos todo el tiempo de las buenas prácticas y estilos de código, pero pocas veces hablamos de las malas prácticas en las que inconscientemente caemos muy seguido. Por ello, quiero compartirte 3 malas prácticas en JavaScript que podría ser que no ...
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.
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.
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.
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:
El proceso de construcción del UI se acelera ¡masivamente!
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í.
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.
Lo anterior ofrece un mayor control y flexibilidad en tus componentes, mientras que otros frameworks CSS limitan lo que puedes cambiar de sus componentes.
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.
Ya no debes inventarte nombres ridículos para tus clases CSS 🤭
El archivo CSS resultante es absurdamente ligero y con muy pocas líneas de código, que además, estará minificado.
El "theme" que te ofrece es muy flexible y fácil de usar, que también te permite personalizar profundamente tus estilos y animaciones.
Está 100% orientado a mobile-first, lo que te asegura que tu sitio será responsivo.
Soporta los themes básicos dark y light de forma nativa.
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.