Cheatsheet generado a partir de las URLs oficiales de Tailwind CSS incluidas en tailwind-docs-notebooks.csv.
Formato básico:
Clase de UtilidadPropiedad CSSExplicación Breve
base flexible
Fuente oficial: https://tailwindcss.com/docs/flex-basis
Utilidades para controlar el tamaño inicial de elementos flexibles.
| Clase de Utilidad | Propiedad CSS | Explicación Breve |
|---|---|---|
basis- <number> | flex-basis: calc(var(--spacing) * <number> ); | Aplica flex-basis: calc(var(--spacing) * <number> ); al elemento; úsalo cuando necesites ajustar flex-basis con esta utilidad. |
basis- <fraction> | flex-basis: calc( <fraction> * 100%); | Aplica flex-basis: calc( <fraction> * 100%); al elemento; úsalo cuando necesites ajustar flex-basis con esta utilidad. |
basis-full | flex-basis: 100%; | Aplica flex-basis: 100%; al elemento; úsalo cuando necesites ajustar flex-basis con esta utilidad. |
basis-auto | flex-basis: auto; | Aplica flex-basis: auto; al elemento; úsalo cuando necesites ajustar flex-basis con esta utilidad. |
basis-3xs | flex-basis: var(--container-3xs); /* 16rem (256px) */ | Aplica flex-basis: var(--container-3xs); /* 16rem (256px) */ al elemento; úsalo cuando necesites ajustar flex-basis con esta utilidad. |
basis-2xs | flex-basis: var(--container-2xs); /* 18rem (288px) */ | Aplica flex-basis: var(--container-2xs); /* 18rem (288px) */ al elemento; úsalo cuando necesites ajustar flex-basis con esta utilidad. |
basis-xs | flex-basis: var(--container-xs); /* 20rem (320px) */ | Aplica flex-basis: var(--container-xs); /* 20rem (320px) */ al elemento; úsalo cuando necesites ajustar flex-basis con esta utilidad. |
basis-sm | flex-basis: var(--container-sm); /* 24rem (384px) */ | Aplica flex-basis: var(--container-sm); /* 24rem (384px) */ al elemento; úsalo cuando necesites ajustar flex-basis con esta utilidad. |
basis-md | flex-basis: var(--container-md); /* 28rem (448px) */ | Aplica flex-basis: var(--container-md); /* 28rem (448px) */ al elemento; úsalo cuando necesites ajustar flex-basis con esta utilidad. |
basis-lg | flex-basis: var(--container-lg); /* 32rem (512px) */ | Aplica flex-basis: var(--container-lg); /* 32rem (512px) */ al elemento; úsalo cuando necesites ajustar flex-basis con esta utilidad. |
basis-xl | flex-basis: var(--container-xl); /* 36rem (576px) */ | Aplica flex-basis: var(--container-xl); /* 36rem (576px) */ al elemento; úsalo cuando necesites ajustar flex-basis con esta utilidad. |
basis-2xl | flex-basis: var(--container-2xl); /* 42rem (672px) */ | Aplica flex-basis: var(--container-2xl); /* 42rem (672px) */ al elemento; úsalo cuando necesites ajustar flex-basis con esta utilidad. |
basis-3xl | flex-basis: var(--container-3xl); /* 48rem (768px) */ | Aplica flex-basis: var(--container-3xl); /* 48rem (768px) */ al elemento; úsalo cuando necesites ajustar flex-basis con esta utilidad. |
basis-4xl | flex-basis: var(--container-4xl); /* 56rem (896px) */ | Aplica flex-basis: var(--container-4xl); /* 56rem (896px) */ al elemento; úsalo cuando necesites ajustar flex-basis con esta utilidad. |
basis-5xl | flex-basis: var(--container-5xl); /* 64rem (1024px) */ | Aplica flex-basis: var(--container-5xl); /* 64rem (1024px) */ al elemento; úsalo cuando necesites ajustar flex-basis con esta utilidad. |
basis-6xl | flex-basis: var(--container-6xl); /* 72rem (1152px) */ | Aplica flex-basis: var(--container-6xl); /* 72rem (1152px) */ al elemento; úsalo cuando necesites ajustar flex-basis con esta utilidad. |
basis-7xl | flex-basis: var(--container-7xl); /* 80rem (1280px) */ | Aplica flex-basis: var(--container-7xl); /* 80rem (1280px) */ al elemento; úsalo cuando necesites ajustar flex-basis con esta utilidad. |
basis-( <custom-property> ) | flex-basis: var( <custom-property> ); | Aplica flex-basis: var( <custom-property> ); al elemento; úsalo cuando necesites ajustar flex-basis con esta utilidad. |
basis-[ <value> ] | flex-basis: <value> ; | Aplica flex-basis: <value> ; al elemento; úsalo cuando necesites ajustar flex-basis con esta utilidad. |
dirección flexible
Fuente oficial: https://tailwindcss.com/docs/flex-direction
Utilidades para controlar la dirección de elementos flexibles.
| Clase de Utilidad | Propiedad CSS | Explicación Breve |
|---|---|---|
flex-row | flex-direction: row; | Aplica flex-direction: row; al elemento; úsalo cuando necesites ajustar flex-direction con esta utilidad. |
flex-row-reverse | flex-direction: row-reverse; | Aplica flex-direction: row-reverse; al elemento; úsalo cuando necesites ajustar flex-direction con esta utilidad. |
flex-col | flex-direction: column; | Aplica flex-direction: column; al elemento; úsalo cuando necesites ajustar flex-direction con esta utilidad. |
flex-col-reverse | flex-direction: column-reverse; | Aplica flex-direction: column-reverse; al elemento; úsalo cuando necesites ajustar flex-direction con esta utilidad. |
envoltura flexible
Fuente oficial: https://tailwindcss.com/docs/flex-wrap
Utilidades para controlar cómo se ajustan los elementos flexibles.
| Clase de Utilidad | Propiedad CSS | Explicación Breve |
|---|---|---|
flex-nowrap | flex-wrap: nowrap; | Aplica flex-wrap: nowrap; al elemento; úsalo cuando necesites ajustar flex-wrap con esta utilidad. |
flex-wrap | flex-wrap: wrap; | Aplica flex-wrap: wrap; al elemento; úsalo cuando necesites ajustar flex-wrap con esta utilidad. |
flex-wrap-reverse | flex-wrap: wrap-reverse; | Aplica flex-wrap: wrap-reverse; al elemento; úsalo cuando necesites ajustar flex-wrap con esta utilidad. |
doblar
Fuente oficial: https://tailwindcss.com/docs/flex
Utilidades para controlar cómo crecen y se encogen los elementos flexibles.
| Clase de Utilidad | Propiedad CSS | Explicación Breve |
|---|---|---|
flex- <number> | flex: <number> ; | Aplica flex: <number> ; al elemento; úsalo cuando necesites ajustar flex con esta utilidad. |
flex- <fraction> | flex: calc( <fraction> * 100%); | Aplica flex: calc( <fraction> * 100%); al elemento; úsalo cuando necesites ajustar flex con esta utilidad. |
flex-auto | flex: auto; | Aplica flex: auto; al elemento; úsalo cuando necesites ajustar flex con esta utilidad. |
flex-initial | flex: 0 auto; | Aplica flex: 0 auto; al elemento; úsalo cuando necesites ajustar flex con esta utilidad. |
flex-none | flex: none; | Aplica flex: none; al elemento; úsalo cuando necesites ajustar flex con esta utilidad. |
flex-( <custom-property> ) | flex: var( <custom-property> ); | Aplica flex: var( <custom-property> ); al elemento; úsalo cuando necesites ajustar flex con esta utilidad. |
flex-[ <value> ] | flex: <value> ; | Aplica flex: <value> ; al elemento; úsalo cuando necesites ajustar flex con esta utilidad. |
crecimiento flexible
Fuente oficial: https://tailwindcss.com/docs/flex-grow
Utilidades para controlar cómo crecen los elementos flexibles.
| Clase de Utilidad | Propiedad CSS | Explicación Breve |
|---|---|---|
grow | flex-grow: 1; | Aplica flex-grow: 1; al elemento; úsalo cuando necesites ajustar flex-grow con esta utilidad. |
grow- <number> | flex-grow: <number> ; | Aplica flex-grow: <number> ; al elemento; úsalo cuando necesites ajustar flex-grow con esta utilidad. |
grow-[ <value> ] | flex-grow: <value> ; | Aplica flex-grow: <value> ; al elemento; úsalo cuando necesites ajustar flex-grow con esta utilidad. |
grow-( <custom-property> ) | flex-grow: var( <custom-property> ); | Aplica flex-grow: var( <custom-property> ); al elemento; úsalo cuando necesites ajustar flex-grow con esta utilidad. |
flex-contraíble
Fuente oficial: https://tailwindcss.com/docs/flex-shrink
Utilidades para controlar cómo se encogen los elementos flexibles.
| Clase de Utilidad | Propiedad CSS | Explicación Breve |
|---|---|---|
shrink | flex-shrink: 1; | Aplica flex-shrink: 1; al elemento; úsalo cuando necesites ajustar flex-shrink con esta utilidad. |
shrink- <number> | flex-shrink: <number> ; | Aplica flex-shrink: <number> ; al elemento; úsalo cuando necesites ajustar flex-shrink con esta utilidad. |
shrink-[ <value> ] | flex-shrink: <value> ; | Aplica flex-shrink: <value> ; al elemento; úsalo cuando necesites ajustar flex-shrink con esta utilidad. |
shrink-( <custom-property> ) | flex-shrink: var( <custom-property> ); | Aplica flex-shrink: var( <custom-property> ); al elemento; úsalo cuando necesites ajustar flex-shrink con esta utilidad. |
orden
Fuente oficial: https://tailwindcss.com/docs/order
Utilidades para controlar el orden de elementos flexibles y de cuadrícula.
| Clase de Utilidad | Propiedad CSS | Explicación Breve |
|---|---|---|
order- <number> | order: <number> ; | Aplica order: <number> ; al elemento; úsalo cuando necesites ajustar order con esta utilidad. |
-order- <number> | order: calc( <number> * -1); | Aplica order: calc( <number> * -1); al elemento; úsalo cuando necesites ajustar order con esta utilidad. |
order-first | order: -9999; | Aplica order: -9999; al elemento; úsalo cuando necesites ajustar order con esta utilidad. |
order-last | order: 9999; | Aplica order: 9999; al elemento; úsalo cuando necesites ajustar order con esta utilidad. |
order-none | order: 0; | Aplica order: 0; al elemento; úsalo cuando necesites ajustar order con esta utilidad. |
order-( <custom-property> ) | order: var( <custom-property> ); | Aplica order: var( <custom-property> ); al elemento; úsalo cuando necesites ajustar order con esta utilidad. |
order-[ <value> ] | order: <value> ; | Aplica order: <value> ; al elemento; úsalo cuando necesites ajustar order con esta utilidad. |
columnas-plantilla-cuadricula
Fuente oficial: https://tailwindcss.com/docs/grid-template-columns
Utilidades para especificar las columnas en un diseño de cuadrícula.
| Clase de Utilidad | Propiedad CSS | Explicación Breve |
|---|---|---|
grid-cols- <number> | grid-template-columns: repeat( <number> , minmax(0, 1fr)); | Aplica grid-template-columns: repeat( <number> , minmax(0, 1fr)); al elemento; úsalo cuando necesites ajustar grid-template-columns con esta utilidad. |
grid-cols-none | grid-template-columns: none; | Aplica grid-template-columns: none; al elemento; úsalo cuando necesites ajustar grid-template-columns con esta utilidad. |
grid-cols-subgrid | grid-template-columns: subgrid; | Aplica grid-template-columns: subgrid; al elemento; úsalo cuando necesites ajustar grid-template-columns con esta utilidad. |
grid-cols-[ <value> ] | grid-template-columns: <value> ; | Aplica grid-template-columns: <value> ; al elemento; úsalo cuando necesites ajustar grid-template-columns con esta utilidad. |
grid-cols-( <custom-property> ) | grid-template-columns: var( <custom-property> ); | Aplica grid-template-columns: var( <custom-property> ); al elemento; úsalo cuando necesites ajustar grid-template-columns con esta utilidad. |
columna de cuadrícula
Fuente oficial: https://tailwindcss.com/docs/grid-column
Utilidades para controlar cómo se dimensionan y colocan los elementos en las columnas de la cuadrícula.
| Clase de Utilidad | Propiedad CSS | Explicación Breve |
|---|---|---|
col-span- <number> | grid-column: span <number> / span <number> ; | Aplica grid-column: span <number> / span <number> ; al elemento; úsalo cuando necesites ajustar grid-column con esta utilidad. |
col-span-full | grid-column: 1 / -1; | Aplica grid-column: 1 / -1; al elemento; úsalo cuando necesites ajustar grid-column con esta utilidad. |
col-span-( <custom-property> ) | grid-column: span var( <custom-property> ) / span var( <custom-property> ); | Aplica grid-column: span var( <custom-property> ) / span var( <custom-property> ); al elemento; úsalo cuando necesites ajustar grid-column con esta utilidad. |
col-span-[ <value> ] | grid-column: span <value> / span <value> ; | Aplica grid-column: span <value> / span <value> ; al elemento; úsalo cuando necesites ajustar grid-column con esta utilidad. |
col-start- <number> | grid-column-start: <number> ; | Aplica grid-column-start: <number> ; al elemento; úsalo cuando necesites ajustar grid-column con esta utilidad. |
-col-start- <number> | grid-column-start: calc( <number> * -1); | Aplica grid-column-start: calc( <number> * -1); al elemento; úsalo cuando necesites ajustar grid-column con esta utilidad. |
col-start-auto | grid-column-start: auto; | Aplica grid-column-start: auto; al elemento; úsalo cuando necesites ajustar grid-column con esta utilidad. |
col-start-( <custom-property> ) | grid-column-start: var( <custom-property> ); | Aplica grid-column-start: var( <custom-property> ); al elemento; úsalo cuando necesites ajustar grid-column con esta utilidad. |
col-start-[ <value> ] | grid-column-start: <value> ; | Aplica grid-column-start: <value> ; al elemento; úsalo cuando necesites ajustar grid-column con esta utilidad. |
col-end- <number> | grid-column-end: <number> ; | Aplica grid-column-end: <number> ; al elemento; úsalo cuando necesites ajustar grid-column con esta utilidad. |
-col-end- <number> | grid-column-end: calc( <number> * -1); | Aplica grid-column-end: calc( <number> * -1); al elemento; úsalo cuando necesites ajustar grid-column con esta utilidad. |
col-end-auto | grid-column-end: auto; | Aplica grid-column-end: auto; al elemento; úsalo cuando necesites ajustar grid-column con esta utilidad. |
col-end-( <custom-property> ) | grid-column-end: var( <custom-property> ); | Aplica grid-column-end: var( <custom-property> ); al elemento; úsalo cuando necesites ajustar grid-column con esta utilidad. |
col-end-[ <value> ] | grid-column-end: <value> ; | Aplica grid-column-end: <value> ; al elemento; úsalo cuando necesites ajustar grid-column con esta utilidad. |
col-auto | grid-column: auto; | Aplica grid-column: auto; al elemento; úsalo cuando necesites ajustar grid-column con esta utilidad. |
col- <number> | grid-column: <number> ; | Aplica grid-column: <number> ; al elemento; úsalo cuando necesites ajustar grid-column con esta utilidad. |
-col- <number> | grid-column: calc( <number> * -1); | Aplica grid-column: calc( <number> * -1); al elemento; úsalo cuando necesites ajustar grid-column con esta utilidad. |
col-( <custom-property> ) | grid-column: var( <custom-property> ); | Aplica grid-column: var( <custom-property> ); al elemento; úsalo cuando necesites ajustar grid-column con esta utilidad. |
col-[ <value> ] | grid-column: <value> ; | Aplica grid-column: <value> ; al elemento; úsalo cuando necesites ajustar grid-column con esta utilidad. |
filas de plantilla de cuadrícula
Fuente oficial: https://tailwindcss.com/docs/grid-template-rows
Utilidades para especificar las filas en un diseño de cuadrícula.
| Clase de Utilidad | Propiedad CSS | Explicación Breve |
|---|---|---|
grid-rows- <number> | grid-template-rows: repeat( <number> , minmax(0, 1fr)); | Aplica grid-template-rows: repeat( <number> , minmax(0, 1fr)); al elemento; úsalo cuando necesites ajustar grid-template-rows con esta utilidad. |
grid-rows-none | grid-template-rows: none; | Aplica grid-template-rows: none; al elemento; úsalo cuando necesites ajustar grid-template-rows con esta utilidad. |
grid-rows-subgrid | grid-template-rows: subgrid; | Aplica grid-template-rows: subgrid; al elemento; úsalo cuando necesites ajustar grid-template-rows con esta utilidad. |
grid-rows-[ <value> ] | grid-template-rows: <value> ; | Aplica grid-template-rows: <value> ; al elemento; úsalo cuando necesites ajustar grid-template-rows con esta utilidad. |
grid-rows-( <custom-property> ) | grid-template-rows: var( <custom-property> ); | Aplica grid-template-rows: var( <custom-property> ); al elemento; úsalo cuando necesites ajustar grid-template-rows con esta utilidad. |
fila de cuadrícula
Fuente oficial: https://tailwindcss.com/docs/grid-row
Utilidades para controlar cómo se dimensionan y colocan los elementos en las filas de la cuadrícula.
| Clase de Utilidad | Propiedad CSS | Explicación Breve |
|---|---|---|
row-span- <number> | grid-row: span <number> / span <number> ; | Aplica grid-row: span <number> / span <number> ; al elemento; úsalo cuando necesites ajustar grid-row con esta utilidad. |
row-span-full | grid-row: 1 / -1; | Aplica grid-row: 1 / -1; al elemento; úsalo cuando necesites ajustar grid-row con esta utilidad. |
row-span-( <custom-property> ) | grid-row: span var( <custom-property> ) / span var( <custom-property> ); | Aplica grid-row: span var( <custom-property> ) / span var( <custom-property> ); al elemento; úsalo cuando necesites ajustar grid-row con esta utilidad. |
row-span-[ <value> ] | grid-row: span <value> / span <value> ; | Aplica grid-row: span <value> / span <value> ; al elemento; úsalo cuando necesites ajustar grid-row con esta utilidad. |
row-start- <number> | grid-row-start: <number> ; | Aplica grid-row-start: <number> ; al elemento; úsalo cuando necesites ajustar grid-row con esta utilidad. |
-row-start- <number> | grid-row-start: calc( <number> * -1); | Aplica grid-row-start: calc( <number> * -1); al elemento; úsalo cuando necesites ajustar grid-row con esta utilidad. |
row-start-auto | grid-row-start: auto; | Aplica grid-row-start: auto; al elemento; úsalo cuando necesites ajustar grid-row con esta utilidad. |
row-start-( <custom-property> ) | grid-row-start: var( <custom-property> ); | Aplica grid-row-start: var( <custom-property> ); al elemento; úsalo cuando necesites ajustar grid-row con esta utilidad. |
row-start-[ <value> ] | grid-row-start: <value> ; | Aplica grid-row-start: <value> ; al elemento; úsalo cuando necesites ajustar grid-row con esta utilidad. |
row-end- <number> | grid-row-end: <number> ; | Aplica grid-row-end: <number> ; al elemento; úsalo cuando necesites ajustar grid-row con esta utilidad. |
-row-end- <number> | grid-row-end: calc( <number> * -1); | Aplica grid-row-end: calc( <number> * -1); al elemento; úsalo cuando necesites ajustar grid-row con esta utilidad. |
row-end-auto | grid-row-end: auto; | Aplica grid-row-end: auto; al elemento; úsalo cuando necesites ajustar grid-row con esta utilidad. |
row-end-( <custom-property> ) | grid-row-end: var( <custom-property> ); | Aplica grid-row-end: var( <custom-property> ); al elemento; úsalo cuando necesites ajustar grid-row con esta utilidad. |
row-end-[ <value> ] | grid-row-end: <value> ; | Aplica grid-row-end: <value> ; al elemento; úsalo cuando necesites ajustar grid-row con esta utilidad. |
row-auto | grid-row: auto; | Aplica grid-row: auto; al elemento; úsalo cuando necesites ajustar grid-row con esta utilidad. |
row- <number> | grid-row: <number> ; | Aplica grid-row: <number> ; al elemento; úsalo cuando necesites ajustar grid-row con esta utilidad. |
-row- <number> | grid-row: calc( <number> * -1); | Aplica grid-row: calc( <number> * -1); al elemento; úsalo cuando necesites ajustar grid-row con esta utilidad. |
row-( <custom-property> ) | grid-row: var( <custom-property> ); | Aplica grid-row: var( <custom-property> ); al elemento; úsalo cuando necesites ajustar grid-row con esta utilidad. |
row-[ <value> ] | grid-row: <value> ; | Aplica grid-row: <value> ; al elemento; úsalo cuando necesites ajustar grid-row con esta utilidad. |
flujo automático de cuadrícula
Fuente oficial: https://tailwindcss.com/docs/grid-auto-flow
Utilidades para controlar cómo se colocan automáticamente los elementos de una cuadrícula.
| Clase de Utilidad | Propiedad CSS | Explicación Breve |
|---|---|---|
grid-flow-row | grid-auto-flow: row; | Aplica grid-auto-flow: row; al elemento; úsalo cuando necesites ajustar grid-auto-flow con esta utilidad. |
grid-flow-col | grid-auto-flow: column; | Aplica grid-auto-flow: column; al elemento; úsalo cuando necesites ajustar grid-auto-flow con esta utilidad. |
grid-flow-dense | grid-auto-flow: dense; | Aplica grid-auto-flow: dense; al elemento; úsalo cuando necesites ajustar grid-auto-flow con esta utilidad. |
grid-flow-row-dense | grid-auto-flow: row dense; | Aplica grid-auto-flow: row dense; al elemento; úsalo cuando necesites ajustar grid-auto-flow con esta utilidad. |
grid-flow-col-dense | grid-auto-flow: column dense; | Aplica grid-auto-flow: column dense; al elemento; úsalo cuando necesites ajustar grid-auto-flow con esta utilidad. |
columnas-automáticas de cuadrícula
Fuente oficial: https://tailwindcss.com/docs/grid-auto-columns
Utilidades para controlar el tamaño de las columnas de la cuadrícula creadas implícitamente.
| Clase de Utilidad | Propiedad CSS | Explicación Breve |
|---|---|---|
auto-cols-auto | grid-auto-columns: auto; | Aplica grid-auto-columns: auto; al elemento; úsalo cuando necesites ajustar grid-auto-columns con esta utilidad. |
auto-cols-min | grid-auto-columns: min-content; | Aplica grid-auto-columns: min-content; al elemento; úsalo cuando necesites ajustar grid-auto-columns con esta utilidad. |
auto-cols-max | grid-auto-columns: max-content; | Aplica grid-auto-columns: max-content; al elemento; úsalo cuando necesites ajustar grid-auto-columns con esta utilidad. |
auto-cols-fr | grid-auto-columns: minmax(0, 1fr); | Aplica grid-auto-columns: minmax(0, 1fr); al elemento; úsalo cuando necesites ajustar grid-auto-columns con esta utilidad. |
auto-cols-( <custom-property> ) | grid-auto-columns: var( <custom-property> ); | Aplica grid-auto-columns: var( <custom-property> ); al elemento; úsalo cuando necesites ajustar grid-auto-columns con esta utilidad. |
auto-cols-[ <value> ] | grid-auto-columns: <value> ; | Aplica grid-auto-columns: <value> ; al elemento; úsalo cuando necesites ajustar grid-auto-columns con esta utilidad. |
filas-automáticas de cuadrícula
Fuente oficial: https://tailwindcss.com/docs/grid-auto-rows
Utilidades para controlar el tamaño de las filas de la cuadrícula creadas implícitamente.
| Clase de Utilidad | Propiedad CSS | Explicación Breve |
|---|---|---|
auto-rows-auto | grid-auto-rows: auto; | Aplica grid-auto-rows: auto; al elemento; úsalo cuando necesites ajustar grid-auto-rows con esta utilidad. |
auto-rows-min | grid-auto-rows: min-content; | Aplica grid-auto-rows: min-content; al elemento; úsalo cuando necesites ajustar grid-auto-rows con esta utilidad. |
auto-rows-max | grid-auto-rows: max-content; | Aplica grid-auto-rows: max-content; al elemento; úsalo cuando necesites ajustar grid-auto-rows con esta utilidad. |
auto-rows-fr | grid-auto-rows: minmax(0, 1fr); | Aplica grid-auto-rows: minmax(0, 1fr); al elemento; úsalo cuando necesites ajustar grid-auto-rows con esta utilidad. |
auto-rows-( <custom-property> ) | grid-auto-rows: var( <custom-property> ); | Aplica grid-auto-rows: var( <custom-property> ); al elemento; úsalo cuando necesites ajustar grid-auto-rows con esta utilidad. |
auto-rows-[ <value> ] | grid-auto-rows: <value> ; | Aplica grid-auto-rows: <value> ; al elemento; úsalo cuando necesites ajustar grid-auto-rows con esta utilidad. |
brecha
Fuente oficial: https://tailwindcss.com/docs/gap
Utilidades para controlar canales entre elementos de grid y flexbox.
| Clase de Utilidad | Propiedad CSS | Explicación Breve |
|---|---|---|
gap- <number> | gap: calc(var(--spacing) * <value> ); | Aplica gap: calc(var(--spacing) * <value> ); al elemento; úsalo cuando necesites ajustar gap con esta utilidad. |
gap-( <custom-property> ) | gap: var( <custom-property> ); | Aplica gap: var( <custom-property> ); al elemento; úsalo cuando necesites ajustar gap con esta utilidad. |
gap-[ <value> ] | gap: <value> ; | Aplica gap: <value> ; al elemento; úsalo cuando necesites ajustar gap con esta utilidad. |
gap-x- <number> | column-gap: calc(var(--spacing) * <value> ); | Aplica column-gap: calc(var(--spacing) * <value> ); al elemento; úsalo cuando necesites ajustar gap con esta utilidad. |
gap-x-( <custom-property> ) | column-gap: var( <custom-property> ); | Aplica column-gap: var( <custom-property> ); al elemento; úsalo cuando necesites ajustar gap con esta utilidad. |
gap-x-[ <value> ] | column-gap: <value> ; | Aplica column-gap: <value> ; al elemento; úsalo cuando necesites ajustar gap con esta utilidad. |
gap-y- <number> | row-gap: calc(var(--spacing) * <value> ); | Aplica row-gap: calc(var(--spacing) * <value> ); al elemento; úsalo cuando necesites ajustar gap con esta utilidad. |
gap-y-( <custom-property> ) | row-gap: var( <custom-property> ); | Aplica row-gap: var( <custom-property> ); al elemento; úsalo cuando necesites ajustar gap con esta utilidad. |
gap-y-[ <value> ] | row-gap: <value> ; | Aplica row-gap: <value> ; al elemento; úsalo cuando necesites ajustar gap con esta utilidad. |
justificar-contenido
Fuente oficial: https://tailwindcss.com/docs/justify-content
Utilidades para controlar cómo se colocan los elementos flexibles y de cuadrícula a lo largo del eje principal de un contenedor.
| Clase de Utilidad | Propiedad CSS | Explicación Breve |
|---|---|---|
justify-start | justify-content: flex-start; | Aplica justify-content: flex-start; al elemento; úsalo cuando necesites ajustar justify-content con esta utilidad. |
justify-end | justify-content: flex-end; | Aplica justify-content: flex-end; al elemento; úsalo cuando necesites ajustar justify-content con esta utilidad. |
justify-end-safe | justify-content: safe flex-end; | Aplica justify-content: safe flex-end; al elemento; úsalo cuando necesites ajustar justify-content con esta utilidad. |
justify-center | justify-content: center; | Aplica justify-content: center; al elemento; úsalo cuando necesites ajustar justify-content con esta utilidad. |
justify-center-safe | justify-content: safe center; | Aplica justify-content: safe center; al elemento; úsalo cuando necesites ajustar justify-content con esta utilidad. |
justify-between | justify-content: space-between; | Aplica justify-content: space-between; al elemento; úsalo cuando necesites ajustar justify-content con esta utilidad. |
justify-around | justify-content: space-around; | Aplica justify-content: space-around; al elemento; úsalo cuando necesites ajustar justify-content con esta utilidad. |
justify-evenly | justify-content: space-evenly; | Aplica justify-content: space-evenly; al elemento; úsalo cuando necesites ajustar justify-content con esta utilidad. |
justify-stretch | justify-content: stretch; | Aplica justify-content: stretch; al elemento; úsalo cuando necesites ajustar justify-content con esta utilidad. |
justify-baseline | justify-content: baseline; | Aplica justify-content: baseline; al elemento; úsalo cuando necesites ajustar justify-content con esta utilidad. |
justify-normal | justify-content: normal; | Aplica justify-content: normal; al elemento; úsalo cuando necesites ajustar justify-content con esta utilidad. |
justificar elementos
Fuente oficial: https://tailwindcss.com/docs/justify-items
Utilidades para controlar cómo se alinean los elementos de la cuadrícula a lo largo de su eje en línea.
| Clase de Utilidad | Propiedad CSS | Explicación Breve |
|---|---|---|
justify-items-start | justify-items: start; | Aplica justify-items: start; al elemento; úsalo cuando necesites ajustar justify-items con esta utilidad. |
justify-items-end | justify-items: end; | Aplica justify-items: end; al elemento; úsalo cuando necesites ajustar justify-items con esta utilidad. |
justify-items-end-safe | justify-items: safe end; | Aplica justify-items: safe end; al elemento; úsalo cuando necesites ajustar justify-items con esta utilidad. |
justify-items-center | justify-items: center; | Aplica justify-items: center; al elemento; úsalo cuando necesites ajustar justify-items con esta utilidad. |
justify-items-center-safe | justify-items: safe center; | Aplica justify-items: safe center; al elemento; úsalo cuando necesites ajustar justify-items con esta utilidad. |
justify-items-stretch | justify-items: stretch; | Aplica justify-items: stretch; al elemento; úsalo cuando necesites ajustar justify-items con esta utilidad. |
justify-items-normal | justify-items: normal; | Aplica justify-items: normal; al elemento; úsalo cuando necesites ajustar justify-items con esta utilidad. |
justificarse
Fuente oficial: https://tailwindcss.com/docs/justify-self
Utilidades para controlar cómo se alinea un elemento de cuadrícula individual a lo largo de su eje en línea.
| Clase de Utilidad | Propiedad CSS | Explicación Breve |
|---|---|---|
justify-self-auto | justify-self: auto; | Aplica justify-self: auto; al elemento; úsalo cuando necesites ajustar justify-self con esta utilidad. |
justify-self-start | justify-self: start; | Aplica justify-self: start; al elemento; úsalo cuando necesites ajustar justify-self con esta utilidad. |
justify-self-center | justify-self: center; | Aplica justify-self: center; al elemento; úsalo cuando necesites ajustar justify-self con esta utilidad. |
justify-self-center-safe | justify-self: safe center; | Aplica justify-self: safe center; al elemento; úsalo cuando necesites ajustar justify-self con esta utilidad. |
justify-self-end | justify-self: end; | Aplica justify-self: end; al elemento; úsalo cuando necesites ajustar justify-self con esta utilidad. |
justify-self-end-safe | justify-self: safe end; | Aplica justify-self: safe end; al elemento; úsalo cuando necesites ajustar justify-self con esta utilidad. |
justify-self-stretch | justify-self: stretch; | Aplica justify-self: stretch; al elemento; úsalo cuando necesites ajustar justify-self con esta utilidad. |
alinear contenido
Fuente oficial: https://tailwindcss.com/docs/align-content
Utilidades para controlar cómo se colocan las filas en contenedores flexibles y de rejilla de varias filas.
| Clase de Utilidad | Propiedad CSS | Explicación Breve |
|---|---|---|
content-normal | align-content: normal; | Aplica align-content: normal; al elemento; úsalo cuando necesites ajustar align-content con esta utilidad. |
content-center | align-content: center; | Aplica align-content: center; al elemento; úsalo cuando necesites ajustar align-content con esta utilidad. |
content-start | align-content: flex-start; | Aplica align-content: flex-start; al elemento; úsalo cuando necesites ajustar align-content con esta utilidad. |
content-end | align-content: flex-end; | Aplica align-content: flex-end; al elemento; úsalo cuando necesites ajustar align-content con esta utilidad. |
content-between | align-content: space-between; | Aplica align-content: space-between; al elemento; úsalo cuando necesites ajustar align-content con esta utilidad. |
content-around | align-content: space-around; | Aplica align-content: space-around; al elemento; úsalo cuando necesites ajustar align-content con esta utilidad. |
content-evenly | align-content: space-evenly; | Aplica align-content: space-evenly; al elemento; úsalo cuando necesites ajustar align-content con esta utilidad. |
content-baseline | align-content: baseline; | Aplica align-content: baseline; al elemento; úsalo cuando necesites ajustar align-content con esta utilidad. |
content-stretch | align-content: stretch; | Aplica align-content: stretch; al elemento; úsalo cuando necesites ajustar align-content con esta utilidad. |
alinear elementos
Fuente oficial: https://tailwindcss.com/docs/align-items
Utilidades para controlar cómo se colocan los elementos flexibles y de cuadrícula a lo largo del eje transversal de un contenedor.
| Clase de Utilidad | Propiedad CSS | Explicación Breve |
|---|---|---|
items-start | align-items: flex-start; | Aplica align-items: flex-start; al elemento; úsalo cuando necesites ajustar align-items con esta utilidad. |
items-end | align-items: flex-end; | Aplica align-items: flex-end; al elemento; úsalo cuando necesites ajustar align-items con esta utilidad. |
items-end-safe | align-items: safe flex-end; | Aplica align-items: safe flex-end; al elemento; úsalo cuando necesites ajustar align-items con esta utilidad. |
items-center | align-items: center; | Aplica align-items: center; al elemento; úsalo cuando necesites ajustar align-items con esta utilidad. |
items-center-safe | align-items: safe center; | Aplica align-items: safe center; al elemento; úsalo cuando necesites ajustar align-items con esta utilidad. |
items-baseline | align-items: baseline; | Aplica align-items: baseline; al elemento; úsalo cuando necesites ajustar align-items con esta utilidad. |
items-baseline-last | align-items: last baseline; | Aplica align-items: last baseline; al elemento; úsalo cuando necesites ajustar align-items con esta utilidad. |
items-stretch | align-items: stretch; | Aplica align-items: stretch; al elemento; úsalo cuando necesites ajustar align-items con esta utilidad. |
alinearse
Fuente oficial: https://tailwindcss.com/docs/align-self
Utilidades para controlar cómo se coloca un elemento flexible o de cuadrícula individual a lo largo del eje transversal de su contenedor.
| Clase de Utilidad | Propiedad CSS | Explicación Breve |
|---|---|---|
self-auto | align-self: auto; | Aplica align-self: auto; al elemento; úsalo cuando necesites ajustar align-self con esta utilidad. |
self-start | align-self: flex-start; | Aplica align-self: flex-start; al elemento; úsalo cuando necesites ajustar align-self con esta utilidad. |
self-end | align-self: flex-end; | Aplica align-self: flex-end; al elemento; úsalo cuando necesites ajustar align-self con esta utilidad. |
self-end-safe | align-self: safe flex-end; | Aplica align-self: safe flex-end; al elemento; úsalo cuando necesites ajustar align-self con esta utilidad. |
self-center | align-self: center; | Aplica align-self: center; al elemento; úsalo cuando necesites ajustar align-self con esta utilidad. |
self-center-safe | align-self: safe center; | Aplica align-self: safe center; al elemento; úsalo cuando necesites ajustar align-self con esta utilidad. |
self-stretch | align-self: stretch; | Aplica align-self: stretch; al elemento; úsalo cuando necesites ajustar align-self con esta utilidad. |
self-baseline | align-self: baseline; | Aplica align-self: baseline; al elemento; úsalo cuando necesites ajustar align-self con esta utilidad. |
self-baseline-last | align-self: last baseline; | Aplica align-self: last baseline; al elemento; úsalo cuando necesites ajustar align-self con esta utilidad. |
contenido del lugar
Fuente oficial: https://tailwindcss.com/docs/place-content
Utilidades para controlar cómo se justifica y alinea el contenido al mismo tiempo.
| Clase de Utilidad | Propiedad CSS | Explicación Breve |
|---|---|---|
place-content-center | place-content: center; | Aplica place-content: center; al elemento; úsalo cuando necesites ajustar place-content con esta utilidad. |
place-content-center-safe | place-content: safe center; | Aplica place-content: safe center; al elemento; úsalo cuando necesites ajustar place-content con esta utilidad. |
place-content-start | place-content: start; | Aplica place-content: start; al elemento; úsalo cuando necesites ajustar place-content con esta utilidad. |
place-content-end | place-content: end; | Aplica place-content: end; al elemento; úsalo cuando necesites ajustar place-content con esta utilidad. |
place-content-end-safe | place-content: safe end; | Aplica place-content: safe end; al elemento; úsalo cuando necesites ajustar place-content con esta utilidad. |
place-content-between | place-content: space-between; | Aplica place-content: space-between; al elemento; úsalo cuando necesites ajustar place-content con esta utilidad. |
place-content-around | place-content: space-around; | Aplica place-content: space-around; al elemento; úsalo cuando necesites ajustar place-content con esta utilidad. |
place-content-evenly | place-content: space-evenly; | Aplica place-content: space-evenly; al elemento; úsalo cuando necesites ajustar place-content con esta utilidad. |
place-content-baseline | place-content: baseline; | Aplica place-content: baseline; al elemento; úsalo cuando necesites ajustar place-content con esta utilidad. |
place-content-stretch | place-content: stretch; | Aplica place-content: stretch; al elemento; úsalo cuando necesites ajustar place-content con esta utilidad. |
colocar elementos
Fuente oficial: https://tailwindcss.com/docs/place-items
Utilidades para controlar cómo se justifican y alinean los elementos al mismo tiempo.
| Clase de Utilidad | Propiedad CSS | Explicación Breve |
|---|---|---|
place-items-start | place-items: start; | Aplica place-items: start; al elemento; úsalo cuando necesites ajustar place-items con esta utilidad. |
place-items-end | place-items: end; | Aplica place-items: end; al elemento; úsalo cuando necesites ajustar place-items con esta utilidad. |
place-items-end-safe | place-items: safe end; | Aplica place-items: safe end; al elemento; úsalo cuando necesites ajustar place-items con esta utilidad. |
place-items-center | place-items: center; | Aplica place-items: center; al elemento; úsalo cuando necesites ajustar place-items con esta utilidad. |
place-items-center-safe | place-items: safe center; | Aplica place-items: safe center; al elemento; úsalo cuando necesites ajustar place-items con esta utilidad. |
place-items-baseline | place-items: baseline; | Aplica place-items: baseline; al elemento; úsalo cuando necesites ajustar place-items con esta utilidad. |
place-items-stretch | place-items: stretch; | Aplica place-items: stretch; al elemento; úsalo cuando necesites ajustar place-items con esta utilidad. |
lugar-yo
Fuente oficial: https://tailwindcss.com/docs/place-self
Utilidades para controlar cómo se justifica y alinea un elemento individual al mismo tiempo.
| Clase de Utilidad | Propiedad CSS | Explicación Breve |
|---|---|---|
place-self-auto | place-self: auto; | Aplica place-self: auto; al elemento; úsalo cuando necesites ajustar place-self con esta utilidad. |
place-self-start | place-self: start; | Aplica place-self: start; al elemento; úsalo cuando necesites ajustar place-self con esta utilidad. |
place-self-end | place-self: end; | Aplica place-self: end; al elemento; úsalo cuando necesites ajustar place-self con esta utilidad. |
place-self-end-safe | place-self: safe end; | Aplica place-self: safe end; al elemento; úsalo cuando necesites ajustar place-self con esta utilidad. |
place-self-center | place-self: center; | Aplica place-self: center; al elemento; úsalo cuando necesites ajustar place-self con esta utilidad. |
place-self-center-safe | place-self: safe center; | Aplica place-self: safe center; al elemento; úsalo cuando necesites ajustar place-self con esta utilidad. |
place-self-stretch | place-self: stretch; | Aplica place-self: stretch; al elemento; úsalo cuando necesites ajustar place-self con esta utilidad. |
colapso fronterizo
Fuente oficial: https://tailwindcss.com/docs/border-collapse
Utilidades para controlar si los bordes de las tablas deben colapsar o separarse.
| Clase de Utilidad | Propiedad CSS | Explicación Breve |
|---|---|---|
border-collapse | border-collapse: collapse; | Aplica border-collapse: collapse; al elemento; úsalo cuando necesites ajustar border-collapse con esta utilidad. |
border-separate | border-collapse: separate; | Aplica border-collapse: separate; al elemento; úsalo cuando necesites ajustar border-collapse con esta utilidad. |
espaciado de fronteras
Fuente oficial: https://tailwindcss.com/docs/border-spacing
Utilidades para controlar el espacio entre los bordes de la tabla.
| Clase de Utilidad | Propiedad CSS | Explicación Breve |
|---|---|---|
border-spacing- <number> | border-spacing: calc(var(--spacing) * <number> ); | Aplica border-spacing: calc(var(--spacing) * <number> ); al elemento; úsalo cuando necesites ajustar border-spacing con esta utilidad. |
border-spacing-( <custom-property> ) | border-spacing: var( <custom-property> ); | Aplica border-spacing: var( <custom-property> ); al elemento; úsalo cuando necesites ajustar border-spacing con esta utilidad. |
border-spacing-[ <value> ] | border-spacing: <value> ; | Aplica border-spacing: <value> ; al elemento; úsalo cuando necesites ajustar border-spacing con esta utilidad. |
border-spacing-x- <number> | border-spacing: calc(var(--spacing) * <number> ) var(--tw-border-spacing-y); | Aplica border-spacing: calc(var(--spacing) * <number> ) var(--tw-border-spacing-y); al elemento; úsalo cuando necesites ajustar border-spacing con esta utilidad. |
border-spacing-x-( <custom-property> ) | border-spacing: var( <custom-property> ) var(--tw-border-spacing-y); | Aplica border-spacing: var( <custom-property> ) var(--tw-border-spacing-y); al elemento; úsalo cuando necesites ajustar border-spacing con esta utilidad. |
border-spacing-x-[ <value> ] | border-spacing: <value> var(--tw-border-spacing-y); | Aplica border-spacing: <value> var(--tw-border-spacing-y); al elemento; úsalo cuando necesites ajustar border-spacing con esta utilidad. |
border-spacing-y- <number> | border-spacing: var(--tw-border-spacing-x) calc(var(--spacing) * <number> ); | Aplica border-spacing: var(--tw-border-spacing-x) calc(var(--spacing) * <number> ); al elemento; úsalo cuando necesites ajustar border-spacing con esta utilidad. |
border-spacing-y-( <custom-property> ) | border-spacing: var(--tw-border-spacing-x) var( <custom-property> ); | Aplica border-spacing: var(--tw-border-spacing-x) var( <custom-property> ); al elemento; úsalo cuando necesites ajustar border-spacing con esta utilidad. |
border-spacing-y-[ <value> ] | border-spacing: var(--tw-border-spacing-x) <value> ; | Aplica border-spacing: var(--tw-border-spacing-x) <value> ; al elemento; úsalo cuando necesites ajustar border-spacing con esta utilidad. |
diseño de mesa
Fuente oficial: https://tailwindcss.com/docs/table-layout
Utilidades para controlar el algoritmo de diseño de tablas.
| Clase de Utilidad | Propiedad CSS | Explicación Breve |
|---|---|---|
table-auto | table-layout: auto; | Aplica table-layout: auto; al elemento; úsalo cuando necesites ajustar table-layout con esta utilidad. |
table-fixed | table-layout: fixed; | Aplica table-layout: fixed; al elemento; úsalo cuando necesites ajustar table-layout con esta utilidad. |
lado del título
Fuente oficial: https://tailwindcss.com/docs/caption-side
Utilidades para controlar la alineación de un elemento de título dentro de una tabla.
| Clase de Utilidad | Propiedad CSS | Explicación Breve |
|---|---|---|
caption-top | caption-side: top; | Aplica caption-side: top; al elemento; úsalo cuando necesites ajustar caption-side con esta utilidad. |
caption-bottom | caption-side: bottom; | Aplica caption-side: bottom; al elemento; úsalo cuando necesites ajustar caption-side con esta utilidad. |