Tailwind CSS
Guía visual completa con ejemplos interactivos de cada utilidad. Todos los estilos están embebidos — sin dependencias de internet.
Utility-First
v3.x
Offline
Sin Build
1
Colores
bg-{color}-{shade} · text-{color}-{shade} · border-{color}-{shade}
Background Colors
bg-{color}-{shade}
blue
green
red
yelo
purp
pink
orng
teal
indy
class="bg-blue-500"
class="bg-green-500"
class="bg-red-500"
Las escalas van del 50 (más claro) al 950 (más oscuro). Ej: bg-blue-100, bg-blue-500, bg-blue-900.
Text Colors
text-{color}-{shade}
text-blue-400
text-green-400
text-red-400
text-yellow-300
text-gray-400
class="text-blue-400"
class="text-red-600"
2
Tipografía
text-size · font-weight · tracking · leading · transform · align
Font Size
text-{size}
text-xs — 12px
text-sm — 14px
text-base — 16px
text-lg — 18px
text-xl — 20px
text-2xl — 24px
text-3xl — 30px
class="text-xs"
class="text-base"
class="text-3xl"
Font Weight
font-{weight}
font-thin (100)
font-normal (400)
font-medium (500)
font-semibold (600)
font-bold (700)
font-extrabold (800)
font-black (900)
class="font-thin"
class="font-bold"
class="font-black"
Transform & Decoration
uppercase · italic · underline
uppercase + tracking-widest
LOWERCASE
capitalize each word
italic text
underline text
line-through text
class="uppercase tracking-widest"
class="italic underline"
class="capitalize"
Tracking & Leading
tracking-{x} · leading-{x}
tracking-tight: texto comprimido
tracking normal
tracking widest
leading-none: líneas muy juntas, el texto se superpone visualmente leading-loose: mucho espacio entre líneas del texto
leading-none: líneas muy juntas, el texto se superpone visualmente leading-loose: mucho espacio entre líneas del texto
class="tracking-widest"
class="leading-loose"
3
Espaciado
p-{n} · m-{n} · px · py · gap — escala: 1=.25rem, 4=1rem, 8=2rem
Padding
p · px · py · pt · pr · pb · pl
p-1
p-2
p-4
px-4 py-2
pt-6 pb-1
class="p-4" /* all sides */
class="px-6 py-2" /* x-axis / y-axis */
class="pt-8 pb-2" /* top / bottom */
Margin
m · mx · my · mt · mr · mb · ml
class="m-4"
class="mx-auto" /* centra horizontalmente */
class="mt-8 mb-4"
Gap
gap-{n} · gap-x · gap-y
A
B
C
gap-2
A
B
C
gap-4
class="flex gap-4"
class="grid grid-cols-3 gap-6"
Space Between
space-x-{n} · space-y-{n}
A
B
C
space-x-4
class="flex space-x-4"
class="flex flex-col space-y-2"
space-x-4 agrega margin-left:1rem a cada hijo excepto el primero.
4
Sizing
w-{n} · h-{n} · min-w · max-w · aspect-ratio
Width
w-{n} · w-full · w-auto · w-1/2
w-8
w-16
w-32
w-full
w-1/2
class="w-8" /* 2rem */
class="w-full" /* 100% */
class="w-1/2" /* 50% */
class="w-auto"
Height
h-{n} · h-screen · h-full
h-4
h-8
h-16
full
class="h-16" /* 4rem */
class="h-screen" /* 100vh */
class="h-full"
Aspect Ratio
aspect-video · aspect-square
16/9
1/1
class="aspect-video" /* 16/9 */
class="aspect-square" /* 1/1 */
5
Bordes
border · rounded · border-style · divide
Border Width
border · border-2 · border-4
border
border-2
border-4
border-t
border-b
class="border border-blue-500"
class="border-2 border-t-4"
class="border-l-2"
Border Radius
rounded-{size}
none
rounded
md
xl
full
class="rounded" /* .25rem */
class="rounded-lg" /* .5rem */
class="rounded-full" /* 9999px */
Border Style
border-dashed · border-dotted
border solid (default)
border-dashed
border-dotted
class="border-2 border-dashed"
class="border-dotted border-red-500"
6
Sombras
shadow-{size} · shadow-inner · shadow-none
Box Shadow
shadow · shadow-md · shadow-2xl
sm
md
lg
xl
2xl
inner
class="shadow"
class="shadow-lg"
class="shadow-2xl"
class="shadow-inner"
class="shadow-none"
Ring (focus/outline)
ring · ring-2 · ring-offset
ring
ring-2
ring-offset-2
class="ring"
class="ring-2 ring-blue-500"
class="focus:ring-2"
ring es una sombra circular ideal para estados de foco accesible (focus rings).
7
Opacidad
opacity-{0|25|50|75|100}
Opacity Scale
opacity-{n}
opacity-0
opacity-25
opacity-50
opacity-75
opacity-100
class="opacity-50"
class="hover:opacity-100 opacity-70"
8
Display
block · inline-block · inline · hidden · flex · grid · table
Display Values
block · inline · hidden
block: ocupa toda la línea
inline-block
inline
OCULTO
class="block"
class="inline-block"
class="inline"
class="hidden" /* display:none */
9
Flexbox
flex · flex-col · items-* · justify-* · flex-wrap · grow · shrink
Justify Content
justify-{value}
justify-start
A
B
justify-center
A
B
justify-between
A
B
justify-end
A
B
class="flex justify-start"
class="flex justify-center"
class="flex justify-between"
Align Items
items-{value}
items-start
A
B
items-center
A
B
items-end
A
B
class="flex items-start"
class="flex items-center"
class="flex items-end"
Flex Direction & Wrap
flex-col · flex-row · flex-wrap
flex-row (default)
1
2
3
flex-col
1
2
3
class="flex flex-col"
class="flex flex-row"
class="flex flex-wrap gap-2"
Flex Grow / Shrink
flex-1 · flex-auto · flex-none · grow · shrink-0
flex-1: crece para llenar espacio
flex-1
fixed
flex-1
flex-none: no crece ni encoge
crecer
none
class="flex-1" /* grow+shrink */
class="flex-none" /* sin cambio */
class="grow" /* solo crece */
class="shrink-0" /* no encoge */
10
Grid
grid-cols-{n} · col-span-{n} · row-span · gap
Grid Columns
grid-cols-{1..12}
grid-cols-2
1
2
3
4
grid-cols-3
1
2
3
4
5
6
class="grid grid-cols-3 gap-4"
Col Span
col-span-{n} · col-span-full
col-span-full (3)
col-span-2
1
1
1
1
class="col-span-2"
class="col-span-full"
class="col-start-2 col-end-4"
11
Transitions
transition · duration · ease · delay
Hover Transitions
transition · duration-300 · ease-out
hover: scale
hover: lift
hover: bright
class="transition duration-300 ease-out
hover:scale-110"
class="transition-colors
hover:bg-blue-600"
transition activa todas las propiedades. transition-colors solo anima colores. Siempre combinar con hover: modificador.
Duration & Easing
duration-{ms} · ease-in · ease-out
duration-150 (default)
duration-300
duration-500
duration-1000
class="transition duration-150" /* rápido */
class="transition duration-500" /* medio */
class="ease-in ease-out ease-in-out"
12
Transforms
scale · rotate · translate · skew
Scale & Rotate
scale-{n} · rotate-{deg}
scale-75
scale-100
scale-125
rotate-45
rotate-180
skew-x-12
class="scale-90 hover:scale-110"
class="rotate-45"
class="rotate-180"
class="-rotate-12"
class="skew-x-6"
Translate
translate-x-{n} · -translate-y-{n}
translate-x-4
-translate-y-2
class="translate-x-4"
class="-translate-y-2"
class="hover:-translate-y-1"
13
Gradientes
bg-gradient-to-{dir} · from-{color} · via-{color} · to-{color}
Background Gradients
bg-gradient-to-r · from · via · to
to-r: blue → purple
to-br: pink → orange
from → via → to (3 stops)
class="bg-gradient-to-r
from-blue-500 to-purple-500"
class="bg-gradient-to-br
from-pink-500 via-red-500 to-orange-400"
Text Gradient
bg-clip-text · text-transparent
Texto Gradiente
class="bg-gradient-to-r
from-sky-400 to-purple-500
bg-clip-text text-transparent
font-black"
bg-clip-text limita el fondo al área del texto. text-transparent hace visible el gradiente detrás.
14
Animaciones
animate-spin · animate-ping · animate-pulse · animate-bounce
Built-in Animations
animate-{name}
animate-spin
animate-ping
animate-pulse
animate-bounce
skeleton (custom)
class="animate-spin" /* rotación continua */
class="animate-ping" /* efecto radar/notif */
class="animate-pulse" /* fade in/out */
class="animate-bounce" /* rebote */
class="animate-none" /* desactiva */
15
Botones
Composición de utilidades para crear variantes
Button Variants
composición de clases
/* Primary */
class="bg-blue-500 hover:bg-blue-600 text-white
px-4 py-2 rounded font-semibold transition"
/* Outline */
class="border border-gray-500 hover:border-white
text-gray-400 hover:text-white px-4 py-2 rounded"
/* Pill */
class="rounded-full px-6 py-2 bg-blue-500 text-white"
/* Disabled */
class="opacity-50 cursor-not-allowed"
16
Badges & Chips
inline-flex · rounded-full · text-xs · px-2 · py-0.5
Badge Variants
rounded-full · text-xs · font-semibold
● Blue
✓ Success
✕ Error
⚠ Warning
★ New
v2.0.1
12
🔒 Private
class="inline-flex items-center gap-1
rounded-full px-2.5 py-0.5 text-xs font-semibold
bg-blue-500/20 text-blue-400 border border-blue-500/30"
17
Cards
rounded · border · shadow · overflow-hidden · hover:translate-y
Simple Card
Título de la Card
Descripción breve del contenido de la card.
Usuarios activos
12,438
↑ 8.2% este mes
Con acciones
justify-between en el footer.
/* Card base */
class="rounded-lg border border-gray-800 bg-gray-900
p-4 shadow-md hover:-translate-y-1 transition"
18
Alerts
border-l-4 · bg-{color}/10 · text-{color}-300
ℹ️
Info: border-l-4 + bg-blue-500/10 + text-blue-300
✅
Success: border-l-4 + bg-green-500/10 + text-green-300
⚠️
Warning: border-l-4 + bg-yellow-500/10 + text-yellow-300
❌
Error: border-l-4 + bg-red-500/10 + text-red-300
class="border-l-4 border-blue-500 bg-blue-500/10
text-blue-300 p-4 rounded-r-md flex gap-2"
19
Forms
focus:ring · appearance-none · placeholder: · disabled: · checked:
Inputs
focus:ring · border · rounded
class="w-full bg-gray-800 border border-gray-700
rounded-md px-3 py-2 text-white text-sm
focus:outline-none focus:ring-2
focus:ring-blue-500 focus:border-transparent
disabled:opacity-50 disabled:cursor-not-allowed"
Toggle & Checkbox
appearance-none · checked: modifier
Toggle ON (click)
Toggle OFF (click)
class="w-11 h-6 rounded-full cursor-pointer
bg-gray-600 peer-checked:bg-blue-500
after:content-[''] after:rounded-full
after:absolute after:bg-white ..."
Select & Textarea
appearance-none · resize-none
/* Select */
class="appearance-none bg-gray-800 border
border-gray-700 rounded px-3 py-2 w-full"
/* Textarea */
class="resize-none" /* o resize-y */
20
Avatares
rounded-full · ring · overflow-hidden · relative
Avatar Variants
rounded-full · ring · w-{n} · h-{n}
JD
sm
MK
md
AR
lg
RG
ring
A
B
C
+5
stack (-ml-3)
JS
online dot
/* Avatar */
class="w-10 h-10 rounded-full bg-blue-500
text-white flex items-center justify-center
font-bold"
/* Stack */
class="-ml-3 ring-2 ring-background"
/* Online dot */
class="absolute bottom-0 right-0
w-3 h-3 bg-green-500 rounded-full
border-2 border-gray-900"
21
Tabs
border-b · active border-b-2 · hidden/block panel
Tab Component
border-b · active:border-b-2 · hidden/block
Panel Descripción: Usa
border-b para el contenedor de tabs y border-b-2 border-blue-500 para el tab activo. Los paneles alternan entre hidden y block.
Panel Código: El tab activo se maneja con JS toggling clases. Con React/Vue se usa state.
Panel Propiedades: Lista de props del componente aquí.
Panel Historial: Changelog y versiones aquí.
22
Accordion
max-h-0 → max-h-96 · overflow-hidden · transition
Accordion Component
max-h-0 overflow-hidden transition-all
Tailwind es un framework CSS utility-first. En lugar de clases prediseñadas como Bootstrap, ofrece utilidades de bajo nivel (como flex, pt-4, text-center, rotate-90) que puedes combinar para crear diseños únicos directamente en tu HTML.
No. Tailwind genera CSS; solo cambia dónde escribes los estilos. Sigue siendo CSS compilado. La ventaja es que no tienes que salir del HTML para estilizar. Con el JIT compiler solo se genera el CSS que realmente usas.
El modo Just-In-Time escanea tus archivos en busca de clases Tailwind y genera solo el CSS necesario. Esto elimina CSS muerto y permite valores arbitrarios como w-[347px] o bg-[#1da1f2].
/* El trick: max-h-0 con overflow-hidden */
class="max-h-0 overflow-hidden transition-all duration-300"
/* Al abrir: */
class="max-h-96"
/* Flecha */
class="transition-transform duration-300 open:rotate-180"
23
Stats & Progress
Componentes de datos y barras de progreso
Ventas totales
$48,295
↑ 12.5% vs mes ant.
Tickets abiertos
284
↑ 3.1% vs ayer
Uptime
99.9%
Estable
Tasa conversión
3.24%
↑ 0.8%
Progress Bars
h-{n} · rounded-full · transition-width
Completado78%
Éxito92%
Advertencia45%
Crítico23%
class="w-full bg-gray-800 rounded-full h-2"
class="bg-blue-500 h-full rounded-full
transition-all duration-500"
/* width se controla inline o con JS */
24
Misceláneos
tooltip · kbd · breadcrumb · divider · skeleton · tooltip · sr-only
Tooltip
group · group-hover:visible
💡 Soy un tooltip
/* Group hover pattern */
class="group relative"
class="invisible group-hover:visible
absolute bottom-full left-1/2
-translate-x-1/2 mb-1 px-2 py-1
bg-gray-800 text-xs rounded
whitespace-nowrap"
Keyboard Keys
border-b-2 · rounded · text-xs
⌘CtrlAltShiftEnterEscTab
Ctrl+Kpara buscar
class="inline-flex items-center px-1.5 py-0.5
bg-gray-800 border border-gray-700
border-b-2 rounded text-xs
text-gray-300 font-mono"
Breadcrumb
flex · items-center · gap · text-sm
class="flex items-center gap-2 text-sm"
/* Link activo */
class="text-gray-400 hover:text-white"
/* Separador */
class="text-gray-600"
Skeleton Loader
animate-pulse · bg-gray-700 · rounded
class="animate-pulse bg-gray-700 rounded"
/* Círculo */
class="w-10 h-10 rounded-full animate-pulse"
/* Línea */
class="h-3 w-3/4 rounded animate-pulse"
Divider
border-t · flex · items-center · after:flex-1
O continúa con
/* Simple */
class="border-t border-gray-800 my-4"
/* Con texto */
class="flex items-center gap-4"
class="flex-1 border-t border-gray-800"
Accesibilidad
sr-only · not-sr-only · focus-visible
El texto sr-only es invisible visualmente pero accesible para screen readers.
/* Visible solo para screen readers */
class="sr-only"
/* Revertir sr-only en hover/focus */
class="sr-only focus:not-sr-only"
/* Focus visible (accesibilidad) */
class="focus-visible:ring-2 focus-visible:ring-blue-500"
★
Tabla de Referencia Rápida
Clases más usadas en producción
| Categoría | Clase | CSS equivalente |
|---|---|---|
| Flexbox | flex items-center justify-between | display:flex; align-items:center; justify-content:space-between |
| Grid | grid grid-cols-3 gap-4 | display:grid; grid-template-columns:repeat(3,1fr); gap:1rem |
| Espaciado | px-4 py-2 | padding:0.5rem 1rem |
| Tipografía | text-xl font-bold | font-size:1.25rem; font-weight:700 |
| Color | bg-blue-500 text-white | background:#3b82f6; color:#fff |
| Bordes | rounded-lg border border-gray-800 | border-radius:0.5rem; border:1px solid #1f2937 |
| Hover | hover:bg-blue-600 | :hover { background:#2563eb } |
| Foco | focus:ring-2 focus:ring-blue-500 | :focus { box-shadow:0 0 0 2px #3b82f6 } |
| Responsive | sm:flex-col md:flex-row lg:grid-cols-4 | @media breakpoints |
| Dark mode | dark:bg-gray-900 dark:text-white | @media (prefers-color-scheme:dark) |
| Arbitrario | w-[347px] bg-[#1da1f2] | width:347px; background:#1da1f2 (JIT) |
| Animación | animate-spin animate-pulse | @keyframes spin/pulse |
| Transition | transition duration-300 ease-out | transition:all 300ms cubic-bezier(0,0,.2,1) |
| Z-index | z-10 z-50 z-auto | z-index:10/50/auto |
| Overflow | overflow-hidden truncate | overflow:hidden; text-overflow:ellipsis |