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
Comenzar con Tailwind CSS
Fuente oficial: https://tailwindcss.com/docs/installation
Instalar Tailwind CSS como complemento de Vite es la forma más sencilla de integrarlo con marcos como Laravel, SvelteKit, React Router, Nuxt y SolidJS.
Esta página no expone una tabla de utilidades estructurada en el HTML oficial. Se conserva el enlace oficial para consulta directa.
Configuración del editor
Fuente oficial: https://tailwindcss.com/docs/editor-setup
Herramientas para mejorar la experiencia del desarrollador cuando trabaja con Tailwind CSS.
Esta página no expone una tabla de utilidades estructurada en el HTML oficial. Se conserva el enlace oficial para consulta directa.
Compatibilidad
Fuente oficial: https://tailwindcss.com/docs/compatibility
Obtenga información sobre la compatibilidad del navegador y la compatibilidad con otras herramientas.
Esta página no expone una tabla de utilidades estructurada en el HTML oficial. Se conserva el enlace oficial para consulta directa.
Guía de actualización
Fuente oficial: https://tailwindcss.com/docs/upgrade-guide
Actualización de sus proyectos Tailwind CSS de v3 a v4.
| Clase de Utilidad | Propiedad CSS | Explicación Breve |
|---|---|---|
bg-opacity-* | Reemplazo: Use opacity modifiers like bg-black/50 | Utilidad obsoleta en Tailwind v4; reemplázala por Use opacity modifiers like bg-black/50. |
text-opacity-* | Reemplazo: Use opacity modifiers like text-black/50 | Utilidad obsoleta en Tailwind v4; reemplázala por Use opacity modifiers like text-black/50. |
border-opacity-* | Reemplazo: Use opacity modifiers like border-black/50 | Utilidad obsoleta en Tailwind v4; reemplázala por Use opacity modifiers like border-black/50. |
divide-opacity-* | Reemplazo: Use opacity modifiers like divide-black/50 | Utilidad obsoleta en Tailwind v4; reemplázala por Use opacity modifiers like divide-black/50. |
ring-opacity-* | Reemplazo: Use opacity modifiers like ring-black/50 | Utilidad obsoleta en Tailwind v4; reemplázala por Use opacity modifiers like ring-black/50. |
placeholder-opacity-* | Reemplazo: Use opacity modifiers like placeholder-black/50 | Utilidad obsoleta en Tailwind v4; reemplázala por Use opacity modifiers like placeholder-black/50. |
flex-shrink-* | Reemplazo: shrink-* | Utilidad obsoleta en Tailwind v4; reemplázala por shrink-*. |
flex-grow-* | Reemplazo: grow-* | Utilidad obsoleta en Tailwind v4; reemplázala por grow-*. |
overflow-ellipsis | Reemplazo: text-ellipsis | Utilidad obsoleta en Tailwind v4; reemplázala por text-ellipsis. |
decoration-slice | Reemplazo: box-decoration-slice | Utilidad obsoleta en Tailwind v4; reemplázala por box-decoration-slice. |
decoration-clone | Reemplazo: box-decoration-clone | Utilidad obsoleta en Tailwind v4; reemplázala por box-decoration-clone. |
shadow-sm | v4: shadow-xs | Cambio de nombre entre Tailwind v3 y v4; usa shadow-xs en proyectos nuevos. |
shadow | v4: shadow-sm | Cambio de nombre entre Tailwind v3 y v4; usa shadow-sm en proyectos nuevos. |
drop-shadow-sm | v4: drop-shadow-xs | Cambio de nombre entre Tailwind v3 y v4; usa drop-shadow-xs en proyectos nuevos. |
drop-shadow | v4: drop-shadow-sm | Cambio de nombre entre Tailwind v3 y v4; usa drop-shadow-sm en proyectos nuevos. |
blur-sm | v4: blur-xs | Cambio de nombre entre Tailwind v3 y v4; usa blur-xs en proyectos nuevos. |
blur | v4: blur-sm | Cambio de nombre entre Tailwind v3 y v4; usa blur-sm en proyectos nuevos. |
backdrop-blur-sm | v4: backdrop-blur-xs | Cambio de nombre entre Tailwind v3 y v4; usa backdrop-blur-xs en proyectos nuevos. |
backdrop-blur | v4: backdrop-blur-sm | Cambio de nombre entre Tailwind v3 y v4; usa backdrop-blur-sm en proyectos nuevos. |
rounded-sm | v4: rounded-xs | Cambio de nombre entre Tailwind v3 y v4; usa rounded-xs en proyectos nuevos. |
rounded | v4: rounded-sm | Cambio de nombre entre Tailwind v3 y v4; usa rounded-sm en proyectos nuevos. |
outline-none | v4: outline-hidden | Cambio de nombre entre Tailwind v3 y v4; usa outline-hidden en proyectos nuevos. |
ring | v4: ring-3 | Cambio de nombre entre Tailwind v3 y v4; usa ring-3 en proyectos nuevos. |
Estilo con clases de utilidad.
Fuente oficial: https://tailwindcss.com/docs/styling-with-utility-classes
Construir componentes complejos a partir de un conjunto limitado de utilidades primitivas.
Esta página no expone una tabla de utilidades estructurada en el HTML oficial. Se conserva el enlace oficial para consulta directa.
Colocar el cursor, enfocar y otros estados
Fuente oficial: https://tailwindcss.com/docs/hover-focus-and-other-states
Usar utilidades para diseñar elementos al pasar el mouse, enfocar y más.
| Clase de Utilidad | Propiedad CSS | Explicación Breve |
|---|---|---|
aria-busy | & [aria-busy="true"] | Activa un selector variante basado en & [aria-busy="true"] para condicionar estilos según estado o atributo. |
aria-checked | & [aria-checked="true"] | Activa un selector variante basado en & [aria-checked="true"] para condicionar estilos según estado o atributo. |
aria-disabled | & [aria-disabled="true"] | Activa un selector variante basado en & [aria-disabled="true"] para condicionar estilos según estado o atributo. |
aria-expanded | & [aria-expanded="true"] | Activa un selector variante basado en & [aria-expanded="true"] para condicionar estilos según estado o atributo. |
aria-hidden | & [aria-hidden="true"] | Activa un selector variante basado en & [aria-hidden="true"] para condicionar estilos según estado o atributo. |
aria-pressed | & [aria-pressed="true"] | Activa un selector variante basado en & [aria-pressed="true"] para condicionar estilos según estado o atributo. |
aria-readonly | & [aria-readonly="true"] | Activa un selector variante basado en & [aria-readonly="true"] para condicionar estilos según estado o atributo. |
aria-required | & [aria-required="true"] | Activa un selector variante basado en & [aria-required="true"] para condicionar estilos según estado o atributo. |
aria-selected | & [aria-selected="true"] | Activa un selector variante basado en & [aria-selected="true"] para condicionar estilos según estado o atributo. |
hover | @media (hover: hover) { & :hover } | Activa un selector variante basado en @media (hover: hover) { & :hover } para condicionar estilos según estado o atributo. |
focus | & :focus | Activa un selector variante basado en & :focus para condicionar estilos según estado o atributo. |
focus-within | & :focus-within | Activa un selector variante basado en & :focus-within para condicionar estilos según estado o atributo. |
focus-visible | & :focus-visible | Activa un selector variante basado en & :focus-visible para condicionar estilos según estado o atributo. |
active | & :active | Activa un selector variante basado en & :active para condicionar estilos según estado o atributo. |
visited | & :visited | Activa un selector variante basado en & :visited para condicionar estilos según estado o atributo. |
target | & :target | Activa un selector variante basado en & :target para condicionar estilos según estado o atributo. |
* | :is( & > * ) | Activa un selector variante basado en :is( & > * ) para condicionar estilos según estado o atributo. |
** | :is( & * ) | Activa un selector variante basado en :is( & * ) para condicionar estilos según estado o atributo. |
has-[ ... ] | & :has( ... ) | Activa un selector variante basado en & :has( ... ) para condicionar estilos según estado o atributo. |
group-[ ... ] | & :is(:where(.group) ... *) | Activa un selector variante basado en & :is(:where(.group) ... *) para condicionar estilos según estado o atributo. |
peer-[ ... ] | & :is(:where(.peer) ... ~ *) | Activa un selector variante basado en & :is(:where(.peer) ... ~ *) para condicionar estilos según estado o atributo. |
in-[ ... ] | :where( ... ) & | Activa un selector variante basado en :where( ... ) & para condicionar estilos según estado o atributo. |
not-[ ... ] | & :not( ... ) | Activa un selector variante basado en & :not( ... ) para condicionar estilos según estado o atributo. |
inert | & :is([inert], [inert] *) | Activa un selector variante basado en & :is([inert], [inert] *) para condicionar estilos según estado o atributo. |
first | & :first-child | Activa un selector variante basado en & :first-child para condicionar estilos según estado o atributo. |
last | & :last-child | Activa un selector variante basado en & :last-child para condicionar estilos según estado o atributo. |
only | & :only-child | Activa un selector variante basado en & :only-child para condicionar estilos según estado o atributo. |
odd | & :nth-child(odd) | Activa un selector variante basado en & :nth-child(odd) para condicionar estilos según estado o atributo. |
even | & :nth-child(even) | Activa un selector variante basado en & :nth-child(even) para condicionar estilos según estado o atributo. |
first-of-type | & :first-of-type | Activa un selector variante basado en & :first-of-type para condicionar estilos según estado o atributo. |
last-of-type | & :last-of-type | Activa un selector variante basado en & :last-of-type para condicionar estilos según estado o atributo. |
only-of-type | & :only-of-type | Activa un selector variante basado en & :only-of-type para condicionar estilos según estado o atributo. |
nth-[ ... ] | & :nth-child( ... ) | Activa un selector variante basado en & :nth-child( ... ) para condicionar estilos según estado o atributo. |
nth-last-[ ... ] | & :nth-last-child( ... ) | Activa un selector variante basado en & :nth-last-child( ... ) para condicionar estilos según estado o atributo. |
nth-of-type-[ ... ] | & :nth-of-type( ... ) | Activa un selector variante basado en & :nth-of-type( ... ) para condicionar estilos según estado o atributo. |
nth-last-of-type-[ ... ] | & :nth-last-of-type( ... ) | Activa un selector variante basado en & :nth-last-of-type( ... ) para condicionar estilos según estado o atributo. |
empty | & :empty | Activa un selector variante basado en & :empty para condicionar estilos según estado o atributo. |
disabled | & :disabled | Activa un selector variante basado en & :disabled para condicionar estilos según estado o atributo. |
enabled | & :enabled | Activa un selector variante basado en & :enabled para condicionar estilos según estado o atributo. |
checked | & :checked | Activa un selector variante basado en & :checked para condicionar estilos según estado o atributo. |
indeterminate | & :indeterminate | Activa un selector variante basado en & :indeterminate para condicionar estilos según estado o atributo. |
default | & :default | Activa un selector variante basado en & :default para condicionar estilos según estado o atributo. |
optional | & :optional | Activa un selector variante basado en & :optional para condicionar estilos según estado o atributo. |
required | & :required | Activa un selector variante basado en & :required para condicionar estilos según estado o atributo. |
valid | & :valid | Activa un selector variante basado en & :valid para condicionar estilos según estado o atributo. |
invalid | & :invalid | Activa un selector variante basado en & :invalid para condicionar estilos según estado o atributo. |
user-valid | & :user-valid | Activa un selector variante basado en & :user-valid para condicionar estilos según estado o atributo. |
user-invalid | & :user-invalid | Activa un selector variante basado en & :user-invalid para condicionar estilos según estado o atributo. |
in-range | & :in-range | Activa un selector variante basado en & :in-range para condicionar estilos según estado o atributo. |
out-of-range | & :out-of-range | Activa un selector variante basado en & :out-of-range para condicionar estilos según estado o atributo. |
placeholder-shown | & :placeholder-shown | Activa un selector variante basado en & :placeholder-shown para condicionar estilos según estado o atributo. |
details-content | & :details-content | Activa un selector variante basado en & :details-content para condicionar estilos según estado o atributo. |
autofill | & :autofill | Activa un selector variante basado en & :autofill para condicionar estilos según estado o atributo. |
read-only | & :read-only | Activa un selector variante basado en & :read-only para condicionar estilos según estado o atributo. |
before | & ::before | Activa un selector variante basado en & ::before para condicionar estilos según estado o atributo. |
after | & ::after | Activa un selector variante basado en & ::after para condicionar estilos según estado o atributo. |
first-letter | & ::first-letter | Activa un selector variante basado en & ::first-letter para condicionar estilos según estado o atributo. |
first-line | & ::first-line | Activa un selector variante basado en & ::first-line para condicionar estilos según estado o atributo. |
marker | & ::marker, & *::marker | Activa un selector variante basado en & ::marker, & *::marker para condicionar estilos según estado o atributo. |
selection | & ::selection | Activa un selector variante basado en & ::selection para condicionar estilos según estado o atributo. |
file | & ::file-selector-button | Activa un selector variante basado en & ::file-selector-button para condicionar estilos según estado o atributo. |
backdrop | & ::backdrop | Activa un selector variante basado en & ::backdrop para condicionar estilos según estado o atributo. |
placeholder | & ::placeholder | Activa un selector variante basado en & ::placeholder para condicionar estilos según estado o atributo. |
sm | @media (width >= 40rem) | Activa un selector variante basado en @media (width >= 40rem) para condicionar estilos según estado o atributo. |
md | @media (width >= 48rem) | Activa un selector variante basado en @media (width >= 48rem) para condicionar estilos según estado o atributo. |
lg | @media (width >= 64rem) | Activa un selector variante basado en @media (width >= 64rem) para condicionar estilos según estado o atributo. |
xl | @media (width >= 80rem) | Activa un selector variante basado en @media (width >= 80rem) para condicionar estilos según estado o atributo. |
2xl | @media (width >= 96rem) | Activa un selector variante basado en @media (width >= 96rem) para condicionar estilos según estado o atributo. |
min-[ ... ] | @media (width >= ... ) | Activa un selector variante basado en @media (width >= ... ) para condicionar estilos según estado o atributo. |
max-sm | @media (width < 40rem) | Activa un selector variante basado en @media (width < 40rem) para condicionar estilos según estado o atributo. |
max-md | @media (width < 48rem) | Activa un selector variante basado en @media (width < 48rem) para condicionar estilos según estado o atributo. |
max-lg | @media (width < 64rem) | Activa un selector variante basado en @media (width < 64rem) para condicionar estilos según estado o atributo. |
max-xl | @media (width < 80rem) | Activa un selector variante basado en @media (width < 80rem) para condicionar estilos según estado o atributo. |
max-2xl | @media (width < 96rem) | Activa un selector variante basado en @media (width < 96rem) para condicionar estilos según estado o atributo. |
max-[ ... ] | @media (width < ... ) | Activa un selector variante basado en @media (width < ... ) para condicionar estilos según estado o atributo. |
@3xs | @container (width >= 16rem) | Activa un selector variante basado en @container (width >= 16rem) para condicionar estilos según estado o atributo. |
@2xs | @container (width >= 18rem) | Activa un selector variante basado en @container (width >= 18rem) para condicionar estilos según estado o atributo. |
@xs | @container (width >= 20rem) | Activa un selector variante basado en @container (width >= 20rem) para condicionar estilos según estado o atributo. |
@sm | @container (width >= 24rem) | Activa un selector variante basado en @container (width >= 24rem) para condicionar estilos según estado o atributo. |
@md | @container (width >= 28rem) | Activa un selector variante basado en @container (width >= 28rem) para condicionar estilos según estado o atributo. |
@lg | @container (width >= 32rem) | Activa un selector variante basado en @container (width >= 32rem) para condicionar estilos según estado o atributo. |
@xl | @container (width >= 36rem) | Activa un selector variante basado en @container (width >= 36rem) para condicionar estilos según estado o atributo. |
@2xl | @container (width >= 42rem) | Activa un selector variante basado en @container (width >= 42rem) para condicionar estilos según estado o atributo. |
@3xl | @container (width >= 48rem) | Activa un selector variante basado en @container (width >= 48rem) para condicionar estilos según estado o atributo. |
@4xl | @container (width >= 56rem) | Activa un selector variante basado en @container (width >= 56rem) para condicionar estilos según estado o atributo. |
@5xl | @container (width >= 64rem) | Activa un selector variante basado en @container (width >= 64rem) para condicionar estilos según estado o atributo. |
@6xl | @container (width >= 72rem) | Activa un selector variante basado en @container (width >= 72rem) para condicionar estilos según estado o atributo. |
@7xl | @container (width >= 80rem) | Activa un selector variante basado en @container (width >= 80rem) para condicionar estilos según estado o atributo. |
@min-[ ... ] | @container (width >= ... ) | Activa un selector variante basado en @container (width >= ... ) para condicionar estilos según estado o atributo. |
@max-3xs | @container (width < 16rem) | Activa un selector variante basado en @container (width < 16rem) para condicionar estilos según estado o atributo. |
@max-2xs | @container (width < 18rem) | Activa un selector variante basado en @container (width < 18rem) para condicionar estilos según estado o atributo. |
@max-xs | @container (width < 20rem) | Activa un selector variante basado en @container (width < 20rem) para condicionar estilos según estado o atributo. |
@max-sm | @container (width < 24rem) | Activa un selector variante basado en @container (width < 24rem) para condicionar estilos según estado o atributo. |
@max-md | @container (width < 28rem) | Activa un selector variante basado en @container (width < 28rem) para condicionar estilos según estado o atributo. |
@max-lg | @container (width < 32rem) | Activa un selector variante basado en @container (width < 32rem) para condicionar estilos según estado o atributo. |
@max-xl | @container (width < 36rem) | Activa un selector variante basado en @container (width < 36rem) para condicionar estilos según estado o atributo. |
@max-2xl | @container (width < 42rem) | Activa un selector variante basado en @container (width < 42rem) para condicionar estilos según estado o atributo. |
@max-3xl | @container (width < 48rem) | Activa un selector variante basado en @container (width < 48rem) para condicionar estilos según estado o atributo. |
@max-4xl | @container (width < 56rem) | Activa un selector variante basado en @container (width < 56rem) para condicionar estilos según estado o atributo. |
@max-5xl | @container (width < 64rem) | Activa un selector variante basado en @container (width < 64rem) para condicionar estilos según estado o atributo. |
@max-6xl | @container (width < 72rem) | Activa un selector variante basado en @container (width < 72rem) para condicionar estilos según estado o atributo. |
@max-7xl | @container (width < 80rem) | Activa un selector variante basado en @container (width < 80rem) para condicionar estilos según estado o atributo. |
@max-[ ... ] | @container (width < ... ) | Activa un selector variante basado en @container (width < ... ) para condicionar estilos según estado o atributo. |
dark | @media (prefers-color-scheme: dark) | Activa un selector variante basado en @media (prefers-color-scheme: dark) para condicionar estilos según estado o atributo. |
motion-safe | @media (prefers-reduced-motion: no-preference) | Activa un selector variante basado en @media (prefers-reduced-motion: no-preference) para condicionar estilos según estado o atributo. |
motion-reduce | @media (prefers-reduced-motion: reduce) | Activa un selector variante basado en @media (prefers-reduced-motion: reduce) para condicionar estilos según estado o atributo. |
contrast-more | @media (prefers-contrast: more) | Activa un selector variante basado en @media (prefers-contrast: more) para condicionar estilos según estado o atributo. |
contrast-less | @media (prefers-contrast: less) | Activa un selector variante basado en @media (prefers-contrast: less) para condicionar estilos según estado o atributo. |
forced-colors | @media (forced-colors: active) | Activa un selector variante basado en @media (forced-colors: active) para condicionar estilos según estado o atributo. |
inverted-colors | @media (inverted-colors: inverted) | Activa un selector variante basado en @media (inverted-colors: inverted) para condicionar estilos según estado o atributo. |
pointer-fine | @media (pointer: fine) | Activa un selector variante basado en @media (pointer: fine) para condicionar estilos según estado o atributo. |
pointer-coarse | @media (pointer: coarse) | Activa un selector variante basado en @media (pointer: coarse) para condicionar estilos según estado o atributo. |
pointer-none | @media (pointer: none) | Activa un selector variante basado en @media (pointer: none) para condicionar estilos según estado o atributo. |
any-pointer-fine | @media (any-pointer: fine) | Activa un selector variante basado en @media (any-pointer: fine) para condicionar estilos según estado o atributo. |
any-pointer-coarse | @media (any-pointer: coarse) | Activa un selector variante basado en @media (any-pointer: coarse) para condicionar estilos según estado o atributo. |
any-pointer-none | @media (any-pointer: none) | Activa un selector variante basado en @media (any-pointer: none) para condicionar estilos según estado o atributo. |
portrait | @media (orientation: portrait) | Activa un selector variante basado en @media (orientation: portrait) para condicionar estilos según estado o atributo. |
landscape | @media (orientation: landscape) | Activa un selector variante basado en @media (orientation: landscape) para condicionar estilos según estado o atributo. |
noscript | @media (scripting: none) | Activa un selector variante basado en @media (scripting: none) para condicionar estilos según estado o atributo. |
print | @media print | Activa un selector variante basado en @media print para condicionar estilos según estado o atributo. |
supports-[ … ] | @supports ( … ) | Activa un selector variante basado en @supports ( … ) para condicionar estilos según estado o atributo. |
aria-[ … ] | & [aria- … ] | Activa un selector variante basado en & [aria- … ] para condicionar estilos según estado o atributo. |
data-[ … ] | & [data- … ] | Activa un selector variante basado en & [data- … ] para condicionar estilos según estado o atributo. |
rtl | & :where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) | Activa un selector variante basado en & :where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) para condicionar estilos según estado o atributo. |
ltr | & :where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) | Activa un selector variante basado en & :where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) para condicionar estilos según estado o atributo. |
open | & :is([open], :popover-open, :open) | Activa un selector variante basado en & :is([open], :popover-open, :open) para condicionar estilos según estado o atributo. |
starting | @starting-style | Activa un selector variante basado en @starting-style para condicionar estilos según estado o atributo. |
Diseño responsivo
Fuente oficial: https://tailwindcss.com/docs/responsive-design
Uso de variantes de utilidades responsivas para crear interfaces de usuario adaptables.
| Clase de Utilidad | Propiedad CSS | Explicación Breve |
|---|---|---|
sm | @media (width >= 40rem) { ... } | Activa utilidades a partir de 40rem (640px) usando este breakpoint responsive. |
md | @media (width >= 48rem) { ... } | Activa utilidades a partir de 48rem (768px) usando este breakpoint responsive. |
lg | @media (width >= 64rem) { ... } | Activa utilidades a partir de 64rem (1024px) usando este breakpoint responsive. |
xl | @media (width >= 80rem) { ... } | Activa utilidades a partir de 80rem (1280px) usando este breakpoint responsive. |
2xl | @media (width >= 96rem) { ... } | Activa utilidades a partir de 96rem (1536px) usando este breakpoint responsive. |
max-sm | @media (width < 40rem) { ... } | Limita la aplicación de utilidades al rango definido por @media (width < 40rem) { ... }. |
max-md | @media (width < 48rem) { ... } | Limita la aplicación de utilidades al rango definido por @media (width < 48rem) { ... }. |
max-lg | @media (width < 64rem) { ... } | Limita la aplicación de utilidades al rango definido por @media (width < 64rem) { ... }. |
max-xl | @media (width < 80rem) { ... } | Limita la aplicación de utilidades al rango definido por @media (width < 80rem) { ... }. |
max-2xl | @media (width < 96rem) { ... } | Limita la aplicación de utilidades al rango definido por @media (width < 96rem) { ... }. |
modo oscuro
Fuente oficial: https://tailwindcss.com/docs/dark-mode
Usar variantes para diseñar su sitio en modo oscuro.
Esta página no expone una tabla de utilidades estructurada en el HTML oficial. Se conserva el enlace oficial para consulta directa.
Variables temáticas
Fuente oficial: https://tailwindcss.com/docs/theme
Usar clases de utilidad como API para sus tokens de diseño.
| Clase de Utilidad | Propiedad CSS | Explicación Breve |
|---|---|---|
--color-* | Genera utilidades del tema | Este namespace del tema genera utilidades como Color utilities like bg-red-500 , text-sky-300 , and many more. |
--font-* | Genera utilidades del tema | Este namespace del tema genera utilidades como Font family utilities like font-sans. |
--text-* | Genera utilidades del tema | Este namespace del tema genera utilidades como Font size utilities like text-xl. |
--font-weight-* | Genera utilidades del tema | Este namespace del tema genera utilidades como Font weight utilities like font-bold. |
--tracking-* | Genera utilidades del tema | Este namespace del tema genera utilidades como Letter spacing utilities like tracking-wide. |
--leading-* | Genera utilidades del tema | Este namespace del tema genera utilidades como Line height utilities like leading-tight. |
--breakpoint-* | Genera utilidades del tema | Este namespace del tema genera utilidades como Responsive breakpoint variants like sm:*. |
--container-* | Genera utilidades del tema | Este namespace del tema genera utilidades como Container query variants like @sm:* and size utilities like max-w-md. |
--spacing-* | Genera utilidades del tema | Este namespace del tema genera utilidades como Spacing and sizing utilities like px-4 , max-h-16 , and many more. |
--radius-* | Genera utilidades del tema | Este namespace del tema genera utilidades como Border radius utilities like rounded-sm. |
--shadow-* | Genera utilidades del tema | Este namespace del tema genera utilidades como Box shadow utilities like shadow-md. |
--inset-shadow-* | Genera utilidades del tema | Este namespace del tema genera utilidades como Inset box shadow utilities like inset-shadow-xs. |
--drop-shadow-* | Genera utilidades del tema | Este namespace del tema genera utilidades como Drop shadow filter utilities like drop-shadow-md. |
--blur-* | Genera utilidades del tema | Este namespace del tema genera utilidades como Blur filter utilities like blur-md. |
--perspective-* | Genera utilidades del tema | Este namespace del tema genera utilidades como Perspective utilities like perspective-near. |
--aspect-* | Genera utilidades del tema | Este namespace del tema genera utilidades como Aspect ratio utilities like aspect-video. |
--ease-* | Genera utilidades del tema | Este namespace del tema genera utilidades como Transition timing function utilities like ease-out. |
--animate-* | Genera utilidades del tema | Este namespace del tema genera utilidades como Animation utilities like animate-spin. |
Bandera
Fuente oficial: https://tailwindcss.com/docs/colors
Uso y personalización de la paleta de colores en proyectos Tailwind CSS.
| Clase de Utilidad | Propiedad CSS | Explicación Breve |
|---|---|---|
bg-* | Varía según la utilidad | Establece el color de fondo de un elemento. |
text-* | Varía según la utilidad | Establece el color del texto de un elemento. |
decoration-* | Varía según la utilidad | Establece el color de decoración del texto de un elemento. |
border-* | Varía según la utilidad | Establece el color del borde de un elemento. |
outline-* | Varía según la utilidad | Establece el color del contorno de un elemento. |
shadow-* | Varía según la utilidad | Establece el color de las sombras del cuadro. |
inset-shadow-* | Varía según la utilidad | Establece el color de las sombras del cuadro insertado. |
ring-* | Varía según la utilidad | Establece el color de las sombras anulares. |
inset-ring-* | Varía según la utilidad | Establece el color de las sombras de los anillos insertados. |
accent-* | Varía según la utilidad | Establece el color de acento de los controles de formulario. |
caret-* | Varía según la utilidad | Establece el color del cursor en los controles de formulario. |
fill-* | Varía según la utilidad | Establece el color de relleno de los elementos SVG. |
stroke-* | Varía según la utilidad | Establece el color del trazo de los elementos SVG. |
Agregar estilos personalizados
Fuente oficial: https://tailwindcss.com/docs/adding-custom-styles
Mejores prácticas para agregar sus propios estilos personalizados en proyectos de Tailwind.
Esta página no expone una tabla de utilidades estructurada en el HTML oficial. Se conserva el enlace oficial para consulta directa.
Detectar clases en archivos fuente
Fuente oficial: https://tailwindcss.com/docs/detecting-classes-in-source-files
Comprender y personalizar cómo Tailwind escanea sus archivos fuente.
Esta página no expone una tabla de utilidades estructurada en el HTML oficial. Se conserva el enlace oficial para consulta directa.
Funciones y directivas
Fuente oficial: https://tailwindcss.com/docs/functions-and-directives
Una referencia para las funciones y directivas personalizadas que Tailwind expone en su CSS.
Esta página no expone una tabla de utilidades estructurada en el HTML oficial. Se conserva el enlace oficial para consulta directa.
verificación previa
Fuente oficial: https://tailwindcss.com/docs/preflight
Un conjunto obstinado de estilos básicos para proyectos Tailwind.
Esta página no expone una tabla de utilidades estructurada en el HTML oficial. Se conserva el enlace oficial para consulta directa.