Chuleta de Tailwind CSS v4 (con buscador)

Una chuleta de Tailwind CSS v4 con buscador: escribe cualquier clase o palabra y verás el CSS exacto que genera v4, desde múltiplos de var(--spacing) hasta tokens de color en OKLCH. También cubre los tokens de @theme, los breakpoints, las container queries, cajas flex y grid en vivo, la paleta de colores completa, el modo oscuro y los cambios de nombre de v3 a v4.

Actualizado el 13 de octubre de 2026

Esta chuleta cubre Tailwind CSS v4 (v4.3 es la versión actual en el momento de escribir esto, octubre de 2026). Para cada clase muestra el CSS que v4 escribe de verdad, algo importante porque v4 cambió la forma de producir los valores: el espaciado es un múltiplo de una única variable --spacing , los colores son variables --color-* definidas en OKLCH, y tamaños como el radio, la sombra y el texto salen de variables de tema con nombre. Escribe en la caja para filtrar. La búsqueda funciona con nombres de clase, con el CSS que generan y con palabras sencillas como "center", "gradient" o "sticky".

Busca cualquier utilidad

Cómo leer la tabla: calc(var(--spacing) * 4) equivale a 1rem porque el valor por defecto de --spacing es 0.25rem. Cambia esa única variable en @theme y todos los padding, margin, gap, width y height que usan la escala numérica cambian con ella. Cuando el CSS generado es largo (degradados, rings, transiciones), la tabla muestra una versión simplificada y lo indica.

Cómo convierte v4 una clase en un valor

En v4 hay cuatro formas de dar un valor a una utilidad, y saber cuál estás usando explica la mayoría de las sorpresas:

