Saltar al contenido
Bai
EspañolEnglishEuskara Empezar →

Herramientas

Chuleta de Tailwind CSS

Consulta rápida de las clases de Tailwind CSS y el CSS que generan.

Privado por diseño
Clase
CSS
sm:p. ej. sm:flex
@media (min-width: 640px)
md:p. ej. md:grid-cols-2
@media (min-width: 768px)
lg:p. ej. lg:px-8
@media (min-width: 1024px)
xl:p. ej. xl:max-w-6xl
@media (min-width: 1280px)
2xl:p. ej. 2xl:text-lg
@media (min-width: 1536px)
Clase
CSS
block
display: block
inline-block
display: inline-block
inline
display: inline
flex
display: flex
inline-flex
display: inline-flex
grid
display: grid
inline-grid
display: inline-grid
hidden
display: none
contents
display: contents
Clase
CSS
static
position: static
fixed
position: fixed
absolute
position: absolute
relative
position: relative
sticky
position: sticky
inset-0
inset: 0
inset-x-0
left: 0; right: 0
inset-y-0
top: 0; bottom: 0
top-0
top: 0
right-0
right: 0
bottom-0
bottom: 0
left-0
left: 0
Clase
CSS
flex-row
flex-direction: row
flex-col
flex-direction: column
flex-wrap
flex-wrap: wrap
flex-nowrap
flex-wrap: nowrap
flex-1
flex: 1 1 0%
flex-auto
flex: 1 1 auto
flex-none
flex: none
grow
flex-grow: 1
grow-0
flex-grow: 0
shrink
flex-shrink: 1
shrink-0
flex-shrink: 0
Clase
CSS
grid-cols-1
grid-template-columns: repeat(1, minmax(0, 1fr))
grid-cols-2
grid-template-columns: repeat(2, minmax(0, 1fr))
grid-cols-3
grid-template-columns: repeat(3, minmax(0, 1fr))
grid-cols-4
grid-template-columns: repeat(4, minmax(0, 1fr))
grid-cols-12
grid-template-columns: repeat(12, minmax(0, 1fr))
col-span-1
grid-column: span 1 / span 1
col-span-2
grid-column: span 2 / span 2
col-span-full
grid-column: 1 / -1
grid-rows-1
grid-template-rows: repeat(1, minmax(0, 1fr))
grid-rows-2
grid-template-rows: repeat(2, minmax(0, 1fr))
Clase
CSS
justify-start
justify-content: flex-start
justify-center
justify-content: center
justify-end
justify-content: flex-end
justify-between
justify-content: space-between
justify-around
justify-content: space-around
justify-evenly
justify-content: space-evenly
items-start
align-items: flex-start
items-center
align-items: center
items-end
align-items: flex-end
items-baseline
align-items: baseline
items-stretch
align-items: stretch
self-auto
align-self: auto
self-start
align-self: flex-start
self-center
align-self: center
self-end
align-self: flex-end
Clase
CSS
p-0
padding: 0
p-1
padding: 0.25rem (4px)
p-2
padding: 0.5rem (8px)
p-4
padding: 1rem (16px)
p-6
padding: 1.5rem (24px)
p-8
padding: 2rem (32px)
px-*
padding-left & padding-right
py-*
padding-top & padding-bottom
pt/pr/pb/pl-*
padding-[side]
m-0
margin: 0
m-1
margin: 0.25rem (4px)
m-2
margin: 0.5rem (8px)
m-4
margin: 1rem (16px)
m-auto
margin: auto
-m-1
margin: -0.25rem
mx-auto
margin-left: auto; margin-right: auto
gap-0
gap: 0
gap-1
gap: 0.25rem (4px)
gap-2
gap: 0.5rem (8px)
gap-4
gap: 1rem (16px)
gap-x-*
column-gap
gap-y-*
row-gap
Clase
CSS
w-0
width: 0
w-1
width: 0.25rem (4px)
w-4
width: 1rem (16px)
w-full
width: 100%
w-screen
width: 100vw
w-auto
width: auto
w-1/2
width: 50%
w-1/3
width: 33.333%
w-fit
width: fit-content
min-w-0
min-width: 0
min-w-full
min-width: 100%
max-w-sm
max-width: 24rem (384px)
max-w-md
max-width: 28rem (448px)
max-w-lg
max-width: 32rem (512px)
max-w-xl
max-width: 36rem (576px)
max-w-2xl
max-width: 42rem (672px)
max-w-full
max-width: 100%
max-w-screen-sm
max-width: 640px
max-w-screen-md
max-width: 768px
max-w-screen-lg
max-width: 1024px
h-0
height: 0
h-4
height: 1rem (16px)
h-full
height: 100%
h-screen
height: 100vh
h-auto
height: auto
min-h-0
min-height: 0
min-h-full
min-height: 100%
min-h-screen
min-height: 100vh
size-4
width: 1rem; height: 1rem
size-6
width: 1.5rem; height: 1.5rem
size-full
width: 100%; height: 100%
Clase
CSS
text-xs
font-size: 0.75rem (12px)
text-sm
font-size: 0.875rem (14px)
text-base
font-size: 1rem (16px)
text-lg
font-size: 1.125rem (18px)
text-xl
font-size: 1.25rem (20px)
text-2xl
font-size: 1.5rem (24px)
text-3xl
font-size: 1.875rem (30px)
text-4xl
font-size: 2.25rem (36px)
font-thin
font-weight: 100
font-light
font-weight: 300
font-normal
font-weight: 400
font-medium
font-weight: 500
font-semibold
font-weight: 600
font-bold
font-weight: 700
font-sans
font-family: ui-sans-serif, system-ui, sans-serif
font-serif
font-family: ui-serif, Georgia, serif
font-mono
font-family: ui-monospace, monospace
italic
font-style: italic
not-italic
font-style: normal
leading-none
line-height: 1
leading-tight
line-height: 1.25
leading-normal
line-height: 1.5
leading-relaxed
line-height: 1.625
leading-loose
line-height: 2
tracking-tight
letter-spacing: -0.025em
tracking-normal
letter-spacing: 0
tracking-wide
letter-spacing: 0.025em
Clase
CSS
text-left
text-align: left
text-center
text-align: center
text-right
text-align: right
text-justify
text-align: justify
uppercase
text-transform: uppercase
lowercase
text-transform: lowercase
capitalize
text-transform: capitalize
normal-case
text-transform: none
underline
text-decoration: underline
line-through
text-decoration: line-through
no-underline
text-decoration: none
truncate
overflow: hidden; text-overflow: ellipsis; white-space: nowrap
text-ellipsis
text-overflow: ellipsis
text-clip
text-overflow: clip
whitespace-normal
white-space: normal
whitespace-nowrap
white-space: nowrap
whitespace-pre
white-space: pre
break-normal
word-break: normal
break-words
word-break: break-word
break-all
word-break: break-all
line-clamp-1
-webkit-line-clamp: 1
line-clamp-2
-webkit-line-clamp: 2
line-clamp-3
-webkit-line-clamp: 3
Clase
CSS
bg-transparent
background-color: transparent
bg-current
background-color: currentColor
bg-white
background-color: #fff
bg-black
background-color: #000
bg-slate-500
background-color: #64748b
bg-[#hex]p. ej. bg-[#1da1f2]
background-color: #hex
bg-cover
background-size: cover
bg-contain
background-size: contain
bg-center
background-position: center
bg-no-repeat
background-repeat: no-repeat
bg-repeat
background-repeat: repeat
bg-fixed
background-attachment: fixed
bg-gradient-to-r
background-image: linear-gradient(to right, ...)
bg-gradient-to-b
background-image: linear-gradient(to bottom, ...)
from-blue-500
color inicial del degradado
via-purple-500
color intermedio del degradado
to-pink-500
color final del degradado
Clase
CSS
border
border-width: 1px
border-0
border-width: 0
border-2
border-width: 2px
border-4
border-width: 4px
border-t
border-top-width: 1px
border-r
border-right-width: 1px
border-b
border-bottom-width: 1px
border-l
border-left-width: 1px
border-solid
border-style: solid
border-dashed
border-style: dashed
border-dotted
border-style: dotted
border-none
border-style: none
rounded
border-radius: 0.25rem (4px)
rounded-md
border-radius: 0.375rem (6px)
rounded-lg
border-radius: 0.5rem (8px)
rounded-xl
border-radius: 0.75rem (12px)
rounded-2xl
border-radius: 1rem (16px)
rounded-full
border-radius: 9999px
rounded-none
border-radius: 0
rounded-t-lg
border-top-left/right-radius: 0.5rem
divide-x
borde entre hijos en horizontal
divide-y
borde entre hijos en vertical
Clase
CSS
shadow-sm
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05)
shadow
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1)
shadow-md
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1)
shadow-lg
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1)
shadow-xl
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1)
shadow-2xl
box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25)
shadow-inner
box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05)
shadow-none
box-shadow: none
opacity-0
opacity: 0
opacity-50
opacity: 0.5
opacity-100
opacity: 1
blur
filter: blur(8px)
blur-sm
filter: blur(4px)
blur-lg
filter: blur(16px)
blur-none
filter: blur(0)
backdrop-blur
backdrop-filter: blur(8px)
backdrop-blur-sm
backdrop-filter: blur(4px)
Clase
CSS
transition
transition: all 150ms ease
transition-none
transition: none
transition-colors
transition: color, background-color, border-color
transition-opacity
transition: opacity 150ms
transition-transform
transition: transform 150ms
duration-75
transition-duration: 75ms
duration-150
transition-duration: 150ms
duration-300
transition-duration: 300ms
duration-500
transition-duration: 500ms
ease-linear
transition-timing-function: linear
ease-in
transition-timing-function: ease-in
ease-out
transition-timing-function: ease-out
ease-in-out
transition-timing-function: ease-in-out
delay-150
transition-delay: 150ms
delay-300
transition-delay: 300ms
animate-spin
animation: spin 1s linear infinite
animate-ping
animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite
animate-pulse
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite
animate-bounce
animation: bounce 1s infinite
Clase
CSS
scale-0
transform: scale(0)
scale-50
transform: scale(0.5)
scale-100
transform: scale(1)
scale-150
transform: scale(1.5)
rotate-0
transform: rotate(0deg)
rotate-45
transform: rotate(45deg)
rotate-90
transform: rotate(90deg)
rotate-180
transform: rotate(180deg)
-rotate-45
transform: rotate(-45deg)
translate-x-0
transform: translateX(0)
translate-x-4
transform: translateX(1rem)
translate-x-full
transform: translateX(100%)
-translate-x-4
transform: translateX(-1rem)
translate-y-4
transform: translateY(1rem)
skew-x-3
transform: skewX(3deg)
skew-y-3
transform: skewY(3deg)
origin-center
transform-origin: center
origin-top
transform-origin: top
Clase
CSS
cursor-pointer
cursor: pointer
cursor-default
cursor: default
cursor-not-allowed
cursor: not-allowed
cursor-wait
cursor: wait
cursor-grab
cursor: grab
pointer-events-none
pointer-events: none
pointer-events-auto
pointer-events: auto
select-none
user-select: none
select-text
user-select: text
select-all
user-select: all
resize
resize: both
resize-none
resize: none
resize-x
resize: horizontal
resize-y
resize: vertical
scroll-smooth
scroll-behavior: smooth
scroll-auto
scroll-behavior: auto
Clase
CSS
hover:p. ej. hover:bg-blue-600
al pasar el ratón
focus:p. ej. focus:ring-2
al recibir el foco
focus-visible:p. ej. focus-visible:outline-none
al recibir el foco con el teclado
active:p. ej. active:bg-blue-700
al pulsar (activo)
disabled:p. ej. disabled:opacity-50
cuando está desactivado
first:p. ej. first:mt-0
primer hijo
last:p. ej. last:mb-0
último hijo
odd:p. ej. odd:bg-gray-100
hijos impares
even:p. ej. even:bg-white
hijos pares
group-hover:p. ej. group-hover:visible
cuando se pasa el ratón por el padre .group
peer-focus:p. ej. peer-focus:ring
cuando el hermano .peer tiene el foco
dark:p. ej. dark:bg-gray-900
modo oscuro
motion-safe:p. ej. motion-safe:animate-spin
si el usuario permite animaciones
motion-reduce:p. ej. motion-reduce:animate-none
si el usuario prefiere menos movimiento
Clase
CSS
overflow-auto
overflow: auto
overflow-hidden
overflow: hidden
overflow-visible
overflow: visible
overflow-scroll
overflow: scroll
overflow-x-auto
overflow-x: auto
overflow-y-auto
overflow-y: auto
overflow-x-hidden
overflow-x: hidden
overflow-y-hidden
overflow-y: hidden
z-0
z-index: 0
z-10
z-index: 10
z-20
z-index: 20
z-30
z-index: 30
z-40
z-index: 40
z-50
z-index: 50
z-auto
z-index: auto
-z-10
z-index: -10
Consejo: usa valores arbitrarios entre corchetes: w-[200px], text-[#1da1f2], grid-cols-[1fr_2fr]

Sobre esta herramienta

Aunque uses Tailwind a diario, es fácil olvidar si era justify-between o items-center lo que querías, cuánto mide p-6 o qué hace exactamente truncate. Esta chuleta reúne las clases más usadas junto al CSS que generan, agrupadas por secciones: puntos de ruptura, display, posición, flexbox, grid, alineación, espaciado, tamaño, tipografía, fondos, bordes, efectos, transiciones, transformaciones, interactividad y estados.

Escribe en el buscador y la lista se filtra al momento por nombre de clase, por propiedad CSS o por ejemplo; así puedes buscar «gap», «flex-direction» o «hover». La barra de secciones te deja ver solo una, y puedes plegar o desplegar cada bloque pulsando su título. El botón de cada fila copia la clase al portapapeles para pegarla directamente en tu HTML o JSX.

Es una referencia estática que funciona en tu navegador, sin conexión a servicios externos. Recoge una selección de las clases más frecuentes, no la documentación completa, y los valores corresponden a la configuración por defecto de Tailwind; si tu proyecto cambia el tema (colores, espaciados, puntos de ruptura), los valores reales pueden ser otros. Para casos concretos, recurre a los valores arbitrarios entre corchetes.

Preguntas frecuentes

¿Cuánto mide cada unidad de espaciado en Tailwind?

Por defecto, cada unidad equivale a 0,25rem, que son 4 px con la fuente base de 16 px. Así, p-4 es 1rem (16 px) y gap-2 es 0,5rem (8 px).

¿Cómo uso un valor que no está en la escala?

Con valores arbitrarios entre corchetes, por ejemplo w-[200px], text-[#1da1f2] o grid-cols-[1fr_2fr]. Los espacios dentro del valor se escriben con guion bajo.

¿Qué significan sm:, md: y lg:?

Son prefijos de punto de ruptura que aplican la clase a partir de un ancho mínimo: 640, 768 y 1024 px por defecto. Tailwind es mobile first, así que las clases sin prefijo se aplican en todos los tamaños.

¿Sirve para Tailwind 3 y Tailwind 4?

La mayoría de clases de esta chuleta existen en ambas versiones. Algunas cambian de nombre o de valor en la 4, como los degradados o ciertas sombras, así que ante la duda consulta la documentación de tu versión.

Herramientas relacionadas

HEX a RGBConvierte un código de color hexadecimal a RGB (y a otros formatos) al instante.RGB a HEXConvierte valores RGB a código hexadecimal para usarlo en CSS, diseño o marca.Conversor HSLPasa colores de HSL a HEX o RGB y al revés, con vista previa del color.Codificador y decodificadorCodifica y decodifica Base64, URL y entidades HTML, y genera hashes MD5 y SHA.Generador de hash SHACalcula el hash SHA-1, SHA-256, SHA-512 o MD5 de cualquier texto en tu navegador.Probador de expresiones regularesPrueba tus expresiones regulares en tiempo real y ve qué coincide y qué grupos captura.