6 Super-utlidades de Tailwindcss que amarás

Feb 2, 2021.

Tailwindcss es un framework CSS bajo el concepto de utility-first y ofrece las herramientas para que construyas tu propios componentes css. Por supuesto los mismos autores tienen Tailwindui un paquete con más de 300 componentes de pago.

Independiente del debate sobre si clases vs utility CSS Utility Classes and "Separation of Concerns" Tailwindcss ya es un hecho, viene con fuerza y sin parar. Puedes ignorarlo y sequir con Bootstrap o echarle un vistazo y tener una nueva herramienta css alternativa, realmente no son excluyentes.

1 - Diseño responsivo en clases

El diseño responsivo con Tailwind es una gozadera. Primero tienes definidos 5 breakpoint acorde a los diferentes dispositivos:

  • sm → 640px
  • md → 768px
  • lg → 1024px
  • xl → 1280px
  • 2xl → 1536px

Para que una estilo se aplique en ciertos dispositivos solo tienes que usar el breakpoint como prefijo a la clase en cuestión. El diseño es mobile-first y si quiero que un texto incremente de tamaño en cada tamaño de pantalla tendria que definir class="text-sm md:text-normal lg:text-lg".

Se puede aplicar a todas las clases de tailwind y no tienes que definir una clase para cada breakpoint, solo donde lo necesites.

<img class="w-16 md:w-32 lg:w-48 lg:bg-green-200 md:text-gray-900" src="..." />

Para verlo en funcionamiento puedes modificar el tamaño del browser y ver los cambios del siguiente card.

Man looking at item at a store
Case study
Finding customers for your new business

Getting a new business off the ground is a lot of hard work. Here are five ideas you can use to find your first customers.

2 - Gradientes

Ahora que es moda usar gradientes en cualquier parte es muy fácil con Tailwind solo debes agregar la clase el tipo de gradiente bg-gradient-to-t y definir los color de inicio from-, medio via- y final to-

<button
class="
px-8 py-3
radius-lg
bg-gradient-to-r
from-purple-400
via-pink-500
to-red-500
"

>

Botón con grandientes
</button>

Con pseudo-clase

Puedes usar los gradientes con una pseudo-clase como hover o focus solo antecediendo la clase de los gradientes con el prefijo hover: o focus:.

<button
class="
px-8 py-2
bg-gradient-to-r
from-purple-400
to-red-500
hover:from-blue-400
hover:to-indigo-500
"

>

Botón con grandientes
</button>

Texto con gradientes

El texto con gradientes se basa en un truco. Se define el gradiente al fondo del texto y luego se aplica un clip bg-clip-text text-transparent bg-gradient-to-r from-green-400 to-blue-500

Hello world
<div class="flex justify-around py-8">
<div class="text-center text-5xl font-extrabold leading-none tracking-tight">
<span
class="bg-clip-text text-transparent bg-gradient-to-r from-green-400 to-blue-500"
>

Hello world
</span>
</div>
</div>

3- Transiciones

Podemos manipular las trasiciones CSS mucho más cómoda, si anteriormente no te atrevias a meterte con ellas, ahora es casi un juego. Llegas a entender que cada cambio de estilo debe llevar una trasición y dominar las transiciones hará que tu sitio web luza mucho más profesional.

Puedes manipular la duración de la trasición duration-100, duration-150, ..., duration-1000, la función ease-linear,ease-in, ease-out, ease-in-out y el retraso

<button
class="
transition
duration-500
ease-in-out

transform hover:-translate-y-1
hover:scale-110
bg-blue-600
hover:bg-red-600
text-white
font-semibold
py-3 px-6
rounded-md
"

>

Botón con transición
</button>

4- Animaciones

Tailwindcss ofrece 4 tipos de animaciones animate-spin, animate-ping, animate-pulse y animate-bounce

Spin

<button type="button" class="bg-rose-600 ..." disabled>
<svg class="animate-spin h-5 w-5 mr-3 ..." viewBox="0 0 24 24">
<!-- ... -->
</svg>
Actualizando Datos
</button>

Ping

Bounce

Pulse

5- Transformaciones

Ofrece cuatro tipos de tranformaciones: scale, rotate, translate y skew que las puedes aplicar sobre los componentes, lo habitual es conjugarlos con pseudo-clases o eventos como puede ser el hover:.

En este ejemplo se muestran tres de las tranformaciones sobre el hover de un botón. Realmente es muy divertido y las posibilidades son multiples.

<button
class="
transition
duration-500
ease-in-out

transform
hover:-translate-y-2
hover:rotate-6
hover:scale-125
hover:bg-red-600

bg-blue-600
text-white
font-semibold
py-3 px-6
rounded-md
"

>

Botón Transformer
</button>

También puedes controlar el origen de la tranformación, el ejemplo anterior con el origin-left

6- Modo Oscuro

Pronto tener una version de estilo en modo oscuro será un obligación, así que definir estos estilos de modo fácil y rápido es muy importante.

Tailwind hace esto de forma muy natural, incluye una variante dark: que se usa para definir los estilos cuando está activo el modo oscuro. Todas las clases de pueden definirse en modo oscuro.

<div class="bg-white dark:bg-gray-800">
<h1 class="text-gray-900 dark:text-white">Dark mode is here!</h1>
<p class="text-gray-600 dark:text-gray-300">Lorem ipsum...</p>
</div>

Conclusiones

Esto es solo un vistazo a TailwindCSS, yo espero que habrán grandes cambios en la forma de ver el css y sus framworks. Si te interesó un poquito pues coge impulso revisa la ayuda que esta buenísima y pruebalo en tu próximo proyecto. Tailwindcss ya tiene tutoriales para la instalación con los framework más representativos: next, nuxt, react, gatsby, laravel.

Si quieres probar y jugar un ratos con Tailwindcss puedes utilizar su Playground. Hay muchos recursos y cada día salen nuevas ideas y proyectos.

Nos vemos en la próxima aventura y si te gusta no seas tacaño y comparte.

Siguiente

Notas Javascript contra el olvido

Anterior

Utiliza Github como base de datos II