• Un número de la escala de espaciado: p-4, w-64, gap-3. Sirve cualquier número entero, y también los cuartos de paso como p-2.5, sin configuración. El valor es calc(var(--spacing) * n).
• Un valor de tema con nombre: rounded-lg, shadow-md, text-xl, max-w-md. Cada una lee una variable como --radius-lg o --container-md.
• Un valor arbitrario entre corchetes: p-[13px], grid-cols-[200px_1fr], bg-[#4f98fb]. Los guiones bajos sustituyen a los espacios.
• Una variable CSS entre paréntesis: bg-(--brand) es la forma abreviada de v4 para bg-[var(--brand)]. En v3 escribías bg-[--brand].

Las fracciones como w-1/2 se convierten en calc(1/2 * 100%), y un sufijo de opacidad como bg-black/50 se convierte en un color-mix() con transparente, así que funciona con cualquier formato de color.

Tokens de @theme (lo que sustituye a tailwind.config.js en v4)

En v4 el sistema de diseño se configura en CSS. Las variables declaradas dentro de @theme se convierten a la vez en propiedades personalizadas de CSS en :root y en el origen de las clases de utilidad. El prefijo de la variable decide a qué utilidades alimenta:

@import "tailwindcss";

@theme {
  --font-display: "Satoshi", sans-serif;   /* font-display */
  --color-brand-500: oklch(65% 0.17 255);  /* bg-brand-500, text-brand-500 ... */
  --breakpoint-3xl: 120rem;                /* 3xl: variant */
  --spacing: 0.25rem;                      /* p-4 = 1rem */
  --radius-card: 0.875rem;                 /* rounded-card */
}

Espacio de nombres	Alimenta a	Ejemplo
--color-*	todas las utilidades de color (bg, text, border, fill, ring, color de sombra...)	bg-red-500
--spacing	padding, margin, gap, width, height, inset, translate	px-4
--font-*	familia tipográfica	font-sans
--text-*	tamaño de fuente (más el opcional --text-*--line-height)	text-xl
--font-weight-*	peso de fuente	font-bold
--tracking-* / --leading-*	espaciado entre letras / interlineado	tracking-wide
--breakpoint-*	variantes responsive	sm:*
--container-*	variantes de container query y max-w-*	@sm:*, max-w-md
--radius-*	radio del borde	rounded-sm
--shadow-*, --inset-shadow-*, --drop-shadow-*	sombras	shadow-md
--blur-*	desenfoque y desenfoque de fondo	blur-md
--ease-* / --animate-*	funciones de temporización / animaciones	ease-out, animate-spin
--perspective-* / --aspect-*	perspectiva 3D / relación de aspecto	perspective-near, aspect-video

Para quitar un espacio de nombres completo por defecto, ponlo primero en initial , por ejemplo --color-*: initial;, y después declara solo tus propios colores. Si todavía tienes una configuración en JavaScript, v4 puede cargarla con @config "./tailwind.config.js";, pero las opciones corePlugins, safelist y separator no son compatibles.

Breakpoints

Los breakpoints son mobile first: una clase sin prefijo se aplica en cualquier ancho, y md:flex se aplica a partir de 48rem. v4 los escribe con la sintaxis de rango width >= ....

Prefijo	Ancho mínimo	CSS	Por debajo (max-*)
sm:	40rem (640px)	@media (width >= 40rem)	max-sm: = @media (width < 40rem)
md:	48rem (768px)	@media (width >= 48rem)	max-md:
lg:	64rem (1024px)	@media (width >= 64rem)	max-lg:
xl:	80rem (1280px)	@media (width >= 80rem)	max-xl:
2xl:	96rem (1536px)	@media (width >= 96rem)	max-2xl:

Combínalos para apuntar a un rango: md:max-xl:flex solo se aplica desde 48rem hasta 80rem (sin incluirlo). Para un breakpoint puntual usa min-[900px]:grid o max-[600px]:hidden. Añade o cambia breakpoints con --breakpoint-* en @theme, y mantenlos todos en rem para que se ordenen correctamente.

Container queries

Las container queries vienen integradas en v4 (en v3 necesitaban un plugin). Marca un elemento padre con @containery después da estilo a los hijos con @sm:, @md: y similares. Reaccionan al ancho del padre en lugar del de la ventana, que es justo lo que necesitas para una tarjeta que aparece tanto en una barra lateral como en una columna principal ancha.

<div class="@container">
  <article class="flex flex-col @md:flex-row gap-4">
    <img class="w-full @md:w-48 rounded-lg" src="..." alt="">
    <div>...</div>
  </article>
</div>

Variante	Ancho del contenedor	Variante	Ancho del contenedor
@3xs	16rem (256px)	@2xl	42rem (672px)
@2xs	18rem (288px)	@3xl	48rem (768px)
@xs	20rem (320px)	@4xl	56rem (896px)
@sm	24rem (384px)	@5xl	64rem (1024px)
@md	28rem (448px)	@6xl	72rem (1152px)
@lg	32rem (512px)	@7xl	80rem (1280px)
@xl	36rem (576px)

Cada una se compila a @container (width >= ...). Usa @max-md: para "por debajo", combina @sm:@max-md: para un rango, pon nombre a los contenedores con @container/sidebar y apúntalos con @md/sidebar:, y usa tamaños arbitrarios como @min-[475px]:. Ojo: los tamaños de contenedor no coinciden con los de los breakpoints: @md es 28rem mientras que md: es 48rem.

Referencia rápida de flex y grid

Elige un layout aquí abajo y mira cómo se mueven las cajas. La cadena de clases se actualiza al hacer clic, así que puedes copiarla directamente en tu marcado.

Los patrones que más vas a usar:

Objetivo	Clases
Cuadrícula de tarjetas responsive sin breakpoints	grid grid-cols-[repeat(auto-fill,minmax(16rem,1fr))] gap-6
Barra lateral más contenido	grid md:grid-cols-[16rem_1fr] gap-8
Footer fijado al fondo de una página corta	flex min-h-dvh flex-col en el contenedor, flex-1 en main
Texto que se trunca dentro de una fila flex	min-w-0 en el hijo flex, truncate en el texto
Apilado en móvil, en fila en escritorio	flex flex-col md:flex-row gap-4
Empujar el último elemento a la derecha	ms-auto (o ml-auto) en ese elemento

Paleta de colores por defecto (OKLCH), haz clic para copiar

v4 define la paleta por defecto en OKLCH, que puede mostrar colores más saturados en pantallas de gama amplia. Cada muestra de abajo está pintada con el valor exacto del archivo de tema de Tailwind; haz clic en una para copiar su valor oklch() . Los tonos van de 50 a 950. Las paletas marcadas con * (mauve, olive, mist y taupe) se añadieron en v4.2.0, así que no existen en versiones anteriores de v4. El negro y el blanco son #000 y #fff.

Úsalos como bg-sky-500, text-sky-500/80 o, en tu propio CSS, var(--color-sky-500). Para comprobar si una combinación es legible, pásala por el comprobador de contraste de color, y para crear una escala propia en el mismo formato prueba el generador de paletas de colores de Tailwind.

Modo oscuro en v4

Por defecto, dark: sigue al sistema operativo mediante @media (prefers-color-scheme: dark). Para controlarlo desde una clase o un atributo (para un interruptor manual), sobrescribe la variante en tu CSS con @custom-variant. Ya no existe la clave de configuración darkMode .

/* Class strategy: <html class="dark"> */
@custom-variant dark (&:where(.dark, .dark *));

/* Or a data attribute: <html data-theme="dark"> */
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));

