Existen muchas herramientas en Tailwind que ignoramos, a veces porque ni siquiera las conocemos en CSS, pero al mismo tiempo cuando descubrimos estas herramientas dentro de Tailwind y las vamos a comparar con cómo se hace con CSS, resulta que Tailwind incluso las simplifica, y puedes comenzar a usarlas para mejorar tus estilos, sin esfuerzo. Por eso en este post vamos a explorar 3 herramientas escondidas de Tailwind ¡que valen mucho la pena!

Rings

Los anillos son poco comunes, pero cuando los utilizas adecuadamente pueden ser una ayuda visual muy útil para tu diseño.

<button className="ring-4 text-sm w-48 py-3 rounded-md font-semibold text-white bg-blue-500 m-2 text-center focus:outline-none" >
Esto es un anillo
</button>

Aquí el resultado

Aprende más sobre los anillos aquí

Animaciones

Tailwind no invierte demasiado en animaciones, pero las básicas que incluye son absolutamente útiles, nosotros, en Fixtergeek, ocupamos varias para crear elementos de carga o de rebote muy simples pero vistosos.

<button  type="button"  class="flex m-4 cursor-not-allowed items-center gap-2 rounded-md bg-purple-600 px-4 py-2 font-medium text-white">
<div  class="h-5 w-5 animate-spin rounded-full border-4 border-l-pink-500"></div>
Cargando
</button>

Aquí el resultado

Aprende más sobre las animaciones aquí

👀 ¡Ojo!, observa cómo con Tailwind puedes crear un elemento spinner a partir de un div simplemente modificando uno de sus bordes, y ponerlo a girar.

Space Between

Esto es algo que incluso en CSS no usamos tan seguido como deberíamos. Podemos configurar el espaciado entre los elementos de un contenedor flex con space-x- mira:

<div  class="flex space-x-6 space-y-8">
	<div  class="h-24 w-24 bg-violet-500"></div>
	<div  class="h-24 w-24 bg-violet-500"></div>
	<div  class="h-24 w-24 bg-violet-500"></div>
	<div  class="h-24 w-24 bg-violet-500"></div>
</div>

Esto es muy similar a gap, pero con posibilidad de configurar valores diferentes para x y y

Aquí el resultado

Aprende más sobre space aquí

Conclusión

Estas son solo algunas de las muchas herramientas escondidas de Tailwindcss, Tailwind te ayuda inmensamente a llevar tus interfaces del diseño a la vida más rápido, si este contenido te gusta, porfa no dudes en revisar nuestros otros post sobre Tailwind y claro, ¡decirnos que te gusta más, en nuestro Twitter!

Abrazo. Bliss.