Chuleta de Tailwind CSS
Busca cualquier utilidad de Tailwind y ve el CSS exacto que genera, con vistas previas en vivo de sombras, bordes redondeados, tipografía y filtros. Escribe una clase completa como md:hover:bg-blue-500/50 o -mt-4 para decodificarla y copia colores de la paleta completa.
Última actualización:
Valores del tema predeterminado de Tailwind CSS v3.4 ( clases). Haz clic en una clase para copiarla. Las utilidades renombradas en v4 están marcadas.
Ninguna clase coincide. Prueba con una propiedad CSS (margin, color, grid) o un prefijo de clase (p-, text-, rounded).
Cómo usar Chuleta de Tailwind CSS
- Busca por nombre de clase o propiedad CSS, por ejemplo justify-between, padding, shadow o grid-cols.
- Decodifica una clase escribiéndola exactamente, incluidas las variantes (md:hover:), un signo menos para los negativos, la opacidad (/50) o valores arbitrarios (w-[37px]).
- Explora por categoría con las pestañas y pulsa Mostrar las para desplegar escalas largas como el espaciado.
- Copia una clase haciendo clic en ella, o pulsa Copiar CSS para obtener el CSS puro.
- Elige colores en la pestaña Colores: selecciona un prefijo de utilidad o un formato como HEX u OKLCH y haz clic en una muestra.
Escala de espaciado de Tailwind en rem y píxeles
Las utilidades de espaciado (padding, margin, gap, width, height, inset, translate) comparten una misma escala. Un paso es 0.25rem, que equivale a 4px cuando el tamaño de fuente raíz es 16px.
| Sufijo de clase | rem | px | Sufijo de clase | rem | px |
|---|---|---|---|---|---|
| 0 | 0 | 0 | 8 | 2rem | 32px |
| px | — | 1px | 10 | 2.5rem | 40px |
| 0.5 | 0.125rem | 2px | 12 | 3rem | 48px |
| 1 | 0.25rem | 4px | 16 | 4rem | 64px |
| 2 | 0.5rem | 8px | 20 | 5rem | 80px |
| 3 | 0.75rem | 12px | 24 | 6rem | 96px |
| 4 | 1rem | 16px | 32 | 8rem | 128px |
| 5 | 1.25rem | 20px | 48 | 12rem | 192px |
| 6 | 1.5rem | 24px | 64 | 16rem | 256px |
| 7 | 1.75rem | 28px | 96 | 24rem | 384px |
Breakpoints responsivos
| Prefijo | Ancho mínimo | CSS |
|---|---|---|
sm: | 640px | @media (min-width: 640px) |
md: | 768px | @media (min-width: 768px) |
lg: | 1024px | @media (min-width: 1024px) |
xl: | 1280px | @media (min-width: 1280px) |
2xl: | 1536px | @media (min-width: 1536px) |
Los breakpoints son mobile first: aplica estilos a la pantalla pequeña sin prefijo y luego sobrescríbelos hacia arriba, por ejemplo flex-col md:flex-row. Usa max-md: para afectar solo a pantallas de menos de 768px.
Utilidades renombradas en Tailwind CSS v4
| v3 | v4 |
|---|---|
shadow-sm / shadow | shadow-xs / shadow-sm |
rounded-sm / rounded | rounded-xs / rounded-sm |
blur-sm / blur | blur-xs / blur-sm |
drop-shadow-sm / drop-shadow | drop-shadow-xs / drop-shadow-sm |
outline-none | outline-hidden (outline-none ahora establece outline-style: none) |
ring (3px) | ring-3; ring sin más es 1px |
bg-gradient-to-r | bg-linear-to-r |
flex-grow / flex-shrink | grow / shrink |
bg-opacity-50 | bg-black/50 (modificador de opacidad) |
En v4 el color de borde predeterminado también cambió de gray-200 a currentColor, y los valores del tema se definen en CSS con @theme en lugar de tailwind.config.js.
Preguntas frecuentes
¿Cuál es la escala de espaciado de Tailwind?
En el tema predeterminado, una unidad equivale a 0.25rem, es decir, 4px con el tamaño de fuente predeterminado de 16px. Así, p-1 es 4px, p-4 es 1rem (16px), p-8 es 2rem (32px) y p-px es exactamente 1px. La escala va de 0 a 96 (24rem, 384px) con medios pasos como 0.5, 1.5, 2.5 y 3.5.
¿Cuáles son los breakpoints predeterminados de Tailwind?
sm es 640px, md 768px, lg 1024px, xl 1280px y 2xl 1536px. Son media queries de min-width, así que Tailwind es mobile first: una clase sin prefijo se aplica en todos los tamaños y md:flex se aplica a partir de 768px de ancho.
¿Cómo uso un valor que no está en la escala de Tailwind?
Usa corchetes para un valor arbitrario, como w-[37px], top-[117px], bg-[#1da1f2] o grid-cols-[200px_1fr] (los guiones bajos se convierten en espacios). Para una propiedad que no tiene utilidad en Tailwind, escribe [mask-type:luminance].
¿Qué cambió en Tailwind CSS v4?
La versión 4 traslada la configuración al CSS con @theme, usa colores OKLCH y calcula el espaciado a partir de una sola variable --spacing. Varias utilidades cambiaron de nombre: shadow-sm pasó a ser shadow-xs y shadow pasó a ser shadow-sm; el mismo cambio se aplica a rounded, blur y drop-shadow; outline-none pasó a ser outline-hidden, y el ancho predeterminado de ring cambió de 3px a 1px (usa ring-3).
¿Cómo hago un margen negativo en Tailwind?
Pon un signo menos delante de la clase: -mt-4 da margin-top: -1rem y -translate-x-1/2 da translateX(-50%). Los valores negativos funcionan con margin, inset (top, left…), translate, rotate, skew, z-index, order, text-indent y space-between.
¿Cómo funciona el modificador de opacidad en los colores?
Añade una barra y un número de 0 a 100 a cualquier utilidad de color: bg-black/50 es negro con un 50% de opacidad y text-blue-500/75 es un 75%. Sustituye a las antiguas utilidades bg-opacity-*, que se eliminaron en v4.
¿Estos valores son de Tailwind v3 o v4?
Los nombres de clase y el CSS siguen el tema predeterminado de Tailwind CSS v3.4, que la mayoría de los proyectos y tutoriales todavía usan. Las utilidades renombradas en v4 están marcadas, y la paleta de colores se puede copiar en formato OKLCH de v4. Tu proyecto también puede ampliar o cambiar el tema en su configuración.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.