Puntos de quiebre responsivosEstados (Variantes)EspaciadoTamañoPantallaFlexboxAlineaciónCuadrículaPosiciónTipografíaAlineación y decoración de textoColoresBordesEfectosTransiciones y animaciónTransformacionesDesbordamiento y otrosPaleta de colores
#Puntos de quiebre responsivos
| Clase | CSS | Descripción | |
|---|---|---|---|
sm: | @media (min-width: 640px) | Pantallas pequeñas y mayores | |
md: | @media (min-width: 768px) | Pantallas medianas y mayores | |
lg: | @media (min-width: 1024px) | Pantallas grandes y mayores | |
xl: | @media (min-width: 1280px) | Pantallas extra grandes y mayores | |
2xl: | @media (min-width: 1536px) | Pantallas 2x extra grandes y mayores |
#Estados (Variantes)
| Clase | CSS | Descripción | |
|---|---|---|---|
hover: | :hover | Al pasar el mouse | |
focus: | :focus | Al enfocar | |
active: | :active | Al hacer clic | |
disabled: | :disabled | Cuando está deshabilitado | |
first: | :first-child | Primer hijo | |
last: | :last-child | Último hijo | |
odd: | :nth-child(odd) | Hijos impares | |
even: | :nth-child(even) | Hijos pares | |
group-hover: | .group:hover & | Al pasar sobre el grupo padre | |
dark: | @media (prefers-color-scheme: dark) | Modo oscuro |
#Espaciado
| Clase | CSS | Descripción | |
|---|---|---|---|
p-{size} | padding | Relleno en todos los lados | |
px-{size} | padding-left/right | Relleno horizontal | |
py-{size} | padding-top/bottom | Relleno vertical | |
pt/pr/pb/pl-{size} | padding-top/right/bottom/left | Relleno de un lado | |
m-{size} | margin | Margen en todos los lados | |
mx-{size} | margin-left/right | Margen horizontal | |
my-{size} | margin-top/bottom | Margen vertical | |
mt/mr/mb/ml-{size} | margin-top/right/bottom/left | Margen de un lado | |
mx-auto | margin: 0 auto | Centrar horizontalmente | |
gap-{size} | gap | Espacio Flex/Grid | |
gap-x-{size} | column-gap | Espacio horizontal | |
gap-y-{size} | row-gap | Espacio vertical | |
space-x-{size} | > * + * { margin-left } | Espacio horizontal entre hijos | |
space-y-{size} | > * + * { margin-top } | Espacio vertical entre hijos |
#Tamaño
| Clase | CSS | Descripción | |
|---|---|---|---|
w-{size} | width | Ancho | |
w-full | width: 100% | Ancho completo | |
w-screen | width: 100vw | Ancho de pantalla | |
w-auto | width: auto | Ancho automático | |
w-fit | width: fit-content | Ajustar al contenido | |
min-w-0 | min-width: 0 | Ancho mínimo 0 | |
min-w-full | min-width: 100% | Ancho mínimo 100% | |
max-w-{size} | max-width | Ancho máximo | |
max-w-screen-{bp} | max-width: breakpoint | Ancho máximo del punto de quiebre | |
h-{size} | height | Alto | |
h-full | height: 100% | Alto completo | |
h-screen | height: 100vh | Alto de pantalla | |
min-h-screen | min-height: 100vh | Alto mínimo de pantalla | |
max-h-{size} | max-height | Alto máximo | |
size-{size} | width + height | Ancho y alto juntos |
#Pantalla
| Clase | CSS | Descripción | |
|---|---|---|---|
block | display: block | Elemento de bloque | |
inline-block | display: inline-block | Bloque en línea | |
inline | display: inline | Elemento en línea | |
flex | display: flex | Contenedor flex | |
inline-flex | display: inline-flex | Flex en línea | |
grid | display: grid | Contenedor grid | |
inline-grid | display: inline-grid | Grid en línea | |
hidden | display: none | Oculto | |
contents | display: contents | Solo contenido |
#Flexbox
| Clase | CSS | Descripción | |
|---|---|---|---|
flex-row | flex-direction: row | Dirección horizontal | |
flex-col | flex-direction: column | Dirección vertical | |
flex-row-reverse | flex-direction: row-reverse | Horizontal inverso | |
flex-col-reverse | flex-direction: column-reverse | Vertical inverso | |
flex-wrap | flex-wrap: wrap | Permitir envoltura | |
flex-nowrap | flex-wrap: nowrap | Sin envoltura | |
flex-1 | flex: 1 1 0% | Llenar espacio restante | |
flex-auto | flex: 1 1 auto | Tamaño automático | |
flex-none | flex: none | Tamaño fijo | |
grow | flex-grow: 1 | Permitir crecer | |
grow-0 | flex-grow: 0 | Prevenir crecimiento | |
shrink | flex-shrink: 1 | Permitir encoger | |
shrink-0 | flex-shrink: 0 | Prevenir encogimiento |
#Alineación
| Clase | CSS | Descripción | |
|---|---|---|---|
justify-start | justify-content: flex-start | Inicio del eje principal | |
justify-center | justify-content: center | Centro del eje principal | |
justify-end | justify-content: flex-end | Fin del eje principal | |
justify-between | justify-content: space-between | Espacio entre | |
justify-around | justify-content: space-around | Espacio alrededor | |
justify-evenly | justify-content: space-evenly | Espacio uniforme | |
items-start | align-items: flex-start | Inicio del eje transversal | |
items-center | align-items: center | Centro del eje transversal | |
items-end | align-items: flex-end | Fin del eje transversal | |
items-baseline | align-items: baseline | Línea base del eje transversal | |
items-stretch | align-items: stretch | Estirar para llenar | |
self-auto | align-self: auto | Auto individual | |
self-start | align-self: flex-start | Inicio individual | |
self-center | align-self: center | Centro individual | |
self-end | align-self: flex-end | Fin individual |
#Cuadrícula
| Clase | CSS | Descripción | |
|---|---|---|---|
grid-cols-{n} | grid-template-columns: repeat(n, 1fr) | n columnas | |
grid-rows-{n} | grid-template-rows: repeat(n, 1fr) | n filas | |
col-span-{n} | grid-column: span n | Abarcar n columnas | |
col-start-{n} | grid-column-start: n | Comenzar en columna n | |
col-end-{n} | grid-column-end: n | Terminar en columna n | |
row-span-{n} | grid-row: span n | Abarcar n filas | |
row-start-{n} | grid-row-start: n | Comenzar en fila n | |
row-end-{n} | grid-row-end: n | Terminar en fila n | |
auto-cols-auto | grid-auto-columns: auto | Tamaño de columna automático | |
auto-cols-fr | grid-auto-columns: 1fr | Columna automática 1fr | |
auto-rows-auto | grid-auto-rows: auto | Tamaño de fila automático |
#Posición
| Clase | CSS | Descripción | |
|---|---|---|---|
static | position: static | Posición estática | |
relative | position: relative | Posición relativa | |
absolute | position: absolute | Posición absoluta | |
fixed | position: fixed | Posición fija | |
sticky | position: sticky | Posición pegajosa | |
top-{size} | top | Desplazamiento superior | |
right-{size} | right | Desplazamiento derecho | |
bottom-{size} | bottom | Desplazamiento inferior | |
left-{size} | left | Desplazamiento izquierdo | |
inset-{size} | top/right/bottom/left | Desplazamiento en todas direcciones | |
inset-x-{size} | left/right | Desplazamiento horizontal | |
inset-y-{size} | top/bottom | Desplazamiento vertical | |
z-{n} | z-index | Índice Z | |
z-auto | z-index: auto | Índice Z automático |
#Tipografía
| Clase | CSS | Descripción | |
|---|---|---|---|
font-sans | font-family: sans-serif | Fuente sans-serif | |
font-serif | font-family: serif | Fuente serif | |
font-mono | font-family: monospace | Fuente monoespaciada | |
text-xs | font-size: 0.75rem | Texto extra pequeño | |
text-sm | font-size: 0.875rem | Texto pequeño | |
text-base | font-size: 1rem | Texto base | |
text-lg | font-size: 1.125rem | Texto grande | |
text-xl | font-size: 1.25rem | Texto extra grande | |
text-2xl ~ 9xl | font-size: 1.5rem ~ 8rem | Tamaños de texto más grandes | |
font-thin | font-weight: 100 | Peso delgado | |
font-light | font-weight: 300 | Peso ligero | |
font-normal | font-weight: 400 | Peso normal | |
font-medium | font-weight: 500 | Peso medio | |
font-semibold | font-weight: 600 | Seminegrita | |
font-bold | font-weight: 700 | Negrita | |
italic | font-style: italic | Itálica | |
not-italic | font-style: normal | No itálica | |
leading-{size} | line-height | Altura de línea | |
tracking-{size} | letter-spacing | Espaciado de letras |
#Alineación y decoración de texto
| Clase | CSS | Descripción | |
|---|---|---|---|
text-left | text-align: left | Alinear a la izquierda | |
text-center | text-align: center | Alinear al centro | |
text-right | text-align: right | Alinear a la derecha | |
text-justify | text-align: justify | Justificar | |
underline | text-decoration: underline | Subrayado | |
line-through | text-decoration: line-through | Tachado | |
no-underline | text-decoration: none | Sin decoración | |
uppercase | text-transform: uppercase | Mayúsculas | |
lowercase | text-transform: lowercase | Minúsculas | |
capitalize | text-transform: capitalize | Capitalizar | |
truncate | overflow: hidden; text-overflow: ellipsis | Truncar con puntos suspensivos | |
line-clamp-{n} | -webkit-line-clamp: n | Limitar a n líneas | |
whitespace-nowrap | white-space: nowrap | Sin ajuste de línea | |
break-words | word-wrap: break-word | Romper palabras |
#Colores
| Clase | CSS | Descripción | |
|---|---|---|---|
text-{color}-{shade} | color | Color de texto | |
bg-{color}-{shade} | background-color | Color de fondo | |
bg-gradient-to-{dir} | background-image: linear-gradient | Dirección del degradado | |
from-{color} | from color | Color inicial del degradado | |
via-{color} | via color | Color intermedio del degradado | |
to-{color} | to color | Color final del degradado | |
text-transparent | color: transparent | Texto transparente | |
bg-transparent | background-color: transparent | Fondo transparente | |
text-current | color: currentColor | Heredar color actual |
#Bordes
| Clase | CSS | Descripción | |
|---|---|---|---|
border | border-width: 1px | Borde de 1px | |
border-{n} | border-width: npx | Borde de n píxeles | |
border-t/r/b/l-{n} | border-top/right/bottom/left-width | Borde direccional | |
border-{color} | border-color | Color del borde | |
border-solid | border-style: solid | Borde sólido | |
border-dashed | border-style: dashed | Borde discontinuo | |
border-dotted | border-style: dotted | Borde punteado | |
border-none | border-style: none | Sin borde | |
rounded | border-radius: 0.25rem | Ligeramente redondeado | |
rounded-md | border-radius: 0.375rem | Redondeado medio | |
rounded-lg | border-radius: 0.5rem | Redondeado grande | |
rounded-xl | border-radius: 0.75rem | Redondeado extra grande | |
rounded-full | border-radius: 9999px | Círculo completo | |
rounded-none | border-radius: 0 | Sin redondeo | |
rounded-t/r/b/l-{size} | border-radius (corners) | Esquinas específicas |
#Efectos
| Clase | CSS | Descripción | |
|---|---|---|---|
shadow-sm | box-shadow: small | Sombra pequeña | |
shadow | box-shadow: default | Sombra predeterminada | |
shadow-md | box-shadow: medium | Sombra mediana | |
shadow-lg | box-shadow: large | Sombra grande | |
shadow-xl | box-shadow: extra large | Sombra extra grande | |
shadow-2xl | box-shadow: 2x large | Sombra 2x grande | |
shadow-inner | box-shadow: inset | Sombra interior | |
shadow-none | box-shadow: none | Sin sombra | |
opacity-{n} | opacity: n% | Opacidad (0-100) | |
blur | filter: blur(8px) | Desenfoque | |
blur-{size} | filter: blur(size) | Cantidad de desenfoque | |
brightness-{n} | filter: brightness(n%) | Brillo | |
contrast-{n} | filter: contrast(n%) | Contraste | |
grayscale | filter: grayscale(100%) | Escala de grises | |
invert | filter: invert(100%) | Invertir |
#Transiciones y animación
| Clase | CSS | Descripción | |
|---|---|---|---|
transition | transition-property: all | Transición predeterminada | |
transition-all | transition-property: all | Transición de todo | |
transition-colors | transition-property: colors | Transición de color | |
transition-opacity | transition-property: opacity | Transición de opacidad | |
transition-transform | transition-property: transform | Transición de transformación | |
duration-{ms} | transition-duration: ms | Duración | |
ease-linear | transition-timing: linear | Suavizado lineal | |
ease-in | transition-timing: ease-in | Suavizado de entrada | |
ease-out | transition-timing: ease-out | Suavizado de salida | |
ease-in-out | transition-timing: ease-in-out | Suavizado de entrada y salida | |
delay-{ms} | transition-delay: ms | Retraso | |
animate-spin | animation: spin | Animación de giro | |
animate-ping | animation: ping | Animación de ping | |
animate-pulse | animation: pulse | Animación de pulso | |
animate-bounce | animation: bounce | Animación de rebote |
#Transformaciones
| Clase | CSS | Descripción | |
|---|---|---|---|
scale-{n} | transform: scale(n) | Escala | |
scale-x-{n} | transform: scaleX(n) | Escala X | |
scale-y-{n} | transform: scaleY(n) | Escala Y | |
rotate-{deg} | transform: rotate(deg) | Rotar | |
translate-x-{size} | transform: translateX | Trasladar X | |
translate-y-{size} | transform: translateY | Trasladar Y | |
skew-x-{deg} | transform: skewX(deg) | Sesgar X | |
skew-y-{deg} | transform: skewY(deg) | Sesgar Y | |
origin-center | transform-origin: center | Origen en el centro | |
origin-top | transform-origin: top | Origen arriba | |
origin-bottom | transform-origin: bottom | Origen abajo |
#Desbordamiento y otros
| Clase | CSS | Descripción | |
|---|---|---|---|
overflow-auto | overflow: auto | Desplazar si es necesario | |
overflow-hidden | overflow: hidden | Ocultar desbordamiento | |
overflow-scroll | overflow: scroll | Siempre desplazar | |
overflow-visible | overflow: visible | Mostrar desbordamiento | |
overflow-x-{value} | overflow-x | Desbordamiento horizontal | |
overflow-y-{value} | overflow-y | Desbordamiento vertical | |
cursor-pointer | cursor: pointer | Cursor de puntero | |
cursor-not-allowed | cursor: not-allowed | Cursor no permitido | |
pointer-events-none | pointer-events: none | Deshabilitar eventos de puntero | |
select-none | user-select: none | Prevenir selección | |
select-text | user-select: text | Permitir selección de texto | |
select-all | user-select: all | Seleccionar todo al hacer clic | |
sr-only | screen reader only | Solo lector de pantalla |
#Paleta de colores
slate
gray
zinc
red
orange
amber
yellow
lime
green
emerald
teal
cyan
sky
blue
indigo
violet
purple
fuchsia
pink
rose
💡 Click a color block to copy the class name (e.g., blue-500)
Usage: text-{color}-{shade}, bg-{color}-{shade}, border-{color}-{shade}
#Referencia de escala de tamaño
| Clase | Valor | Clase | Valor |
|---|---|---|---|
| 0 | 0px | px | 1px |
| 0.5 | 0.125rem (2px) | 1 | 0.25rem (4px) |
| 2 | 0.5rem (8px) | 3 | 0.75rem (12px) |
| 4 | 1rem (16px) | 5 | 1.25rem (20px) |
| 6 | 1.5rem (24px) | 8 | 2rem (32px) |
| 10 | 2.5rem (40px) | 12 | 3rem (48px) |
| 16 | 4rem (64px) | 20 | 5rem (80px) |
| 24 | 6rem (96px) | 32 | 8rem (128px) |
#Preguntas frecuentes (FAQ)
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.