¿Alguna vez te has sentido abrumado por escribir CSS personalizado para cada nuevo proyecto? Tailwind CSS está aquí para cambiar eso. Como un marco de CSS orientado a utilidades-primero, Tailwind hace posible a los desarrolladores construir interfaces de usuario personalizadas sin el problema de comenzar desde cero.
Tailwind es fácil de usar y tiene documentación comprensiva, pero leerla completa puede llevar algún tiempo.
Entonces, exploremos algunas joyas ocultas que Tailwind tiene para ofrecer:
1. Espacio Entre
Documentación de Tailwind: Space BetweenExternal Link
Las utilidades space-x-* and space-y-* permite agregar espaciado uniforme en los hijos de un contenedor, horizontal o verticalmente. Crean espacio entre elementos igual que grid o flex pero sin la necesidad de usarlos.
Por ejemplo, si tenemos 2 piezas de texto y un título, y queremos agregar un espacio uniforme alrededor de ellos, solo tenemos que agregar space-y-4 en el contenedor padre.
Espacio de la última frontera
<div className="px-4 space-y-4"> <h4 className="font-semibold text-foreground">Espacio de la última frontera</h4> <p className="text-foreground"> El espacio es completamente silencioso porque carece de una atmósfera que transmita el sonido, lo que crea un profundo silencio para los astronautas en paseos espaciales. A pesar de su vacío, el espacio tiene un olor único; Los astronautas lo describen como similar a un filete chamuscado o a vapores de soldadura, insinuando una atmósfera cósmica con partículas que puedan evocar estos olores. </p> <p className="text-foreground"> El tiempo mismo se comporta de manera diferente en el espacio debido a la curvatura del espacio-tiempo alrededor de masas masivas. objetos como planetas y estrellas, afectando el paso del tiempo en relación con la Tierra. </p> </div>html
2. Tipo de Ajuste de Desplazamiento
Documentación de Tailwind: Scroll Snap AlignExternal Link
Esta utilidad asegura que, a medida que nuestros usuarios se desplazan por el contenido, la vista se ajuste directamente a un punto o elemento específico.
Para implementarlo, simplemente aplica snap-x o snap-y a tu contenedor y luego, usa snap-center, snap-start, o snap-end en los hijos para controlar su posición de ajuste.
Es útil para crear carruseles, galerías o simplemente mejorar la experiencia de desplazamiento del usuario.
import Image from "next/image"; <div className="py-2 flex snap-x items-center gap-4 overflow-x-scroll rounded-md"> <div className="w-80 shrink-0 snap-center rounded-full"> <Image alt="arquitecture" src="blogposts/tailwind/tailwind-tips-and-tricks/arquitecture.webp" /> </div> <div className="w-80 shrink-0 snap-center rounded-full"> <Image alt="forest" src="blogposts/tailwind/tailwind-tips-and-tricks/forest.webp" /> </div> <div className="w-80 shrink-0 snap-center rounded-full"> <Image alt="hamburguer" src="blogposts/tailwind/tailwind-tips-and-tricks/hamburguer.webp" /> </div> <div className="w-80 shrink-0 snap-center rounded-full"> <Image alt="beach" src="blogposts/tailwind/tailwind-tips-and-tricks/beach.webp" /> </div> </div>tsx
3. Ancho de división
Documentación de Tailwind: Divide WidthExternal Link
A veces, los elementos en una lista o elementos en un grupo de botones parecen fusionarse entre sí. El divide-width de Tailwind facilita tu vida cuando se trata de estilar anchos de bordes entre diferentes elementos, al agregar separadores con estilo entre tus elementos fácilmente.
Imagina que tenemos un grupo de botones y queremos que cada uno se destaque por sí mismo agregando una línea sutil entre ellos. Un ejemplo podría ser grupos de botones como este:
<nav className="grid grid-cols-3 divide-x divide-blue-200 overflow-hidden rounded-md"> <button className="p-2 hover:bg-accent">Inicio</button> <button className="p-2 hover:bg-accent">Acerca de</button> <button className="p-2 hover:bg-accent">Entrar</button> </nav>html
4. Size
Documentación de Tailwind: SizeExternal Link
Esta utilidad establece el ancho y el alto al mismo tiempo. Es útil si necesitas una forma cuadrada o circular.
<div className="grid grid-cols-3 gap-2"> <div className="size-20 rounded-md bg-indigo-500 text-center">size-20</div> <div className="size-28 rounded-md bg-indigo-500 text-center">size-28</div> <div className="size-36 rounded-md bg-indigo-500 text-center">size-36</div> </div>html
También podemos usar size-full para ayudar a establecer el ancho y alto de un elemento para que sea el 100% del ancho y alto del contenedor principal.
<div className="h-12 w-full"> <div className="size-full rounded-md bg-indigo-500 text-center">size-full</div> </div>html
5. Line Clamp
Documentación de Tailwind: Line ClampExternal Link
La abrazadera de línea es especialmente útil si tenemos una pared de texto y solo queremos mostrar un número específico de líneas a la vez y agregar algunos puntos suspensivos al final.
<div className="line-clamp-2"> Las abejas se comunican entre sí mediante una danza llamada "danza del meneo". ellos usan esto baila para decirle a sus compañeras abejas sobre la dirección y la distancia de las flores donde pueden encontrar néctar y polen. Las abejas tienen un excelente sentido de orientación y pueden encontrar el camino de regreso a su colmena desde hasta 13 kilómetros (8 millas) de distancia. Las abejas juegan un papel crucial en lapolinización plantas, incluidos muchos cultivos de los que dependen los seres humanos para alimentarse. Se estima que untercio de Los alimentos que consumimos cada día dependen de la polinización principalmente de las abejas. </div>html
6. Truncate
Documentación de Tailwind: TruncateExternal Link
De manera similar a la abrazadera de línea, truncar evita que el texto se ajuste y trunca el texto desbordado con puntos suspensivos si es necesario.
<div className="truncate"> Una colonia de abejas consta de una reina, muchas obreras (hembras) y, durante ciertos períodos, zánganos (machos). La reina puede poner hasta 2000 huevos por día durante la temporada de reproducción. Las abejas producen miel a partir del néctar de las flores. Una sola abeja producirá sólo alrededor de 1/12 cucharadita de miel durante su vida, pero una colmena puede producir hasta 65 libras de miel por año. </div>html
7. Color de Acento
Documentación de Tailwind: Accent ColorExternal Link
Si quieres estilizar los colores predeterminados del navegador de entradas como casillas de verificación, podemos hacerlo utilizando colores de acento.
Si alguna vez quisiste marcar rápidamente tus casillas de verificación, botones de radio o cualquier elemento de entrada con tus colores distintivos. La utilidad accent-color de Tailwind nos permite estilizar nuestros elementos de formulario con nuestra paleta de marca, alineándolos instantáneamente con tu tema de diseño.
<div className="flex h-12 w-32 items-center justify-center gap-2 rounded-md"> <input className="h-10 w-10 accent-violet-400" type="checkbox" /> <input name="tailwind" className="h-10 w-10 accent-violet-400" type="radio" /> <input name="tailwind" className="h-10 w-10 accent-violet-400" type="radio" /> </div>html
8. Color del Cursor
Documentación de Tailwind: Caret ColorExternal Link
El cursor parpadeante en un campo de texto puede parecer insignificante, pero es otra oportunidad para mostrar nuestra marca. Con la utilidad caret-color de Tailwind, podemos cambiar el cursor a cualquier color en la paleta de Tailwind, asegurando que incluso los detalles más pequeños coincidan con tu estilo.
Este toque sutil puede hacer que tus entradas de texto se sientan más integradas con el resto de tu interfaz.
<div className="rounded-md"> <textarea rows={2} className="w-full rounded-md border p-2 caret-violet-800 focus:outline focus:outline-violet-800" placeholder="123" /> </div>html
9. Paradas de Color Gradiente
Documentación de Tailwind: Gradient Color StopsExternal Link
Los gradientes, si no estás familiarizado, son colores que se desvanecen en diferentes colores. Se pueden utilizar para crear fondos hermosos, textos o incluso gradientes de borde.
Puedes dirigir tu gradiente (to-r, to-l, etc.), elegir tus colores de inicio (from-{color}), medio (via-{color}) y final (to-{color}). Agrega porcentajes a estas clases con transiciones vibrantes o sutiles. Aquí tienes un fragmento para comenzar:
<div className="rounded-md"> <div className="h-12 w-full rounded-md bg-gradient-to-r from-indigo-300 from-30% via-blue-300 via-60% to-violet-300 to-90%"></div> </div>html
10. Animaciones
Documentación de Tailwind: AnimationExternal Link
Ya sea un spinner de carga, una notificación pulsante o un botón que rebota, Tailwind viene cargado con utilidades de animación fáciles de usar como animate-spin, animate-pulse, animate-bounce y animate-ping, transformando elementos estáticos en elementos dinámicos. Veamos cómo podemos implementarlos:
import { BellRing } from "lucide-react"; <span className="relative flex h-12 w-12"> <span className="absolute right-0 top-0 h-3 w-3 animate-ping rounded-full bg-red-400 opacity-75 "></span> <span className="sr-only">Notificaciones</span> <BellRing className="h-12 w-12" /> </span>tsx
11. Lectores de Pantalla
Documentación de Tailwind: Screen ReadersExternal Link
Esta utilidad ayuda a ocultar visualmente elementos de la pantalla pero manteniéndolos accesibles para los lectores de pantalla. Esto asegura que tus iconos y controles hablen, incluso cuando están fuera de la vista.
Esto es especialmente útil para botones o enlaces que solo contienen íconos, donde la señal visual es clara para los usuarios videntes pero quienes usan lectores de pantalla la pasarían por alto. Al agregar sr-only a sus etiquetas de texto, se asegura de que su sitio sea más inclusivo y accesible para todos. He aquí un ejemplo:
import { CircleUserRound, Home, UploadCloud } from "lucide-react"; <div className="flex w-full items-center justify-between overflow-hidden rounded-md border"> <button className="p-2 hover:bg-accent"> <Home className="h-6 w-6" /> <span className="sr-only">Inicio</span> </button> <div className="flex gap-4"> <button className="p-2 hover:bg-accent"> <CircleUserRound className="h-6 w-6" /> <span className="sr-only">Perfil</span> </button> <button className="p-2 hover:bg-accent"> <UploadCloud className="h-6 w-6" /> <span className="sr-only">Subir</span> </button> </div> </div>tsx