<div class="bg-white text-slate-900 dark:bg-slate-900 dark:text-slate-100">...</div>

Con un interruptor manual, aplica la clase antes de que se pinte la página (un pequeño script en línea en <head> que lea la opción guardada) para que los visitantes no vean un destello del tema equivocado. Una tercera opción es prescindir por completo de las clases dark: : define tokens semánticos como --color-surface en @theme y cambia sus valores bajo .dark, para que una sola clase como bg-surface funcione en ambos temas.

De v3 a v4: clases renombradas y modificadas

Proceden de la guía oficial de actualización. Los cambios de nombre son lo más importante, porque los nombres antiguos siguen existiendo y producen sin avisar un resultado distinto (más pequeño).

v3	v4	Motivo
shadow-sm	shadow-xs	La escala bajó un paso para que todos los tamaños tengan nombre
shadow	shadow-sm	Mismo desplazamiento
drop-shadow-sm / drop-shadow	drop-shadow-xs / drop-shadow-sm	Mismo desplazamiento
blur-sm / blur	blur-xs / blur-sm	Mismo desplazamiento (también backdrop-blur-*)
rounded-sm	rounded-xs	Mismo desplazamiento
rounded	rounded-sm	Mismo desplazamiento
outline-none	outline-hidden	v4 outline-none ahora sí establece outline-style: none
ring (3px, blue-500)	ring-3 más un color	Un ring sin más ahora es de 1px en currentColor
outline outline-2	outline-2	Las utilidades de ancho ahora aplican por sí mismas un estilo sólido
bg-opacity-50 (y text-, border-, ring-, divide-, placeholder-opacity)	bg-black/50	Eliminado; usa el modificador con barra
flex-shrink-0 / flex-grow	shrink-0 / grow	Alias eliminados
overflow-ellipsis	text-ellipsis	Alias eliminado
decoration-slice / decoration-clone	box-decoration-slice / box-decoration-clone	Alias eliminados
bg-[--brand]	bg-(--brand)	Nueva forma abreviada para variables CSS
!bg-red-500	bg-red-500!	El important va al final (la forma antigua está obsoleta)
first:*:pt-0	*:first:pt-0	Las variantes combinadas ahora se leen de izquierda a derecha
tw-flex (prefijo)	tw:flex	Los prefijos parecen una variante y van primero

Cambios de comportamiento sin cambio de nombre, que pillan a la gente al actualizar:

• Color de border y divide: el valor por defecto ahora es currentColor en lugar de gray-200, así que un border sin más se ve oscuro. Añade un color como border-gray-200.
• Hover en pantallas táctiles: hover: va envuelto en @media (hover: hover), así que un toque ya no deja pegados los estilos de hover.
• Botones: Preflight ahora da a los botones cursor: default como hace el navegador. Añade cursor-pointer si quieres la manita.
• space-x / space-y y divide: el selector cambió a > :not(:last-child) y el margen pasó al lado final. Si el espaciado se ve raro, cambia a flex o grid con gap.
• container: las opciones center y padding ya no existen; extiéndelo con @utility container { margin-inline: auto; padding-inline: 2rem; }.
• Degradados: En v4, los degradados lineales se escriben bg-linear-to-r y añade bg-radial y bg-conic.
• Navegadores: v4 está pensado para Safari 16.4+, Chrome 111+ y Firefox 128+. Si tienes que dar soporte a navegadores más antiguos, la guía de actualización dice que te quedes en v3.4.

La herramienta oficial npx @tailwindcss/upgrade resuelve automáticamente la mayoría de los cambios de nombre. Ejecútala en una rama limpia y revisa el diff, porque no puede saber qué clases shadow querías que siguieran viéndose igual.

Imprimir esta chuleta

Esta página tiene estilos de impresión: las cajas de búsqueda y los botones se ocultan, las tablas usan una fuente más pequeña y la cuadrícula de colores mantiene juntas sus muestras. En la mayoría de los navegadores, activa "Gráficos de fondo" en el diálogo de impresión o las muestras saldrán en blanco. Si antes filtraste la tabla, solo se imprimen las filas visibles, una forma rápida de hacer una hoja de una página solo con las utilidades que usas.

