Aprender las utilidades esenciales de TailwindCSS es fundamental para dominar el framework y crear interfaces de usuario modernas y responsivas de manera práctica y rápida.
TailwindCSS utiliza breakpoints para aplicar estilos específicos en diferentes tamaños de pantalla. Estos breakpoints se basan en una escala de ancho que va desde 40rem (640px) hasta 96rem (1536px), dividiéndose en cinco puntos clave:
| Breakpoint | Prefijo | Mínimo ancho | CSS |
|---|---|---|---|
| sm | sm: | 40rem (640px) | @media (width >= 40rem) { ... } |
| md | md: | 48rem (768px) | @media (width >= 48rem) { ... } |
| lg | lg: | 64rem (1024px) | @media (width >= 64rem) { ... } |
| xl | xl: | 80rem (1280px) | @media (width >= 80rem) { ... } |
| 2xl | 2xl: | 96rem (1536px) | @media (width >= 96rem) { ... } |
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Mi Botón
</button>Botón azul con texto blanco, negrita, padding y bordes redondeados que oscurece al pasar el ratón.
bg-blue-500: Fondo azul (nivel 500).hover:bg-blue-700: Cambia a azul oscuro al pasar el ratón (nivel 700).text-white: Color del texto blanco.font-bold: Texto en negrita.py-2: Relleno vertical de 2 unidades.px-4: Relleno horizontal de 4 unidades.rounded: Bordes redondeados.<div class="bg-white p-6 rounded-lg shadow-xl">
<h2 class="text-xl font-semibold mb-2">Título</h2>
<p class="text-gray-600">Contenido de la tarjeta</p>
</div>Tarjeta blanca con padding, bordes redondeados, sombra, título destacado y texto descriptivo en gris.
bg-white: Fondo blanco.p-6: Relleno en todos los lados.rounded-lg: Bordes grandes redondeados.shadow-xl: Sombra grande.<div class="border border-red-500 p-4 rounded">
Caja con borde rojo
</div>Caja con borde rojo, padding interno y esquinas redondeadas.
border: Aplica un borde sólido de 1px en todos los lados del elemento.border-red-500: Cambia el color del borde a rojo (nivel 500) dentro de la escala de Tailwind.p-4: Agrega padding (relleno interno) de 1rem (16px) en todos los lados del elemento.rounded: Aplica bordes redondeados con un radio pequeño por defecto.<a href="#" class="text-blue-500 hover:underline">
Ir a la documentación
</a>Enlace azul que se subraya al pasar el ratón.
text-blue-500: pinta el texto de azul (nivel 500).hover:underline: subraya el texto al pasar el ratón.<h1 class="text-4xl font-extrabold text-gray-800">Bienvenido a la guía</h1>Título grande en gris oscuro con fuente muy gruesa (extra bold).
text-4xl: Tamaño de fuente extra grande.font-extrabold: Peso de la fuente extra-bold.text-gray-800: Color del texto gris oscuro (nivel 800).<p class="text-base text-gray-600 leading-relaxed">
TailwindCSS es un framework de utilidades muy útil para crear diseños rápidos.
</p>Párrafo de tamaño base, color gris medio y con interlineado relajado para mejor lectura.
text-base: Tamaño de fuente por defecto.text-gray-600: Color del texto gris.leading-relaxed: Espaciado entre líneas relajado.<p class="uppercase tracking-widest text-xs text-blue-500">Etiqueta</p>Etiqueta en mayúsculas, muy pequeña, con espaciado amplio entre letras y color azul.
uppercase: Transforma el texto a mayúsculas.tracking-widest: Aumenta el espaciado entre letras.text-xs: Tamaño de fuente extra-pequeño.text-blue-500: Color del texto azul con nivel de 500.<p class="text-xs">Muy pequeñita</p>
<p class="text-sm">Pequeña</p>
<p class="text-base">Normalita (default)</p>
<p class="text-lg">Más grandecita</p>
<p class="text-xl">Grande</p>
<p class="text-2xl">Más grande</p>
<p class="text-4xl">Gigante</p>
<p class="text-6xl">Póster de concierto</p>Resumen práctico de los tamaños text-* más comunes.
<p class="font-thin">thin</p>
<p class="font-light">light</p>
<p class="font-normal">normal</p>
<p class="font-medium">medium</p>
<p class="font-semibold">semibold</p>
<p class="font-bold">bold</p>
<p class="font-extrabold">extra bold</p>
<p class="font-black">black</p>Listado de clases font-* para controlar grosor tipográfico.
<div class="w-64 bg-blue-200 p-4 rounded">
Caja con ancho fijo de 16rem (256px)
</div>Caja azul claro con ancho fijo, padding interno y bordes redondeados.
w-64: fija el ancho a 16rem (256px).bg-blue-200: color de fondo azul claro.p-4: padding interno de 1rem (16px).rounded: bordes redondeados.<div class="m-8 p-4 bg-gray-100">Caja con margen y relleno</div>Caja con margen externo amplio, padding interno y fondo gris claro.
m-8: agrega un margen externo de 2rem (32px) en todos los lados.p-4: agrega un padding interno de 1rem (16px) en todos los lados.bg-gray-100: aplica un fondo gris muy claro.<img src="ejemplo.jpg" class="w-64 h-auto mx-auto rounded-lg shadow-md">Imagen centrada, con ancho fijo, altura proporcional, bordes redondeados y sombra media.
w-64: ancho fijo de 16rem (256px).h-auto: ajusta la altura automáticamente manteniendo la proporción.mx-auto: centra la imagen horizontalmente.rounded-lg: aplica bordes redondeados grandes.shadow-md: agrega una sombra de tamaño medio.<div class="space-y-4">
<p>Elemento 1</p>
<p>Elemento 2</p>
<p>Elemento 3</p>
</div>Contenedor con varios elementos apilados verticalmente y separados por un espacio uniforme.
space-y-4: agrega un espacio vertical de 1rem (16px) entre los elementos hijos.
p- (todos), pt- (top), pb- (bottom), pl- (left), pr- (right).m- (todos), mt-, mb-, ml-, mr-, mx- (left+right), my- (top+bottom).<div class="p-4">Caja con padding</div>
<div class="pt-2 pb-6">Padding arriba y abajo</div>
<div class="mx-auto mt-10">Centrado con margen</div>0→0px, 1→4px, 2→8px, 3→12px, 4→16px, 5→20px, 6→24px, 8→32px, 10→40px, 12→48px, 16→64px, 20→80px
<div class="w-20 h-20 bg-blue-500"></div> <!-- 80x80 -->
<div class="w-full h-screen bg-gray-200"></div> <!-- ancho total + alto pantalla --><p class="hidden md:block text-green-600">Texto visible solo en pantallas medianas o más grandes</p>Párrafo verde que está oculto en pantallas pequeñas y solo aparece en pantallas medianas o más grandes.
Aquí el párrafo se oculta en pantallas pequeñas y se muestra solo a partir de pantallas medianas (≥768px), con texto en color verde.
hidden: oculta el elemento por defecto.md:block: muestra el elemento como bloque en pantallas medianas (≥768px) y superiores.text-green-600: aplica un color de texto verde (nivel 600).sm (≥640px): celular horizontalmd (≥768px): tabletlg (≥1024px): laptopxl (≥1280px): pc grande2xl (≥1536px): monitor grande<p class="text-base sm:text-lg md:text-xl lg:text-2xl xl:text-4xl">
Cambia según la pantalla
</p>