7 Utilidades de TailwindCSS que probablemente estás subutilizando
Deja de culpar a Tailwind por interfaces feas — simplemente estás ignorando estas joyas
¿Alguna vez has mirado tu interfaz recién construida y pensado: “¿Por qué esto aún parece Bootstrap de 2016, pero con menos degradados?”
Sí. He estado ahí, me he enfurecido por eso.
Cuando empecé a usar TailwindCSS, hice lo que todos hacen: abusé de flex, px-4, py-2, y quizás me puse creativo con rounded-lg.
Genial. Pero luego llegó la cruda verdad:
mi aplicación aún se veía aburrida, sin vida y —digámoslo claramente— como el proyecto apresurado de fin de semana de cualquier otro desarrollador.
Resulta que Tailwind tiene un cofre de utilidades que la mayoría de la gente nunca toca. Vamos a cambiar eso.
Aquí tienes 7 utilidades poco usadas pero ridículamente poderosas de Tailwind que pueden elevar tus diseños de “meh” a “¡oh, guau!” más rápido de lo que puedes escribir npm run dev .
Editado por mí
1. aspect-[] – Porque las imágenes distorsionadas son un crimen
Nada grita “sin pulir” como miniaturas deformadas.
Las utilidades aspect-w-* y aspect-h-* de Tailwind eran geniales, pero el moderno plugin aspect-[] (sí, ahora funciona muy bien) te permite usar aspect-[4/3] o aspect-[9/16] como un profesional.
<div class="aspect-[16/9] bg-gray-200">
<!-- Video o imagen aquí -->
</div>
Realidad: mantener las proporciones no es solo snobismo de diseñador.
Mantiene tu diseño equilibrado, tus imágenes nítidas y agradeces a tus usuarios móviles.
2. group y group-hover – El secreto de las microinteracciones
Los efectos de hover no son solo para botones.
¿Quieres cambiar el color de un elemento hijo cuando se pasa el ratón sobre el padre? group es tu nuevo mejor amigo.
<div class="group">
<button class="bg-blue-500 group-hover:bg-blue-700 text-white px-4 py-2 rounded">Pásame el ratón</button>
</div>
Es criminal lo poco que se usa esto.
Microinteracciones sutiles como esta separan las interfaces pulidas del resto.
3. line-clamp-* – Porque nadie lee tu blog completo de todas formas
Seamos realistas: los usuarios escanean.
Y si tus títulos o resúmenes se desbordan como una cascada, tu diseño sufre. line-clamp-* es increíblemente efectivo:
<p class="line-clamp-2">
Este es un título súper largo que debería detenerse después de dos líneas para mantener la tarjeta con buena apariencia.
</p>
¡Boom! Legible, elegante y tus tarjetas no explotan.
4. backdrop-blur-* – El efecto de vidrio esmerilado que olvidaste
Todos aman un buen efecto de glassmorphism — hasta que olvidan lo fácil que lo hace Tailwind.
<div class="backdrop-blur-sm bg-white/30">
<p class="text-white">Contenido frío</p>
</div>
Añade profundidad y modernidad al instante.
Y no, ya no necesitas cinco capas de CSS.
5. scroll-mt-* – Secciones de desplazamiento hechas correctamente
¿Alguna vez has anclado a una sección solo para descubrir que tu encabezado fijo la oculta?
scroll-mt-* al rescate:
<h2 id="features" class="scroll-mt-16">Características</h2>
Ahora, tu contenido realmente se muestra debajo del encabezado.
Magia de UX, impulsada por una utilidad diminuta.
6. prose (plugin de tipografía) – El Markdown nunca se vio tan bien
Deja de estilizar cada <p> manualmente.
Envuelve tu contenido Markdown en un contenedor prose:
<article class="prose lg:prose-xl">
<!-- Contenido Markdown aquí -->
</article>
Tipografía limpia y hermosa lista para usar.
Tus publicaciones de blog, documentación y notas de lanzamiento te lo agradecerán.
7. isolate y isolation-auto – ¿Pesadillas con z-index? Solucionadas.
¿Alguna vez te quedaste atrapado en guerras de z-index? Agregar isolate a tu contenedor crea un nuevo contexto de apilamiento, manteniendo tu modal, menú desplegable o tooltip en orden.
<div class="relative isolate">
<!-- Zona segura de contexto de apilamiento -->
</div>
No más superposiciones aleatorias. Solo capas limpias y predecibles.
Realidad: Las herramientas son inútiles si no las usas
Estas utilidades no son exóticas; están justo allí en la documentación.
Sin embargo, la mayoría de los desarrolladores se aferran a padding, margin y flex como si fuera 2019.
No hagas eso.
Un gran diseño no siempre se trata de CSS personalizado o animaciones complejas — se trata de conocer profundamente tu conjunto de herramientas.
Tailwind te da las herramientas. El resto depende de ti.
¿Me perdí tu utilidad favorita poco conocida?
¿Estás a punto de abusar de
line-clamp-2en todas partes?
Hagamos que la comunidad de Tailwind sea un poco menos aburrida — una utilidad poco usada a la vez.
Mantén la creatividad y no publiques interfaces feas.
Escrito por Daniel Scott
Desarrollador full stack con 8 años de experiencia, dedicado a ayudar a la gente a conseguir su trabajo soñado.