La misma variante print: funciona en tus propios proyectos: print:hidden en la navegación, print:text-black en el texto claro y print:break-inside-avoid en las tarjetas mantienen legibles las páginas impresas.

Relacionado

• Estados de botones en CSS: hover, focus-visible, active y disabled, en CSS puro y Tailwind.
• Esquemas de color para webs para elegir una paleta antes de convertirla en tokens.
• Generador de CSS grid y la galería de componentes de secciones de Tailwind que puedes copiar.

Preguntas frecuentes

¿Dónde está tailwind.config.js en Tailwind v4?

v4 se configura en CSS. Importas Tailwind con @import "tailwindcss" y declaras los tokens de diseño dentro de un bloque @theme, como --color-brand-500 o --breakpoint-3xl. Todavía se puede cargar una configuración en JavaScript con la directiva @config, pero las opciones corePlugins, safelist y separator no son compatibles.

¿Cuáles son los breakpoints por defecto de Tailwind v4?

sm es 40rem (640px), md es 48rem (768px), lg es 64rem (1024px), xl es 80rem (1280px) y 2xl es 96rem (1536px). Son mobile first, así que md:flex se aplica desde 48rem en adelante. Usa max-md: para estilos por debajo de un breakpoint y combínalos, como md:max-xl:, para un rango.

¿Por qué mis sombras y esquinas redondeadas se ven más pequeñas tras actualizar a v4?

Las escalas de sombra, radio y desenfoque bajaron un paso. shadow-sm de v3 es shadow-xs en v4, shadow de v3 es shadow-sm en v4, rounded-sm de v3 es rounded-xs en v4 y rounded de v3 es rounded-sm en v4. Los nombres antiguos siguen compilando, así que no hay ningún error; simplemente producen el tamaño inmediatamente inferior.

¿Cómo hago que el modo oscuro use una clase en lugar del ajuste del sistema en v4?

Añade @custom-variant dark (&:where(.dark, .dark *)); a tu CSS. Las utilidades dark: se aplicarán siempre que un ancestro tenga la clase dark. Si prefieres un atributo data, usa [data-theme=dark] en el selector.

¿Necesita Tailwind v4 un plugin para las container queries?

No. Las container queries vienen integradas. Pon @container en el padre y usa variantes como @sm:, @md: y @max-md: en sus hijos. Los tamaños de contenedor empiezan en @3xs (16rem) y son distintos de los breakpoints de página; por ejemplo, @md es 28rem.

¿A qué compila p-4 en Tailwind v4?

padding: calc(var(--spacing) * 4). Con el --spacing por defecto de 0.25rem, eso es 1rem (16px con el tamaño de fuente por defecto). Cualquier número entero funciona en la escala de espaciado sin configuración, y al cambiar --spacing se reescalan todos a la vez.

Display

Items

Dirección

Wrap

Eje principal

Columnas

Eje transversal

Gap

Copiado

Copiar clases

Imprimir esta chuleta

Empieza gratis · Sin tarjeta de crédito

Relacionado: Guías

• Colores de Tailwind CSS
• Tailwind vs Bootstrap
• Ejemplos de páginas de equipo
• Términos de servicio vs política de privacidad
• Ejemplos de página de agradecimiento
• TOML vs YAML
• Demasiadas redirecciones
• Clases en TypeScript

Producto

• Creador web con IA
• Constructor de Sitios Web Marca Blanca
• Empresas
• Documentación de API

Para quién es

• Para agencias
• Para freelancers
• Para proveedores de hosting
• Para plataformas SaaS
• Para startups
• Servicios financieros
• Soluciones para salud

Funciones

• Editor de arrastrar y soltar
• SEO y analíticas
• Marca personalizada
• Panel de clientes
• Facturación para revendedores

Recursos

• Blog
• Centro de Ayuda
• Herramientas gratuitas para empresas
• Free UI Components
• Plantillas
• Colecciones de plantillas
• Ejemplos de webs
• Guías
• Comparativas
• Alternativas
• Los mejores
• Reseñas
• Guías de precios
• Glosario y guías
• Integraciones
• Desarrolladores
• Benchmark
• Windows App

Empresa

• Acerca de Nosotros
• Precios
• Solicitar acceso al programa de socios
• Contacto
• Empleos
• Seguridad
• Política de privacidad
• Términos de servicio

Mapa del sitio