block inline-block inline hidden
Modo de visualización
flex inline-flex grid
Display flex/grid
flex-row flex-col flex-wrap
Dirección y wrap flex
items-center items-start items-end
Align items (eje cruzado)
justify-center justify-between justify-around
Justify content (eje principal)
gap-4 gap-x-2 gap-y-6
Espacio entre items flex/grid
flex-1 flex-auto flex-none
Atajos grow/shrink
grid-cols-3 grid-cols-12
Columnas del grid
col-span-2 col-span-full
Column span del grid
grid-rows-3 row-span-2
Filas y row span
absolute relative fixed sticky
Posición
top-0 right-4 bottom-2 left-auto
Offsets de posición
z-10 z-50 z-[9999]
z-index
overflow-hidden overflow-y-auto
Overflow
p-4 px-2 py-3 pt-6 pl-8
Padding (todo/x/y/individual)
m-4 mx-auto my-6 mt-2
Margen
-mt-4 -mx-2
Margen negativo
space-y-4 space-x-2
Espacio entre hijos
w-full w-1/2 w-screen w-[320px]
Ancho
h-full h-screen h-16 h-[100px]
Alto
min-h-screen min-h-0 max-h-96
Min/max alto
max-w-md max-w-3xl max-w-prose
Ancho máximo (presets)
text-xs text-sm text-base text-lg text-xl text-2xl
Escala de tamaño de fuente
font-thin font-normal font-bold font-black
Grosor de fuente
italic not-italic
Cursiva
text-center text-left text-right text-justify
Alineación del texto
underline line-through no-underline
Decoración del texto
uppercase lowercase capitalize normal-case
Transformación de texto
leading-tight leading-normal leading-relaxed
Altura de línea
tracking-tight tracking-wide
Espaciado entre letras
truncate text-ellipsis whitespace-nowrap
Truncar texto
font-mono font-sans font-serif
Familia de fuente
text-red-500 text-blue-700 text-gray-900
Color de texto
bg-blue-500 bg-white bg-transparent
Color de fondo
bg-[#1da1f2]
Color hex arbitrario
bg-gradient-to-r from-pink-500 to-purple-500
Gradiente lineal
opacity-50 opacity-0 opacity-100
Opacidad
border border-2 border-0
Grosor de borde
border-t border-b-2 border-l-0
Borde en un lado
border-gray-300 border-blue-500
Color de borde
rounded rounded-lg rounded-full rounded-none
Radio de borde
rounded-tl-lg rounded-br-2xl
Radio por esquina
shadow shadow-md shadow-lg shadow-2xl
Sombra de caja
shadow-none ring-2 ring-blue-500
Sin sombra / ring (focus)
blur backdrop-blur-sm
Filtros blur
hover:bg-blue-600 focus:ring-2
Estado hover y focus
disabled:opacity-50 disabled:cursor-not-allowed
Estado deshabilitado
group-hover:text-white peer-focus:border-blue-500
Estados group/peer
dark:bg-gray-900 dark:text-white
Variantes dark mode
first:mt-0 last:mb-0 odd:bg-gray-50
Variantes estructurales
sm: md: lg: xl: 2xl:
Prefijos de breakpoints
text-sm md:text-base lg:text-lg
Tamaño de fuente responsive
flex-col md:flex-row
Stack en móvil, row en escritorio
hidden md:block
Ocultar en móvil, mostrar en escritorio
grid-cols-1 sm:grid-cols-2 lg:grid-cols-4
Columnas responsive del grid
cursor-pointer cursor-not-allowed
Estilo del cursor
select-none select-text
Selección de usuario
pointer-events-none pointer-events-auto
Eventos de puntero
transition transition-all duration-300 ease-in-out
Transición CSS
transform rotate-45 scale-110 translate-x-2
Transformaciones
animate-spin animate-pulse animate-bounce
Animaciones integradas
Cheat Sheet de Tailwind CSS — Spacing, Flex, Grid, Colores y Utilidades Responsive
Tailwind CSS salió en 2017 con la idea de que clases utility de propósito único —`p-4`, `flex`, `text-center`— ganan a escribir CSS a medida para la mayoría de páginas; la v2.1 introdujo valores arbitrarios como `bg-[#1da1f2]` y el motor just-in-time, que la v3 acabó convirtiendo en el comportamiento por defecto. La chuleta de abajo cubre más de 60 clases utility entre layout, espaciado, tipografía, colores, bordes, efectos, estados, responsive e interactividad. La mayoría de los líos con Tailwind no vienen de olvidar los nombres de clase. Vienen de rarezas que parecen normales pero muerden. La utility `space-x-4` aplica margen izquierdo a cada hijo directo salvo al primero, así que envolverlos en un flex container extra rompe el espaciado. La variante `dark:` solo se activa cuando la estrategia de clase está configurada: `media` sigue la preferencia del sistema, `class` espera una clase `dark` en un ancestro. Una clase montada en runtime tipo `bg-${color}-500` no entra al build, porque el purger busca el nombre exacto. Estos son los fragmentos que se acaban consultando al depurar eso: el breakpoint adecuado, la variante correcta, el escape de valor arbitrario, sin releer la referencia desde la línea uno cada vez.
Trampas habituales en Tailwind
Hay un puñado de patrones que merecen estar en la primera pantalla de cualquier proyecto con Tailwind. Los prefijos responsive son mobile-first: `text-sm md:text-base` significa texto pequeño por defecto y tamaño base a partir del breakpoint `md` hacia arriba, no al revés. Las variantes de estado se apilan con dos puntos: `dark:hover:bg-gray-700` se dispara solo en modo oscuro y solo al hacer hover. Los valores arbitrarios usan corchetes y aceptan cualquier valor CSS válido, pero los espacios piden guión bajo: `before:content-['Hola_mundo']` funciona, mientras que un espacio literal rompería la clase. La directiva `@apply` compone utilities dentro de una clase a medida, pero no admite prefijos de variante como `hover:` o `md:` directamente: para eso hay que envolver el `@apply` en los bloques `:hover` o `@media` correspondientes. Los bordes con `space-x-*` y `divide-x-*` se parchean con `last:mr-0` cuando un margen final sobrante estorbe. El `safelist` de la config existe para clases montadas en runtime que el purger tiraría. La chuleta agrupa esto en Layout, Spacing, Typography, Colors, Borders, Effects, States, Responsive e Interactive para que la sección adecuada esté a un clic.
- Más de 60 clases utility de Tailwind
- 9 categorías organizadas por uso
- Prefijos responsive (sm, md, lg, xl, 2xl)
- Variantes de estado (hover, focus, dark, group)
- Utilidades Flex y Grid
- Copia al portapapeles con un clic
Gratis. Sin registro. Tus datos permanecen en tu navegador. Anuncios mediante Google AdSense (con consentimiento).
Por Marco B. ·