▶ 1. Espaciado — Padding y Margin
p-{n}padding en los 4 lados
px-{n} / py-{n}
padding horizontal (x) /
vertical (y)
pt pb pl pr
padding
top / bottom / left / right individualmente
m-{n}margin en los 4 lados
mx-auto clave
centra horizontalmente un elemento bloque con width fijo
gap-{n}
espacio entre hijos en flex o
grid
space-x-{n}
margen izquierdo entre hijos hermanos en fila
Escala de espaciado (1 unidad = 0.25rem = 4px)
14px
28px
312px
416px
520px
624px
832px
1040px
1248px
1664px
2080px
2496px
▶ 2. Tipografía
text-xs0.75rem / 12px
text-sm0.875rem / 14px
text-base
1rem / 16px — tamaño por defecto
text-lg1.125rem / 18px
text-xl1.25rem / 20px
text-2xl1.5rem / 24px
text-3xl → text-9xl
Títulos grandes (1.875rem → 8rem)
font-normalfont-weight: 400
font-mediumfont-weight: 500
font-semiboldfont-weight: 600
font-bold clave
font-weight: 700
font-extraboldfont-weight: 800
text-left / text-center /
text-right
alineación de texto
uppercase / capitalize
transformación de texto
truncate
corta con ... si no entra en el contenedor
leading-none / leading-relaxed
interlineado (line-height): none=1,
tight=1.25, normal=1.5, relaxed=1.625
▶ 3. Colores de Fondo y Texto
bg-{color}-{shade}
clave
color de fondo. Shade de 50 (muy claro) a
950 (muy oscuro). Ej:
bg-blue-500
text-{color}-{shade}
color de texto. Ej:
text-red-600,
text-slate-300
bg-white / bg-black
blanco y negro puros
text-white / text-black
texto en blanco o negro puro
bg-transparentfondo transparente
opacity-{n}
opacidad del elemento: 0, 10, 20, 25, 50, 75, 90, 100
bg-opacity-{n}opacidad solo del fondo, no del texto
Paleta de colores disponibles
slate
red
orange
yellow
green
sky
blue
indigo
violet
pink
▶ 4. Flexbox
flex clave
display: flex — activa el modo flexbox
flex-row / flex-col
dirección: horizontal (por defecto) /
vertical
flex-wrap / flex-nowrap
los hijos se envuelven a la línea siguiente o no
items-start
align-items: flex-start — alinea en el
eje cruzado
items-center clave
align-items: center — centrar
verticalmente
items-end
align-items: flex-end
justify-start
justify-content: flex-start
justify-center clave
justify-content: center — centrar
horizontalmente
justify-between clave
justify-content: space-between — spread
entre hijos
justify-end
justify-content: flex-end
flex-1
el elemento crece para ocupar el espacio disponible
flex-noneel elemento no crece ni se encoge
gap-{n}
espacio entre todos los hijos (reemplaza margins)
self-center / self-end
align-self para un hijo individual
▶ 5. CSS Grid
grid clave
display: grid — activa el modo grid
grid-cols-1
1 columna —
grid-template-columns: repeat(1, 1fr)
grid-cols-22 columnas iguales
grid-cols-3 clave
3 columnas iguales — muy usado en layouts de cards
grid-cols-4 → grid-cols-12
hasta 12 columnas iguales
col-span-2
un hijo ocupa 2 columnas de ancho
col-span-full
el hijo ocupa todas las columnas
gap-{n}
espacio entre celdas del grid (filas y columnas)
gap-x-{n} / gap-y-{n}
espacio solo horizontal o solo vertical
place-items-centercentra todo el contenido de cada celda
grid-rows-{n}define el número de filas con altura igual
auto-cols-fr / auto-rows-fr
columnas/filas automáticas que reparten el espacio disponible
▶ 6. Dimensiones
w-full clave
width: 100% — ancho completo del padre
w-screen
width: 100vw — ancho de la pantalla
w-autoancho determinado por el contenido
w-1/2 / w-1/3 / w-2/3
fracciones del padre: 50%, 33.3%, 66.6%
w-{n} / h-{n}
tamaño fijo en la escala de 4px:
w-8 = 32px,
w-16 = 64px
h-full
height: 100% del padre
h-screen
height: 100vh — alto de la pantalla
min-h-screen clave
alto mínimo de toda la pantalla — muy usado en layouts
max-w-sm
max-width: 24rem / 384px
max-w-md / max-w-lg
448px / 512px
max-w-xl / max-w-2xl
576px / 672px
max-w-screen-lgancho máximo igual al breakpoint lg (1024px)
aspect-square / aspect-video
relación de aspecto: 1:1 / 16:9
▶ 7. Bordes, Radios y Sombras
borderborder-width: 1px
border-2 / border-4 /
border-8
grosor del borde: 2px / 4px / 8px
border-{color}-{shade}
color del borde. Ej:
border-blue-500
border-t / border-b
borde solo arriba / solo abajo
rounded-none
border-radius: 0 — sin redondeo
rounded-sm / rounded
2px / 4px de radio
rounded-md / rounded-lg
6px / 8px — los más usados en tarjetas
rounded-xl / rounded-2xl
12px / 16px — tarjetas con bordes suaves
rounded-full clave
círculo perfecto — para avatares e íconos circulares
shadow-smsombra pequeña
shadow / shadow-md
sombra normal / mediana
shadow-lg / shadow-xl
sombra grande / muy grande — para tarjetas flotantes
ring-{n}
anillo exterior (outline) — ideal para
estados de focus:
ring-2 = 2px
ring-{color}-{shade}
color del ring. Ej:
ring-blue-500
▶ 8. Display y Posicionamiento
blockdisplay: block
inline-block
display: inline-block
inlinedisplay: inline
hidden clave
display: none — ocultar completamente del
DOM visual
invisible
visibility: hidden — oculto pero ocupa
espacio
relative
position: relative — referencia para
hijos absolutos
absolute
position: absolute — se posiciona
respecto al padre relativo
fixed
position: fixed — fijo en la pantalla
(navbars, modals)
sticky
position: sticky — se pega al hacer
scroll hasta un tope
top-{n} / bottom-{n}
posición vertical del elemento absolute/fixed/sticky
left-{n} / right-{n}
posición horizontal
inset-0
top+right+bottom+left = 0 — cubre todo el padre (overlays)
z-10 / z-20 / z-50
z-index: controla qué elemento se pone
encima
overflow-hidden
recorta el contenido que sobresale del contenedor
cursor-pointer
cursor de mano — usar en botones y elementos clickables
▶ 9. Estados y Responsive
hover:{clase} clave
aplica la clase al pasar el mouse. Ej:
hover:bg-blue-600, hover:opacity-80
focus:{clase}
aplica la clase cuando el elemento tiene foco. Ej:
focus:ring-2 focus:ring-blue-500
active:{clase}
aplica la clase mientras se mantiene pulsado el click
disabled:{clase}
aplica la clase cuando el elemento está deshabilitado. Ej:
disabled:opacity-50 disabled:cursor-not-allowed
group + group-hover:
marca el padre con
group, los hijos reaccionan al
hover del padre con group-hover:
transition
activa transición suave en propiedades que cambian (color,
opacity, transform)
duration-150 / duration-300
duración de la transición en ms: 150ms / 300ms
Breakpoints (mobile-first: la clase base aplica desde 0px)
sm:≥640px
md:≥768px
lg:≥1024px
xl:≥1280px
2xl:≥1536px
sm:grid-cols-2
en pantallas ≥640px, usa 2 columnas. Por debajo, la clase base
manda.
md:hidden
oculto en pantallas medianas y grandes (menú mobile)
lg:flex-row
en desktop, cambia dirección de flex a horizontal
dark:{clase}
aplica la clase solo en modo oscuro del sistema (si está
habilitado)