Notebook 5 - Fondos & Efectos Visuales

Cheatsheet generado a partir de las URLs oficiales de Tailwind CSS incluidas en tailwind-docs-notebooks.csv.

Formato básico:

Clase de Utilidad
Propiedad CSS
Explicación Breve

archivo adjunto de fondo

Fuente oficial: https://tailwindcss.com/docs/background-attachment

Utilidades para controlar cómo se comporta una imagen de fondo al desplazarse.

Clase de Utilidad	Propiedad CSS	Explicación Breve
`bg-fixed`	`background-attachment: fixed;`	Aplica `background-attachment: fixed;` al elemento; úsalo cuando necesites ajustar `background-attachment` con esta utilidad.
`bg-local`	`background-attachment: local;`	Aplica `background-attachment: local;` al elemento; úsalo cuando necesites ajustar `background-attachment` con esta utilidad.
`bg-scroll`	`background-attachment: scroll;`	Aplica `background-attachment: scroll;` al elemento; úsalo cuando necesites ajustar `background-attachment` con esta utilidad.

clip de fondo

Fuente oficial: https://tailwindcss.com/docs/background-clip

Utilidades para controlar el cuadro delimitador del fondo de un elemento.

Clase de Utilidad	Propiedad CSS	Explicación Breve
`bg-clip-border`	`background-clip: border-box;`	Aplica `background-clip: border-box;` al elemento; úsalo cuando necesites ajustar `background-clip` con esta utilidad.
`bg-clip-padding`	`background-clip: padding-box;`	Aplica `background-clip: padding-box;` al elemento; úsalo cuando necesites ajustar `background-clip` con esta utilidad.
`bg-clip-content`	`background-clip: content-box;`	Aplica `background-clip: content-box;` al elemento; úsalo cuando necesites ajustar `background-clip` con esta utilidad.
`bg-clip-text`	`background-clip: text;`	Aplica `background-clip: text;` al elemento; úsalo cuando necesites ajustar `background-clip` con esta utilidad.

color de fondo

Fuente oficial: https://tailwindcss.com/docs/background-color

Utilidades para controlar el color de fondo de un elemento.

imagen de fondo

Fuente oficial: https://tailwindcss.com/docs/background-image

Utilidades para controlar la imagen de fondo de un elemento.

origen-fondo

Fuente oficial: https://tailwindcss.com/docs/background-origin

Utilidades para controlar cómo se posiciona el fondo de un elemento en relación con los bordes, el relleno y el contenido.

Clase de Utilidad	Propiedad CSS	Explicación Breve
`bg-origin-border`	`background-origin: border-box;`	Aplica `background-origin: border-box;` al elemento; úsalo cuando necesites ajustar `background-origin` con esta utilidad.
`bg-origin-padding`	`background-origin: padding-box;`	Aplica `background-origin: padding-box;` al elemento; úsalo cuando necesites ajustar `background-origin` con esta utilidad.
`bg-origin-content`	`background-origin: content-box;`	Aplica `background-origin: content-box;` al elemento; úsalo cuando necesites ajustar `background-origin` con esta utilidad.

posición de fondo

Fuente oficial: https://tailwindcss.com/docs/background-position

Utilidades para controlar la posición de la imagen de fondo de un elemento.

Clase de Utilidad	Propiedad CSS	Explicación Breve
`bg-top-left`	`background-position: top left;`	Aplica `background-position: top left;` al elemento; úsalo cuando necesites ajustar `background-position` con esta utilidad.
`bg-top`	`background-position: top;`	Aplica `background-position: top;` al elemento; úsalo cuando necesites ajustar `background-position` con esta utilidad.
`bg-top-right`	`background-position: top right;`	Aplica `background-position: top right;` al elemento; úsalo cuando necesites ajustar `background-position` con esta utilidad.
`bg-left`	`background-position: left;`	Aplica `background-position: left;` al elemento; úsalo cuando necesites ajustar `background-position` con esta utilidad.
`bg-center`	`background-position: center;`	Aplica `background-position: center;` al elemento; úsalo cuando necesites ajustar `background-position` con esta utilidad.
`bg-right`	`background-position: right;`	Aplica `background-position: right;` al elemento; úsalo cuando necesites ajustar `background-position` con esta utilidad.
`bg-bottom-left`	`background-position: bottom left;`	Aplica `background-position: bottom left;` al elemento; úsalo cuando necesites ajustar `background-position` con esta utilidad.
`bg-bottom`	`background-position: bottom;`	Aplica `background-position: bottom;` al elemento; úsalo cuando necesites ajustar `background-position` con esta utilidad.
`bg-bottom-right`	`background-position: bottom right;`	Aplica `background-position: bottom right;` al elemento; úsalo cuando necesites ajustar `background-position` con esta utilidad.
`bg-position-( <custom-property> )`	`background-position: var( <custom-property> );`	Aplica `background-position: var( <custom-property> );` al elemento; úsalo cuando necesites ajustar `background-position` con esta utilidad.
`bg-position-[ <value> ]`	`background-position: <value> ;`	Aplica `background-position: <value> ;` al elemento; úsalo cuando necesites ajustar `background-position` con esta utilidad.

repetición de fondo

Fuente oficial: https://tailwindcss.com/docs/background-repeat

Utilidades para controlar la repetición de la imagen de fondo de un elemento.

Clase de Utilidad	Propiedad CSS	Explicación Breve
`bg-repeat`	`background-repeat: repeat;`	Aplica `background-repeat: repeat;` al elemento; úsalo cuando necesites ajustar `background-repeat` con esta utilidad.
`bg-repeat-x`	`background-repeat: repeat-x;`	Aplica `background-repeat: repeat-x;` al elemento; úsalo cuando necesites ajustar `background-repeat` con esta utilidad.
`bg-repeat-y`	`background-repeat: repeat-y;`	Aplica `background-repeat: repeat-y;` al elemento; úsalo cuando necesites ajustar `background-repeat` con esta utilidad.
`bg-repeat-space`	`background-repeat: space;`	Aplica `background-repeat: space;` al elemento; úsalo cuando necesites ajustar `background-repeat` con esta utilidad.
`bg-repeat-round`	`background-repeat: round;`	Aplica `background-repeat: round;` al elemento; úsalo cuando necesites ajustar `background-repeat` con esta utilidad.
`bg-no-repeat`	`background-repeat: no-repeat;`	Aplica `background-repeat: no-repeat;` al elemento; úsalo cuando necesites ajustar `background-repeat` con esta utilidad.

tamaño de fondo

Fuente oficial: https://tailwindcss.com/docs/background-size

Utilidades para controlar el tamaño de fondo de la imagen de fondo de un elemento.

Clase de Utilidad	Propiedad CSS	Explicación Breve
`bg-auto`	`background-size: auto;`	Aplica `background-size: auto;` al elemento; úsalo cuando necesites ajustar `background-size` con esta utilidad.
`bg-cover`	`background-size: cover;`	Aplica `background-size: cover;` al elemento; úsalo cuando necesites ajustar `background-size` con esta utilidad.
`bg-contain`	`background-size: contain;`	Aplica `background-size: contain;` al elemento; úsalo cuando necesites ajustar `background-size` con esta utilidad.
`bg-size-( <custom-property> )`	`background-size: var( <custom-property> );`	Aplica `background-size: var( <custom-property> );` al elemento; úsalo cuando necesites ajustar `background-size` con esta utilidad.
`bg-size-[ <value> ]`	`background-size: <value> ;`	Aplica `background-size: <value> ;` al elemento; úsalo cuando necesites ajustar `background-size` con esta utilidad.

sombra de caja

Fuente oficial: https://tailwindcss.com/docs/box-shadow

Utilidades para controlar la sombra del cuadro de un elemento.

sombra de texto

Fuente oficial: https://tailwindcss.com/docs/text-shadow

Utilidades para controlar la sombra de un elemento de texto.

opacidad

Fuente oficial: https://tailwindcss.com/docs/opacity

Utilidades para controlar la opacidad de un elemento.

Clase de Utilidad	Propiedad CSS	Explicación Breve
`opacity- <number>`	`opacity: <number> %;`	Aplica `opacity: <number> %;` al elemento; úsalo cuando necesites ajustar `opacity` con esta utilidad.
`opacity-( <custom-property> )`	`opacity: var( <custom-property> );`	Aplica `opacity: var( <custom-property> );` al elemento; úsalo cuando necesites ajustar `opacity` con esta utilidad.
`opacity-[ <value> ]`	`opacity: <value> ;`	Aplica `opacity: <value> ;` al elemento; úsalo cuando necesites ajustar `opacity` con esta utilidad.

modo de mezcla

Fuente oficial: https://tailwindcss.com/docs/mix-blend-mode

Utilidades para controlar cómo un elemento debe mezclarse con el fondo.

Clase de Utilidad	Propiedad CSS	Explicación Breve
`mix-blend-normal`	`mix-blend-mode: normal;`	Aplica `mix-blend-mode: normal;` al elemento; úsalo cuando necesites ajustar `mix-blend-mode` con esta utilidad.
`mix-blend-multiply`	`mix-blend-mode: multiply;`	Aplica `mix-blend-mode: multiply;` al elemento; úsalo cuando necesites ajustar `mix-blend-mode` con esta utilidad.
`mix-blend-screen`	`mix-blend-mode: screen;`	Aplica `mix-blend-mode: screen;` al elemento; úsalo cuando necesites ajustar `mix-blend-mode` con esta utilidad.
`mix-blend-overlay`	`mix-blend-mode: overlay;`	Aplica `mix-blend-mode: overlay;` al elemento; úsalo cuando necesites ajustar `mix-blend-mode` con esta utilidad.
`mix-blend-darken`	`mix-blend-mode: darken;`	Aplica `mix-blend-mode: darken;` al elemento; úsalo cuando necesites ajustar `mix-blend-mode` con esta utilidad.
`mix-blend-lighten`	`mix-blend-mode: lighten;`	Aplica `mix-blend-mode: lighten;` al elemento; úsalo cuando necesites ajustar `mix-blend-mode` con esta utilidad.
`mix-blend-color-dodge`	`mix-blend-mode: color-dodge;`	Aplica `mix-blend-mode: color-dodge;` al elemento; úsalo cuando necesites ajustar `mix-blend-mode` con esta utilidad.
`mix-blend-color-burn`	`mix-blend-mode: color-burn;`	Aplica `mix-blend-mode: color-burn;` al elemento; úsalo cuando necesites ajustar `mix-blend-mode` con esta utilidad.
`mix-blend-hard-light`	`mix-blend-mode: hard-light;`	Aplica `mix-blend-mode: hard-light;` al elemento; úsalo cuando necesites ajustar `mix-blend-mode` con esta utilidad.
`mix-blend-soft-light`	`mix-blend-mode: soft-light;`	Aplica `mix-blend-mode: soft-light;` al elemento; úsalo cuando necesites ajustar `mix-blend-mode` con esta utilidad.
`mix-blend-difference`	`mix-blend-mode: difference;`	Aplica `mix-blend-mode: difference;` al elemento; úsalo cuando necesites ajustar `mix-blend-mode` con esta utilidad.
`mix-blend-exclusion`	`mix-blend-mode: exclusion;`	Aplica `mix-blend-mode: exclusion;` al elemento; úsalo cuando necesites ajustar `mix-blend-mode` con esta utilidad.
`mix-blend-hue`	`mix-blend-mode: hue;`	Aplica `mix-blend-mode: hue;` al elemento; úsalo cuando necesites ajustar `mix-blend-mode` con esta utilidad.
`mix-blend-saturation`	`mix-blend-mode: saturation;`	Aplica `mix-blend-mode: saturation;` al elemento; úsalo cuando necesites ajustar `mix-blend-mode` con esta utilidad.
`mix-blend-color`	`mix-blend-mode: color;`	Aplica `mix-blend-mode: color;` al elemento; úsalo cuando necesites ajustar `mix-blend-mode` con esta utilidad.
`mix-blend-luminosity`	`mix-blend-mode: luminosity;`	Aplica `mix-blend-mode: luminosity;` al elemento; úsalo cuando necesites ajustar `mix-blend-mode` con esta utilidad.
`mix-blend-plus-darker`	`mix-blend-mode: plus-darker;`	Aplica `mix-blend-mode: plus-darker;` al elemento; úsalo cuando necesites ajustar `mix-blend-mode` con esta utilidad.
`mix-blend-plus-lighter`	`mix-blend-mode: plus-lighter;`	Aplica `mix-blend-mode: plus-lighter;` al elemento; úsalo cuando necesites ajustar `mix-blend-mode` con esta utilidad.

modo de fusión de fondo

Fuente oficial: https://tailwindcss.com/docs/background-blend-mode

Utilidades para controlar cómo la imagen de fondo de un elemento debe combinarse con su color de fondo.

clip de máscara

Fuente oficial: https://tailwindcss.com/docs/mask-clip

Utilidades para controlar el cuadro delimitador de la máscara de un elemento.

Clase de Utilidad	Propiedad CSS	Explicación Breve
`mask-clip-border`	`mask-clip: border-box;`	Aplica `mask-clip: border-box;` al elemento; úsalo cuando necesites ajustar `mask-clip` con esta utilidad.
`mask-clip-padding`	`mask-clip: padding-box;`	Aplica `mask-clip: padding-box;` al elemento; úsalo cuando necesites ajustar `mask-clip` con esta utilidad.
`mask-clip-content`	`mask-clip: content-box;`	Aplica `mask-clip: content-box;` al elemento; úsalo cuando necesites ajustar `mask-clip` con esta utilidad.
`mask-clip-fill`	`mask-clip: fill-box;`	Aplica `mask-clip: fill-box;` al elemento; úsalo cuando necesites ajustar `mask-clip` con esta utilidad.
`mask-clip-stroke`	`mask-clip: stroke-box;`	Aplica `mask-clip: stroke-box;` al elemento; úsalo cuando necesites ajustar `mask-clip` con esta utilidad.
`mask-clip-view`	`mask-clip: view-box;`	Aplica `mask-clip: view-box;` al elemento; úsalo cuando necesites ajustar `mask-clip` con esta utilidad.
`mask-no-clip`	`mask-clip: no-clip;`	Aplica `mask-clip: no-clip;` al elemento; úsalo cuando necesites ajustar `mask-clip` con esta utilidad.

compuesto de máscara

Fuente oficial: https://tailwindcss.com/docs/mask-composite

Utilidades para controlar cómo se combinan varias máscaras.

Clase de Utilidad	Propiedad CSS	Explicación Breve
`mask-add`	`mask-composite: add;`	Aplica `mask-composite: add;` al elemento; úsalo cuando necesites ajustar `mask-composite` con esta utilidad.
`mask-subtract`	`mask-composite: subtract;`	Aplica `mask-composite: subtract;` al elemento; úsalo cuando necesites ajustar `mask-composite` con esta utilidad.
`mask-intersect`	`mask-composite: intersect;`	Aplica `mask-composite: intersect;` al elemento; úsalo cuando necesites ajustar `mask-composite` con esta utilidad.
`mask-exclude`	`mask-composite: exclude;`	Aplica `mask-composite: exclude;` al elemento; úsalo cuando necesites ajustar `mask-composite` con esta utilidad.

imagen-mascara

Fuente oficial: https://tailwindcss.com/docs/mask-image

Utilidades para controlar la imagen de máscara de un elemento.

modo máscara

Fuente oficial: https://tailwindcss.com/docs/mask-mode

Utilidades para controlar el modo de máscara de un elemento.

Clase de Utilidad	Propiedad CSS	Explicación Breve
`mask-alpha`	`mask-mode: alpha;`	Aplica `mask-mode: alpha;` al elemento; úsalo cuando necesites ajustar `mask-mode` con esta utilidad.
`mask-luminance`	`mask-mode: luminance;`	Aplica `mask-mode: luminance;` al elemento; úsalo cuando necesites ajustar `mask-mode` con esta utilidad.
`mask-match`	`mask-mode: match-source;`	Aplica `mask-mode: match-source;` al elemento; úsalo cuando necesites ajustar `mask-mode` con esta utilidad.

origen-mascarilla

Fuente oficial: https://tailwindcss.com/docs/mask-origin

Utilidades para controlar cómo se posiciona la imagen de máscara de un elemento en relación con los bordes, el relleno y el contenido.

Clase de Utilidad	Propiedad CSS	Explicación Breve
`mask-origin-border`	`mask-origin: border-box;`	Aplica `mask-origin: border-box;` al elemento; úsalo cuando necesites ajustar `mask-origin` con esta utilidad.
`mask-origin-padding`	`mask-origin: padding-box;`	Aplica `mask-origin: padding-box;` al elemento; úsalo cuando necesites ajustar `mask-origin` con esta utilidad.
`mask-origin-content`	`mask-origin: content-box;`	Aplica `mask-origin: content-box;` al elemento; úsalo cuando necesites ajustar `mask-origin` con esta utilidad.
`mask-origin-fill`	`mask-origin: fill-box;`	Aplica `mask-origin: fill-box;` al elemento; úsalo cuando necesites ajustar `mask-origin` con esta utilidad.
`mask-origin-stroke`	`mask-origin: stroke-box;`	Aplica `mask-origin: stroke-box;` al elemento; úsalo cuando necesites ajustar `mask-origin` con esta utilidad.
`mask-origin-view`	`mask-origin: view-box;`	Aplica `mask-origin: view-box;` al elemento; úsalo cuando necesites ajustar `mask-origin` con esta utilidad.

posición de la máscara

Fuente oficial: https://tailwindcss.com/docs/mask-position

Utilidades para controlar la posición de la imagen de máscara de un elemento.

Clase de Utilidad	Propiedad CSS	Explicación Breve
`mask-top-left`	`mask-position: top left;`	Aplica `mask-position: top left;` al elemento; úsalo cuando necesites ajustar `mask-position` con esta utilidad.
`mask-top`	`mask-position: top;`	Aplica `mask-position: top;` al elemento; úsalo cuando necesites ajustar `mask-position` con esta utilidad.
`mask-top-right`	`mask-position: top right;`	Aplica `mask-position: top right;` al elemento; úsalo cuando necesites ajustar `mask-position` con esta utilidad.
`mask-left`	`mask-position: left;`	Aplica `mask-position: left;` al elemento; úsalo cuando necesites ajustar `mask-position` con esta utilidad.
`mask-center`	`mask-position: center;`	Aplica `mask-position: center;` al elemento; úsalo cuando necesites ajustar `mask-position` con esta utilidad.
`mask-right`	`mask-position: right;`	Aplica `mask-position: right;` al elemento; úsalo cuando necesites ajustar `mask-position` con esta utilidad.
`mask-bottom-left`	`mask-position: bottom left;`	Aplica `mask-position: bottom left;` al elemento; úsalo cuando necesites ajustar `mask-position` con esta utilidad.
`mask-bottom`	`mask-position: bottom;`	Aplica `mask-position: bottom;` al elemento; úsalo cuando necesites ajustar `mask-position` con esta utilidad.
`mask-bottom-right`	`mask-position: bottom right;`	Aplica `mask-position: bottom right;` al elemento; úsalo cuando necesites ajustar `mask-position` con esta utilidad.
`mask-position-( <custom-property> )`	`mask-position: var( <custom-property> );`	Aplica `mask-position: var( <custom-property> );` al elemento; úsalo cuando necesites ajustar `mask-position` con esta utilidad.
`mask-position-[ <value> ]`	`mask-position: <value> ;`	Aplica `mask-position: <value> ;` al elemento; úsalo cuando necesites ajustar `mask-position` con esta utilidad.

repetición de máscara

Fuente oficial: https://tailwindcss.com/docs/mask-repeat

Utilidades para controlar la repetición de la imagen de máscara de un elemento.

Clase de Utilidad	Propiedad CSS	Explicación Breve
`mask-repeat`	`mask-repeat: repeat;`	Aplica `mask-repeat: repeat;` al elemento; úsalo cuando necesites ajustar `mask-repeat` con esta utilidad.
`mask-no-repeat`	`mask-repeat: no-repeat;`	Aplica `mask-repeat: no-repeat;` al elemento; úsalo cuando necesites ajustar `mask-repeat` con esta utilidad.
`mask-repeat-x`	`mask-repeat: repeat-x;`	Aplica `mask-repeat: repeat-x;` al elemento; úsalo cuando necesites ajustar `mask-repeat` con esta utilidad.
`mask-repeat-y`	`mask-repeat: repeat-y;`	Aplica `mask-repeat: repeat-y;` al elemento; úsalo cuando necesites ajustar `mask-repeat` con esta utilidad.
`mask-repeat-space`	`mask-repeat: space;`	Aplica `mask-repeat: space;` al elemento; úsalo cuando necesites ajustar `mask-repeat` con esta utilidad.
`mask-repeat-round`	`mask-repeat: round;`	Aplica `mask-repeat: round;` al elemento; úsalo cuando necesites ajustar `mask-repeat` con esta utilidad.

tamaño de máscara

Fuente oficial: https://tailwindcss.com/docs/mask-size

Utilidades para controlar el tamaño de la imagen de máscara de un elemento.

Clase de Utilidad	Propiedad CSS	Explicación Breve
`mask-auto`	`mask-size: auto;`	Aplica `mask-size: auto;` al elemento; úsalo cuando necesites ajustar `mask-size` con esta utilidad.
`mask-cover`	`mask-size: cover;`	Aplica `mask-size: cover;` al elemento; úsalo cuando necesites ajustar `mask-size` con esta utilidad.
`mask-contain`	`mask-size: contain;`	Aplica `mask-size: contain;` al elemento; úsalo cuando necesites ajustar `mask-size` con esta utilidad.
`mask-size-( <custom-property> )`	`mask-size: var( <custom-property> );`	Aplica `mask-size: var( <custom-property> );` al elemento; úsalo cuando necesites ajustar `mask-size` con esta utilidad.
`mask-size-[ <value> ]`	`mask-size: <value> ;`	Aplica `mask-size: <value> ;` al elemento; úsalo cuando necesites ajustar `mask-size` con esta utilidad.

tipo máscara

Fuente oficial: https://tailwindcss.com/docs/mask-type

Utilidades para controlar cómo se interpreta una máscara SVG.

Clase de Utilidad	Propiedad CSS	Explicación Breve
`mask-type-alpha`	`mask-type: alpha;`	Aplica `mask-type: alpha;` al elemento; úsalo cuando necesites ajustar `mask-type` con esta utilidad.
`mask-type-luminance`	`mask-type: luminance;`	Aplica `mask-type: luminance;` al elemento; úsalo cuando necesites ajustar `mask-type` con esta utilidad.

filtrar

Fuente oficial: https://tailwindcss.com/docs/filter

Utilidades para aplicar filtros a un elemento.

Clase de Utilidad	Propiedad CSS	Explicación Breve
`filter-none`	`filter: none;`	Aplica `filter: none;` al elemento; úsalo cuando necesites ajustar `filter` con esta utilidad.
`filter-( <custom-property> )`	`filter: var( <custom-property> );`	Aplica `filter: var( <custom-property> );` al elemento; úsalo cuando necesites ajustar `filter` con esta utilidad.
`filter-[ <value> ]`	`filter: <value> ;`	Aplica `filter: <value> ;` al elemento; úsalo cuando necesites ajustar `filter` con esta utilidad.

filtro: desenfoque()

Fuente oficial: https://tailwindcss.com/docs/filter-blur

Utilidades para aplicar filtros de desenfoque a un elemento.

Clase de Utilidad	Propiedad CSS	Explicación Breve
`blur-xs`	`filter: blur(var(--blur-xs)); /* 4px */`	Aplica `filter: blur(var(--blur-xs)); /* 4px */` al elemento; úsalo cuando necesites ajustar `filter: blur()` con esta utilidad.
`blur-sm`	`filter: blur(var(--blur-sm)); /* 8px */`	Aplica `filter: blur(var(--blur-sm)); /* 8px */` al elemento; úsalo cuando necesites ajustar `filter: blur()` con esta utilidad.
`blur-md`	`filter: blur(var(--blur-md)); /* 12px */`	Aplica `filter: blur(var(--blur-md)); /* 12px */` al elemento; úsalo cuando necesites ajustar `filter: blur()` con esta utilidad.
`blur-lg`	`filter: blur(var(--blur-lg)); /* 16px */`	Aplica `filter: blur(var(--blur-lg)); /* 16px */` al elemento; úsalo cuando necesites ajustar `filter: blur()` con esta utilidad.
`blur-xl`	`filter: blur(var(--blur-xl)); /* 24px */`	Aplica `filter: blur(var(--blur-xl)); /* 24px */` al elemento; úsalo cuando necesites ajustar `filter: blur()` con esta utilidad.
`blur-2xl`	`filter: blur(var(--blur-2xl)); /* 40px */`	Aplica `filter: blur(var(--blur-2xl)); /* 40px */` al elemento; úsalo cuando necesites ajustar `filter: blur()` con esta utilidad.
`blur-3xl`	`filter: blur(var(--blur-3xl)); /* 64px */`	Aplica `filter: blur(var(--blur-3xl)); /* 64px */` al elemento; úsalo cuando necesites ajustar `filter: blur()` con esta utilidad.
`blur-none`	`filter: ;`	Aplica `filter: ;` al elemento; úsalo cuando necesites ajustar `filter: blur()` con esta utilidad.
`blur-( <custom-property> )`	`filter: blur(var( <custom-property> ));`	Aplica `filter: blur(var( <custom-property> ));` al elemento; úsalo cuando necesites ajustar `filter: blur()` con esta utilidad.
`blur-[ <value> ]`	`filter: blur( <value> );`	Aplica `filter: blur( <value> );` al elemento; úsalo cuando necesites ajustar `filter: blur()` con esta utilidad.

filtro: brillo()

Fuente oficial: https://tailwindcss.com/docs/filter-brightness

Utilidades para aplicar filtros de brillo a un elemento.

Clase de Utilidad	Propiedad CSS	Explicación Breve
`brightness- <number>`	`filter: brightness( <number> %);`	Aplica `filter: brightness( <number> %);` al elemento; úsalo cuando necesites ajustar `filter: brightness()` con esta utilidad.
`brightness-( <custom-property> )`	`filter: brightness(var( <custom-property> ));`	Aplica `filter: brightness(var( <custom-property> ));` al elemento; úsalo cuando necesites ajustar `filter: brightness()` con esta utilidad.
`brightness-[ <value> ]`	`filter: brightness( <value> );`	Aplica `filter: brightness( <value> );` al elemento; úsalo cuando necesites ajustar `filter: brightness()` con esta utilidad.

filtro: contraste()

Fuente oficial: https://tailwindcss.com/docs/filter-contrast

Utilidades para aplicar filtros de contraste a un elemento.

Clase de Utilidad	Propiedad CSS	Explicación Breve
`contrast- <number>`	`filter: contrast( <number> %);`	Aplica `filter: contrast( <number> %);` al elemento; úsalo cuando necesites ajustar `filter: contrast()` con esta utilidad.
`contrast-( <custom-property> )`	`filter: contrast(var( <custom-property> ));`	Aplica `filter: contrast(var( <custom-property> ));` al elemento; úsalo cuando necesites ajustar `filter: contrast()` con esta utilidad.
`contrast-[ <value> ]`	`filter: contrast( <value> );`	Aplica `filter: contrast( <value> );` al elemento; úsalo cuando necesites ajustar `filter: contrast()` con esta utilidad.

filtro: sombra paralela ()

Fuente oficial: https://tailwindcss.com/docs/filter-drop-shadow

Utilidades para aplicar filtros de sombra paralela a un elemento.

filtro: escala de grises()

Fuente oficial: https://tailwindcss.com/docs/filter-grayscale

Utilidades para aplicar filtros de escala de grises a un elemento.

Clase de Utilidad	Propiedad CSS	Explicación Breve
`grayscale`	`filter: grayscale(100%);`	Aplica `filter: grayscale(100%);` al elemento; úsalo cuando necesites ajustar `filter: grayscale()` con esta utilidad.
`grayscale- <number>`	`filter: grayscale( <number> %);`	Aplica `filter: grayscale( <number> %);` al elemento; úsalo cuando necesites ajustar `filter: grayscale()` con esta utilidad.
`grayscale-( <custom-property> )`	`filter: grayscale(var( <custom-property> ));`	Aplica `filter: grayscale(var( <custom-property> ));` al elemento; úsalo cuando necesites ajustar `filter: grayscale()` con esta utilidad.
`grayscale-[ <value> ]`	`filter: grayscale( <value> );`	Aplica `filter: grayscale( <value> );` al elemento; úsalo cuando necesites ajustar `filter: grayscale()` con esta utilidad.

filtro: solicitud-rotar()

Fuente oficial: https://tailwindcss.com/docs/filter-hue-rotate

Utilidades para aplicar filtros de rotación de tono a un elemento.

Clase de Utilidad	Propiedad CSS	Explicación Breve
`hue-rotate- <number>`	`filter: hue-rotate( <number> deg);`	Aplica `filter: hue-rotate( <number> deg);` al elemento; úsalo cuando necesites ajustar `filter: hue-rotate()` con esta utilidad.
`-hue-rotate- <number>`	`filter: hue-rotate(calc( <number> deg * -1));`	Aplica `filter: hue-rotate(calc( <number> deg * -1));` al elemento; úsalo cuando necesites ajustar `filter: hue-rotate()` con esta utilidad.
`hue-rotate-( <custom-property> )`	`filter: hue-rotate(var( <custom-property> ));`	Aplica `filter: hue-rotate(var( <custom-property> ));` al elemento; úsalo cuando necesites ajustar `filter: hue-rotate()` con esta utilidad.
`hue-rotate-[ <value> ]`	`filter: hue-rotate( <value> );`	Aplica `filter: hue-rotate( <value> );` al elemento; úsalo cuando necesites ajustar `filter: hue-rotate()` con esta utilidad.

filtro: invertir()

Fuente oficial: https://tailwindcss.com/docs/filter-invert

Utilidades para aplicar filtros de inversión a un elemento.

Clase de Utilidad	Propiedad CSS	Explicación Breve
`invert`	`filter: invert(100%);`	Aplica `filter: invert(100%);` al elemento; úsalo cuando necesites ajustar `filter: invert()` con esta utilidad.
`invert- <number>`	`filter: invert( <number> %);`	Aplica `filter: invert( <number> %);` al elemento; úsalo cuando necesites ajustar `filter: invert()` con esta utilidad.
`invert-( <custom-property> )`	`filter: invert(var( <custom-property> ));`	Aplica `filter: invert(var( <custom-property> ));` al elemento; úsalo cuando necesites ajustar `filter: invert()` con esta utilidad.
`invert-[ <value> ]`	`filter: invert( <value> );`	Aplica `filter: invert( <value> );` al elemento; úsalo cuando necesites ajustar `filter: invert()` con esta utilidad.

filtro: saturar()

Fuente oficial: https://tailwindcss.com/docs/filter-saturate

Utilidades para aplicar filtros de saturación a un elemento.

Clase de Utilidad	Propiedad CSS	Explicación Breve
`saturate- <number>`	`filter: saturate( <number> %);`	Aplica `filter: saturate( <number> %);` al elemento; úsalo cuando necesites ajustar `filter: saturate()` con esta utilidad.
`saturate-( <custom-property> )`	`filter: saturate(var( <custom-property> ));`	Aplica `filter: saturate(var( <custom-property> ));` al elemento; úsalo cuando necesites ajustar `filter: saturate()` con esta utilidad.
`saturate-[ <value> ]`	`filter: saturate( <value> );`	Aplica `filter: saturate( <value> );` al elemento; úsalo cuando necesites ajustar `filter: saturate()` con esta utilidad.

filtro:sepia()

Fuente oficial: https://tailwindcss.com/docs/filter-sepia

Utilidades para aplicar filtros sepia a un elemento.

Clase de Utilidad	Propiedad CSS	Explicación Breve
`sepia`	`filter: sepia(100%);`	Aplica `filter: sepia(100%);` al elemento; úsalo cuando necesites ajustar `filter: sepia()` con esta utilidad.
`sepia- <number>`	`filter: sepia( <number> %);`	Aplica `filter: sepia( <number> %);` al elemento; úsalo cuando necesites ajustar `filter: sepia()` con esta utilidad.
`sepia-( <custom-property> )`	`filter: sepia(var( <custom-property> ));`	Aplica `filter: sepia(var( <custom-property> ));` al elemento; úsalo cuando necesites ajustar `filter: sepia()` con esta utilidad.
`sepia-[ <value> ]`	`filter: sepia( <value> );`	Aplica `filter: sepia( <value> );` al elemento; úsalo cuando necesites ajustar `filter: sepia()` con esta utilidad.

filtro de fondo

Fuente oficial: https://tailwindcss.com/docs/backdrop-filter

Utilidades para aplicar filtros de fondo a un elemento.

Clase de Utilidad	Propiedad CSS	Explicación Breve
`backdrop-filter-none`	`backdrop-filter: none;`	Aplica `backdrop-filter: none;` al elemento; úsalo cuando necesites ajustar `backdrop-filter` con esta utilidad.
`backdrop-filter-( <custom-property> )`	`backdrop-filter: var( <custom-property> );`	Aplica `backdrop-filter: var( <custom-property> );` al elemento; úsalo cuando necesites ajustar `backdrop-filter` con esta utilidad.
`backdrop-filter-[ <value> ]`	`backdrop-filter: <value> ;`	Aplica `backdrop-filter: <value> ;` al elemento; úsalo cuando necesites ajustar `backdrop-filter` con esta utilidad.

filtro de fondo: desenfoque()

Fuente oficial: https://tailwindcss.com/docs/backdrop-filter-blur

Utilidades para aplicar filtros de desenfoque de fondo a un elemento.

Clase de Utilidad	Propiedad CSS	Explicación Breve
`backdrop-blur-xs`	`backdrop-filter: blur(var(--blur-xs)); /* 4px */`	Aplica `backdrop-filter: blur(var(--blur-xs)); /* 4px */` al elemento; úsalo cuando necesites ajustar `backdrop-filter: blur()` con esta utilidad.
`backdrop-blur-sm`	`backdrop-filter: blur(var(--blur-sm)); /* 8px */`	Aplica `backdrop-filter: blur(var(--blur-sm)); /* 8px */` al elemento; úsalo cuando necesites ajustar `backdrop-filter: blur()` con esta utilidad.
`backdrop-blur-md`	`backdrop-filter: blur(var(--blur-md)); /* 12px */`	Aplica `backdrop-filter: blur(var(--blur-md)); /* 12px */` al elemento; úsalo cuando necesites ajustar `backdrop-filter: blur()` con esta utilidad.
`backdrop-blur-lg`	`backdrop-filter: blur(var(--blur-lg)); /* 16px */`	Aplica `backdrop-filter: blur(var(--blur-lg)); /* 16px */` al elemento; úsalo cuando necesites ajustar `backdrop-filter: blur()` con esta utilidad.
`backdrop-blur-xl`	`backdrop-filter: blur(var(--blur-xl)); /* 24px */`	Aplica `backdrop-filter: blur(var(--blur-xl)); /* 24px */` al elemento; úsalo cuando necesites ajustar `backdrop-filter: blur()` con esta utilidad.
`backdrop-blur-2xl`	`backdrop-filter: blur(var(--blur-2xl)); /* 40px */`	Aplica `backdrop-filter: blur(var(--blur-2xl)); /* 40px */` al elemento; úsalo cuando necesites ajustar `backdrop-filter: blur()` con esta utilidad.
`backdrop-blur-3xl`	`backdrop-filter: blur(var(--blur-3xl)); /* 64px */`	Aplica `backdrop-filter: blur(var(--blur-3xl)); /* 64px */` al elemento; úsalo cuando necesites ajustar `backdrop-filter: blur()` con esta utilidad.
`backdrop-blur-none`	`backdrop-filter: ;`	Aplica `backdrop-filter: ;` al elemento; úsalo cuando necesites ajustar `backdrop-filter: blur()` con esta utilidad.
`backdrop-blur-( <custom-property> )`	`backdrop-filter: blur(var( <custom-property> ));`	Aplica `backdrop-filter: blur(var( <custom-property> ));` al elemento; úsalo cuando necesites ajustar `backdrop-filter: blur()` con esta utilidad.
`backdrop-blur-[ <value> ]`	`backdrop-filter: blur( <value> );`	Aplica `backdrop-filter: blur( <value> );` al elemento; úsalo cuando necesites ajustar `backdrop-filter: blur()` con esta utilidad.

filtro de fondo: brillo()

Fuente oficial: https://tailwindcss.com/docs/backdrop-filter-brightness

Utilidades para aplicar filtros de brillo de fondo a un elemento.

Clase de Utilidad	Propiedad CSS	Explicación Breve
`backdrop-brightness- <number>`	`backdrop-filter: brightness( <number> %);`	Aplica `backdrop-filter: brightness( <number> %);` al elemento; úsalo cuando necesites ajustar `backdrop-filter: brightness()` con esta utilidad.
`backdrop-brightness-( <custom-property> )`	`backdrop-filter: brightness(var( <custom-property> ));`	Aplica `backdrop-filter: brightness(var( <custom-property> ));` al elemento; úsalo cuando necesites ajustar `backdrop-filter: brightness()` con esta utilidad.
`backdrop-brightness-[ <value> ]`	`backdrop-filter: brightness( <value> );`	Aplica `backdrop-filter: brightness( <value> );` al elemento; úsalo cuando necesites ajustar `backdrop-filter: brightness()` con esta utilidad.

filtro de fondo: contraste()

Fuente oficial: https://tailwindcss.com/docs/backdrop-filter-contrast

Utilidades para aplicar filtros de contraste de fondo a un elemento.

Clase de Utilidad	Propiedad CSS	Explicación Breve
`backdrop-contrast- <number>`	`backdrop-filter: contrast( <number> %);`	Aplica `backdrop-filter: contrast( <number> %);` al elemento; úsalo cuando necesites ajustar `backdrop-filter: contrast()` con esta utilidad.
`backdrop-contrast-( <custom-property> )`	`backdrop-filter: contrast(var( <custom-property> ));`	Aplica `backdrop-filter: contrast(var( <custom-property> ));` al elemento; úsalo cuando necesites ajustar `backdrop-filter: contrast()` con esta utilidad.
`backdrop-contrast-[ <value> ]`	`backdrop-filter: contrast( <value> );`	Aplica `backdrop-filter: contrast( <value> );` al elemento; úsalo cuando necesites ajustar `backdrop-filter: contrast()` con esta utilidad.

filtro de fondo: escala de grises()

Fuente oficial: https://tailwindcss.com/docs/backdrop-filter-grayscale

Utilidades para aplicar filtros de fondo en escala de grises a un elemento.

Clase de Utilidad	Propiedad CSS	Explicación Breve
`backdrop-grayscale`	`backdrop-filter: grayscale(100%);`	Aplica `backdrop-filter: grayscale(100%);` al elemento; úsalo cuando necesites ajustar `backdrop-filter: grayscale()` con esta utilidad.
`backdrop-grayscale- <number>`	`backdrop-filter: grayscale( <number> %);`	Aplica `backdrop-filter: grayscale( <number> %);` al elemento; úsalo cuando necesites ajustar `backdrop-filter: grayscale()` con esta utilidad.
`backdrop-grayscale-( <custom-property> )`	`backdrop-filter: grayscale(var( <custom-property> ));`	Aplica `backdrop-filter: grayscale(var( <custom-property> ));` al elemento; úsalo cuando necesites ajustar `backdrop-filter: grayscale()` con esta utilidad.
`backdrop-grayscale-[ <value> ]`	`backdrop-filter: grayscale( <value> );`	Aplica `backdrop-filter: grayscale( <value> );` al elemento; úsalo cuando necesites ajustar `backdrop-filter: grayscale()` con esta utilidad.

filtro de fondo: rotación de tono ()

Fuente oficial: https://tailwindcss.com/docs/backdrop-filter-hue-rotate

Utilidades para aplicar filtros de rotación de tono de fondo a un elemento.

Clase de Utilidad	Propiedad CSS	Explicación Breve
`backdrop-hue-rotate- <number>`	`backdrop-filter: hue-rotate( <number> deg);`	Aplica `backdrop-filter: hue-rotate( <number> deg);` al elemento; úsalo cuando necesites ajustar `backdrop-filter: hue-rotate()` con esta utilidad.
`-backdrop-hue-rotate- <number>`	`backdrop-filter: hue-rotate(calc( <number> deg * -1));`	Aplica `backdrop-filter: hue-rotate(calc( <number> deg * -1));` al elemento; úsalo cuando necesites ajustar `backdrop-filter: hue-rotate()` con esta utilidad.
`backdrop-hue-rotate-( <custom-property> )`	`backdrop-filter: hue-rotate(var( <custom-property> ));`	Aplica `backdrop-filter: hue-rotate(var( <custom-property> ));` al elemento; úsalo cuando necesites ajustar `backdrop-filter: hue-rotate()` con esta utilidad.
`backdrop-hue-rotate-[ <value> ]`	`backdrop-filter: hue-rotate( <value> );`	Aplica `backdrop-filter: hue-rotate( <value> );` al elemento; úsalo cuando necesites ajustar `backdrop-filter: hue-rotate()` con esta utilidad.

filtro de fondo: invertir()

Fuente oficial: https://tailwindcss.com/docs/backdrop-filter-invert

Utilidades para aplicar filtros de inversión de fondo a un elemento.

Clase de Utilidad	Propiedad CSS	Explicación Breve
`backdrop-invert`	`backdrop-filter: invert(100%);`	Aplica `backdrop-filter: invert(100%);` al elemento; úsalo cuando necesites ajustar `backdrop-filter: invert()` con esta utilidad.
`backdrop-invert- <number>`	`backdrop-filter: invert( <number> %);`	Aplica `backdrop-filter: invert( <number> %);` al elemento; úsalo cuando necesites ajustar `backdrop-filter: invert()` con esta utilidad.
`backdrop-invert-( <custom-property> )`	`backdrop-filter: invert(var( <custom-property> ))`	Aplica `backdrop-filter: invert(var( <custom-property> ))` al elemento; úsalo cuando necesites ajustar `backdrop-filter: invert()` con esta utilidad.
`backdrop-invert-[ <value> ]`	`backdrop-filter: invert( <value> );`	Aplica `backdrop-filter: invert( <value> );` al elemento; úsalo cuando necesites ajustar `backdrop-filter: invert()` con esta utilidad.

filtro de fondo: opacidad()

Fuente oficial: https://tailwindcss.com/docs/backdrop-filter-opacity

Utilidades para aplicar filtros de opacidad de fondo a un elemento.

Clase de Utilidad	Propiedad CSS	Explicación Breve
`backdrop-opacity- <number>`	`backdrop-filter: opacity( <number> %);`	Aplica `backdrop-filter: opacity( <number> %);` al elemento; úsalo cuando necesites ajustar `backdrop-filter: opacity()` con esta utilidad.
`backdrop-opacity-( <custom-property> )`	`backdrop-filter: opacity(var( <custom-property> ));`	Aplica `backdrop-filter: opacity(var( <custom-property> ));` al elemento; úsalo cuando necesites ajustar `backdrop-filter: opacity()` con esta utilidad.
`backdrop-opacity-[ <value> ]`	`backdrop-filter: opacity( <value> );`	Aplica `backdrop-filter: opacity( <value> );` al elemento; úsalo cuando necesites ajustar `backdrop-filter: opacity()` con esta utilidad.

filtro de fondo: saturar()

Fuente oficial: https://tailwindcss.com/docs/backdrop-filter-saturate

Utilidades para aplicar filtros de saturación de fondo a un elemento.

Clase de Utilidad	Propiedad CSS	Explicación Breve
`backdrop-saturate- <number>`	`backdrop-filter: saturate( <number> %);`	Aplica `backdrop-filter: saturate( <number> %);` al elemento; úsalo cuando necesites ajustar `backdrop-filter: saturate()` con esta utilidad.
`backdrop-saturate-( <custom-property> )`	`backdrop-filter: saturate(var( <custom-property> ));`	Aplica `backdrop-filter: saturate(var( <custom-property> ));` al elemento; úsalo cuando necesites ajustar `backdrop-filter: saturate()` con esta utilidad.
`backdrop-saturate-[ <value> ]`	`backdrop-filter: saturate( <value> );`	Aplica `backdrop-filter: saturate( <value> );` al elemento; úsalo cuando necesites ajustar `backdrop-filter: saturate()` con esta utilidad.

filtro de fondo: sepia()

Fuente oficial: https://tailwindcss.com/docs/backdrop-filter-sepia

Utilidades para aplicar filtros sepia de fondo a un elemento.

Clase de Utilidad	Propiedad CSS	Explicación Breve
`backdrop-sepia`	`backdrop-filter: sepia(100%);`	Aplica `backdrop-filter: sepia(100%);` al elemento; úsalo cuando necesites ajustar `backdrop-filter: sepia()` con esta utilidad.
`backdrop-sepia- <number>`	`backdrop-filter: sepia( <number> %);`	Aplica `backdrop-filter: sepia( <number> %);` al elemento; úsalo cuando necesites ajustar `backdrop-filter: sepia()` con esta utilidad.
`backdrop-sepia-( <custom-property> )`	`backdrop-filter: sepia(var( <custom-property> ));`	Aplica `backdrop-filter: sepia(var( <custom-property> ));` al elemento; úsalo cuando necesites ajustar `backdrop-filter: sepia()` con esta utilidad.
`backdrop-sepia-[ <value> ]`	`backdrop-filter: sepia( <value> );`	Aplica `backdrop-filter: sepia( <value> );` al elemento; úsalo cuando necesites ajustar `backdrop-filter: sepia()` con esta utilidad.

Clase de Utilidad	Propiedad CSS	Explicación Breve
`bg-[ <value> ]`	`background-image: <value> ;`	Aplica `background-image: <value> ;` al elemento; úsalo cuando necesites ajustar `background-image` con esta utilidad.
`bg-(image: <custom-property> )`	`background-image: var( <custom-property> );`	Aplica `background-image: var( <custom-property> );` al elemento; úsalo cuando necesites ajustar `background-image` con esta utilidad.
`bg-none`	`background-image: none;`	Aplica `background-image: none;` al elemento; úsalo cuando necesites ajustar `background-image` con esta utilidad.
`bg-linear-to-t`	`background-image: linear-gradient(to top, var(--tw-gradient-stops));`	Aplica `background-image: linear-gradient(to top, var(--tw-gradient-stops));` al elemento; úsalo cuando necesites ajustar `background-image` con esta utilidad.
`bg-linear-to-tr`	`background-image: linear-gradient(to top right, var(--tw-gradient-stops));`	Aplica `background-image: linear-gradient(to top right, var(--tw-gradient-stops));` al elemento; úsalo cuando necesites ajustar `background-image` con esta utilidad.
`bg-linear-to-r`	`background-image: linear-gradient(to right, var(--tw-gradient-stops));`	Aplica `background-image: linear-gradient(to right, var(--tw-gradient-stops));` al elemento; úsalo cuando necesites ajustar `background-image` con esta utilidad.
`bg-linear-to-br`	`background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));`	Aplica `background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));` al elemento; úsalo cuando necesites ajustar `background-image` con esta utilidad.
`bg-linear-to-b`	`background-image: linear-gradient(to bottom, var(--tw-gradient-stops));`	Aplica `background-image: linear-gradient(to bottom, var(--tw-gradient-stops));` al elemento; úsalo cuando necesites ajustar `background-image` con esta utilidad.
`bg-linear-to-bl`	`background-image: linear-gradient(to bottom left, var(--tw-gradient-stops));`	Aplica `background-image: linear-gradient(to bottom left, var(--tw-gradient-stops));` al elemento; úsalo cuando necesites ajustar `background-image` con esta utilidad.
`bg-linear-to-l`	`background-image: linear-gradient(to left, var(--tw-gradient-stops));`	Aplica `background-image: linear-gradient(to left, var(--tw-gradient-stops));` al elemento; úsalo cuando necesites ajustar `background-image` con esta utilidad.
`bg-linear-to-tl`	`background-image: linear-gradient(to top left, var(--tw-gradient-stops));`	Aplica `background-image: linear-gradient(to top left, var(--tw-gradient-stops));` al elemento; úsalo cuando necesites ajustar `background-image` con esta utilidad.
`bg-linear- <angle>`	`background-image: linear-gradient( <angle> in oklab, var(--tw-gradient-stops));`	Aplica `background-image: linear-gradient( <angle> in oklab, var(--tw-gradient-stops));` al elemento; úsalo cuando necesites ajustar `background-image` con esta utilidad.
`-bg-linear- <angle>`	`background-image: linear-gradient(- <angle> in oklab, var(--tw-gradient-stops));`	Aplica `background-image: linear-gradient(- <angle> in oklab, var(--tw-gradient-stops));` al elemento; úsalo cuando necesites ajustar `background-image` con esta utilidad.
`bg-linear-( <custom-property> )`	`background-image: linear-gradient(var(--tw-gradient-stops, var( <custom-property> )));`	Aplica `background-image: linear-gradient(var(--tw-gradient-stops, var( <custom-property> )));` al elemento; úsalo cuando necesites ajustar `background-image` con esta utilidad.
`bg-linear-[ <value> ]`	`background-image: linear-gradient(var(--tw-gradient-stops, <value> ));`	Aplica `background-image: linear-gradient(var(--tw-gradient-stops, <value> ));` al elemento; úsalo cuando necesites ajustar `background-image` con esta utilidad.
`bg-radial`	`background-image: radial-gradient(in oklab, var(--tw-gradient-stops));`	Aplica `background-image: radial-gradient(in oklab, var(--tw-gradient-stops));` al elemento; úsalo cuando necesites ajustar `background-image` con esta utilidad.
`bg-radial-( <custom-property> )`	`background-image: radial-gradient(var(--tw-gradient-stops, var( <custom-property> )));`	Aplica `background-image: radial-gradient(var(--tw-gradient-stops, var( <custom-property> )));` al elemento; úsalo cuando necesites ajustar `background-image` con esta utilidad.
`bg-radial-[ <value> ]`	`background-image: radial-gradient(var(--tw-gradient-stops, <value> ));`	Aplica `background-image: radial-gradient(var(--tw-gradient-stops, <value> ));` al elemento; úsalo cuando necesites ajustar `background-image` con esta utilidad.
`bg-conic- <angle>`	`background-image: conic-gradient(from <angle> in oklab, var(--tw-gradient-stops));`	Aplica `background-image: conic-gradient(from <angle> in oklab, var(--tw-gradient-stops));` al elemento; úsalo cuando necesites ajustar `background-image` con esta utilidad.
`-bg-conic- <angle>`	`background-image: conic-gradient(from - <angle> in oklab, var(--tw-gradient-stops));`	Aplica `background-image: conic-gradient(from - <angle> in oklab, var(--tw-gradient-stops));` al elemento; úsalo cuando necesites ajustar `background-image` con esta utilidad.
`bg-conic-( <custom-property> )`	`background-image: var( <custom-property> );`	Aplica `background-image: var( <custom-property> );` al elemento; úsalo cuando necesites ajustar `background-image` con esta utilidad.
`bg-conic-[ <value> ]`	`background-image: <value> ;`	Aplica `background-image: <value> ;` al elemento; úsalo cuando necesites ajustar `background-image` con esta utilidad.
`from- <color>`	`--tw-gradient-from: <color> ;`	Aplica `--tw-gradient-from: <color> ;` al elemento; úsalo cuando necesites ajustar `background-image` con esta utilidad.
`from- <percentage>`	`--tw-gradient-from-position: <percentage> ;`	Aplica `--tw-gradient-from-position: <percentage> ;` al elemento; úsalo cuando necesites ajustar `background-image` con esta utilidad.
`from-( <custom-property> )`	`--tw-gradient-from: var( <custom-property> );`	Aplica `--tw-gradient-from: var( <custom-property> );` al elemento; úsalo cuando necesites ajustar `background-image` con esta utilidad.
`from-[ <value> ]`	`--tw-gradient-from: <value> ;`	Aplica `--tw-gradient-from: <value> ;` al elemento; úsalo cuando necesites ajustar `background-image` con esta utilidad.
`via- <color>`	`--tw-gradient-via: <color> ;`	Aplica `--tw-gradient-via: <color> ;` al elemento; úsalo cuando necesites ajustar `background-image` con esta utilidad.
`via- <percentage>`	`--tw-gradient-via-position: <percentage> ;`	Aplica `--tw-gradient-via-position: <percentage> ;` al elemento; úsalo cuando necesites ajustar `background-image` con esta utilidad.
`via-( <custom-property> )`	`--tw-gradient-via: var( <custom-property> );`	Aplica `--tw-gradient-via: var( <custom-property> );` al elemento; úsalo cuando necesites ajustar `background-image` con esta utilidad.
`via-[ <value> ]`	`--tw-gradient-via: <value> ;`	Aplica `--tw-gradient-via: <value> ;` al elemento; úsalo cuando necesites ajustar `background-image` con esta utilidad.
`to- <color>`	`--tw-gradient-to: <color> ;`	Aplica `--tw-gradient-to: <color> ;` al elemento; úsalo cuando necesites ajustar `background-image` con esta utilidad.
`to- <percentage>`	`--tw-gradient-to-position: <percentage> ;`	Aplica `--tw-gradient-to-position: <percentage> ;` al elemento; úsalo cuando necesites ajustar `background-image` con esta utilidad.
`to-( <custom-property> )`	`--tw-gradient-to: var( <custom-property> );`	Aplica `--tw-gradient-to: var( <custom-property> );` al elemento; úsalo cuando necesites ajustar `background-image` con esta utilidad.
`to-[ <value> ]`	`--tw-gradient-to: <value> ;`	Aplica `--tw-gradient-to: <value> ;` al elemento; úsalo cuando necesites ajustar `background-image` con esta utilidad.

Clase de Utilidad	Propiedad CSS	Explicación Breve
`bg-blend-normal`	`background-blend-mode: normal;`	Aplica `background-blend-mode: normal;` al elemento; úsalo cuando necesites ajustar `background-blend-mode` con esta utilidad.
`bg-blend-multiply`	`background-blend-mode: multiply;`	Aplica `background-blend-mode: multiply;` al elemento; úsalo cuando necesites ajustar `background-blend-mode` con esta utilidad.
`bg-blend-screen`	`background-blend-mode: screen;`	Aplica `background-blend-mode: screen;` al elemento; úsalo cuando necesites ajustar `background-blend-mode` con esta utilidad.
`bg-blend-overlay`	`background-blend-mode: overlay;`	Aplica `background-blend-mode: overlay;` al elemento; úsalo cuando necesites ajustar `background-blend-mode` con esta utilidad.
`bg-blend-darken`	`background-blend-mode: darken;`	Aplica `background-blend-mode: darken;` al elemento; úsalo cuando necesites ajustar `background-blend-mode` con esta utilidad.
`bg-blend-lighten`	`background-blend-mode: lighten;`	Aplica `background-blend-mode: lighten;` al elemento; úsalo cuando necesites ajustar `background-blend-mode` con esta utilidad.
`bg-blend-color-dodge`	`background-blend-mode: color-dodge;`	Aplica `background-blend-mode: color-dodge;` al elemento; úsalo cuando necesites ajustar `background-blend-mode` con esta utilidad.
`bg-blend-color-burn`	`background-blend-mode: color-burn;`	Aplica `background-blend-mode: color-burn;` al elemento; úsalo cuando necesites ajustar `background-blend-mode` con esta utilidad.
`bg-blend-hard-light`	`background-blend-mode: hard-light;`	Aplica `background-blend-mode: hard-light;` al elemento; úsalo cuando necesites ajustar `background-blend-mode` con esta utilidad.
`bg-blend-soft-light`	`background-blend-mode: soft-light;`	Aplica `background-blend-mode: soft-light;` al elemento; úsalo cuando necesites ajustar `background-blend-mode` con esta utilidad.
`bg-blend-difference`	`background-blend-mode: difference;`	Aplica `background-blend-mode: difference;` al elemento; úsalo cuando necesites ajustar `background-blend-mode` con esta utilidad.
`bg-blend-exclusion`	`background-blend-mode: exclusion;`	Aplica `background-blend-mode: exclusion;` al elemento; úsalo cuando necesites ajustar `background-blend-mode` con esta utilidad.
`bg-blend-hue`	`background-blend-mode: hue;`	Aplica `background-blend-mode: hue;` al elemento; úsalo cuando necesites ajustar `background-blend-mode` con esta utilidad.
`bg-blend-saturation`	`background-blend-mode: saturation;`	Aplica `background-blend-mode: saturation;` al elemento; úsalo cuando necesites ajustar `background-blend-mode` con esta utilidad.
`bg-blend-color`	`background-blend-mode: color;`	Aplica `background-blend-mode: color;` al elemento; úsalo cuando necesites ajustar `background-blend-mode` con esta utilidad.
`bg-blend-luminosity`	`background-blend-mode: luminosity;`	Aplica `background-blend-mode: luminosity;` al elemento; úsalo cuando necesites ajustar `background-blend-mode` con esta utilidad.

Clase de Utilidad	Propiedad CSS	Explicación Breve
`bg-inherit`	`background-color: inherit;`	Aplica `background-color: inherit;` al elemento; úsalo cuando necesites ajustar `background-color` con esta utilidad.
`bg-current`	`background-color: currentColor;`	Aplica `background-color: currentColor;` al elemento; úsalo cuando necesites ajustar `background-color` con esta utilidad.
`bg-transparent`	`background-color: transparent;`	Aplica `background-color: transparent;` al elemento; úsalo cuando necesites ajustar `background-color` con esta utilidad.
`bg-black`	`background-color: var(--color-black); /* #000 */`	Aplica `background-color: var(--color-black); /* #000 */` al elemento; úsalo cuando necesites ajustar `background-color` con esta utilidad.
`bg-white`	`background-color: var(--color-white); /* #fff */`	Aplica `background-color: var(--color-white); /* #fff */` al elemento; úsalo cuando necesites ajustar `background-color` con esta utilidad.
`bg-red-50`	`background-color: var(--color-red-50); /* oklch(97.1% 0.013 17.38) */`	Aplica `background-color: var(--color-red-50); /* oklch(97.1% 0.013 17.38) */` al elemento; úsalo cuando necesites ajustar `background-color` con esta utilidad.
`bg-red-100`	`background-color: var(--color-red-100); /* oklch(93.6% 0.032 17.717) */`	Aplica `background-color: var(--color-red-100); /* oklch(93.6% 0.032 17.717) */` al elemento; úsalo cuando necesites ajustar `background-color` con esta utilidad.
`bg-red-200`	`background-color: var(--color-red-200); /* oklch(88.5% 0.062 18.334) */`	Aplica `background-color: var(--color-red-200); /* oklch(88.5% 0.062 18.334) */` al elemento; úsalo cuando necesites ajustar `background-color` con esta utilidad.
`bg-red-300`	`background-color: var(--color-red-300); /* oklch(80.8% 0.114 19.571) */`	Aplica `background-color: var(--color-red-300); /* oklch(80.8% 0.114 19.571) */` al elemento; úsalo cuando necesites ajustar `background-color` con esta utilidad.
`bg-red-400`	`background-color: var(--color-red-400); /* oklch(70.4% 0.191 22.216) */`	Aplica `background-color: var(--color-red-400); /* oklch(70.4% 0.191 22.216) */` al elemento; úsalo cuando necesites ajustar `background-color` con esta utilidad.
`bg-red-500`	`background-color: var(--color-red-500); /* oklch(63.7% 0.237 25.331) */`	Aplica `background-color: var(--color-red-500); /* oklch(63.7% 0.237 25.331) */` al elemento; úsalo cuando necesites ajustar `background-color` con esta utilidad.
`bg-red-600`	`background-color: var(--color-red-600); /* oklch(57.7% 0.245 27.325) */`	Aplica `background-color: var(--color-red-600); /* oklch(57.7% 0.245 27.325) */` al elemento; úsalo cuando necesites ajustar `background-color` con esta utilidad.
`bg-red-700`	`background-color: var(--color-red-700); /* oklch(50.5% 0.213 27.518) */`	Aplica `background-color: var(--color-red-700); /* oklch(50.5% 0.213 27.518) */` al elemento; úsalo cuando necesites ajustar `background-color` con esta utilidad.
`bg-red-800`	`background-color: var(--color-red-800); /* oklch(44.4% 0.177 26.899) */`	Aplica `background-color: var(--color-red-800); /* oklch(44.4% 0.177 26.899) */` al elemento; úsalo cuando necesites ajustar `background-color` con esta utilidad.
`bg-red-900`	`background-color: var(--color-red-900); /* oklch(39.6% 0.141 25.723) */`	Aplica `background-color: var(--color-red-900); /* oklch(39.6% 0.141 25.723) */` al elemento; úsalo cuando necesites ajustar `background-color` con esta utilidad.
`bg-red-950`	`background-color: var(--color-red-950); /* oklch(25.8% 0.092 26.042) */`	Aplica `background-color: var(--color-red-950); /* oklch(25.8% 0.092 26.042) */` al elemento; úsalo cuando necesites ajustar `background-color` con esta utilidad.
`bg-orange-50`	`background-color: var(--color-orange-50); /* oklch(98% 0.016 73.684) */`	Aplica `background-color: var(--color-orange-50); /* oklch(98% 0.016 73.684) */` al elemento; úsalo cuando necesites ajustar `background-color` con esta utilidad.
`bg-orange-100`	`background-color: var(--color-orange-100); /* oklch(95.4% 0.038 75.164) */`	Aplica `background-color: var(--color-orange-100); /* oklch(95.4% 0.038 75.164) */` al elemento; úsalo cuando necesites ajustar `background-color` con esta utilidad.
`bg-orange-200`	`background-color: var(--color-orange-200); /* oklch(90.1% 0.076 70.697) */`	Aplica `background-color: var(--color-orange-200); /* oklch(90.1% 0.076 70.697) */` al elemento; úsalo cuando necesites ajustar `background-color` con esta utilidad.
`bg-orange-300`	`background-color: var(--color-orange-300); /* oklch(83.7% 0.128 66.29) */`	Aplica `background-color: var(--color-orange-300); /* oklch(83.7% 0.128 66.29) */` al elemento; úsalo cuando necesites ajustar `background-color` con esta utilidad.
`bg-orange-400`	`background-color: var(--color-orange-400); /* oklch(75% 0.183 55.934) */`	Aplica `background-color: var(--color-orange-400); /* oklch(75% 0.183 55.934) */` al elemento; úsalo cuando necesites ajustar `background-color` con esta utilidad.
`bg-orange-500`	`background-color: var(--color-orange-500); /* oklch(70.5% 0.213 47.604) */`	Aplica `background-color: var(--color-orange-500); /* oklch(70.5% 0.213 47.604) */` al elemento; úsalo cuando necesites ajustar `background-color` con esta utilidad.
`bg-orange-600`	`background-color: var(--color-orange-600); /* oklch(64.6% 0.222 41.116) */`	Aplica `background-color: var(--color-orange-600); /* oklch(64.6% 0.222 41.116) */` al elemento; úsalo cuando necesites ajustar `background-color` con esta utilidad.
`bg-orange-700`	`background-color: var(--color-orange-700); /* oklch(55.3% 0.195 38.402) */`	Aplica `background-color: var(--color-orange-700); /* oklch(55.3% 0.195 38.402) */` al elemento; úsalo cuando necesites ajustar `background-color` con esta utilidad.
`bg-orange-800`	`background-color: var(--color-orange-800); /* oklch(47% 0.157 37.304) */`	Aplica `background-color: var(--color-orange-800); /* oklch(47% 0.157 37.304) */` al elemento; úsalo cuando necesites ajustar `background-color` con esta utilidad.
`bg-orange-900`	`background-color: var(--color-orange-900); /* oklch(40.8% 0.123 38.172) */`	Aplica `background-color: var(--color-orange-900); /* oklch(40.8% 0.123 38.172) */` al elemento; úsalo cuando necesites ajustar `background-color` con esta utilidad.
`bg-orange-950`	`background-color: var(--color-orange-950); /* oklch(26.6% 0.079 36.259) */`	Aplica `background-color: var(--color-orange-950); /* oklch(26.6% 0.079 36.259) */` al elemento; úsalo cuando necesites ajustar `background-color` con esta utilidad.
`bg-amber-50`	`background-color: var(--color-amber-50); /* oklch(98.7% 0.022 95.277) */`	Aplica `background-color: var(--color-amber-50); /* oklch(98.7% 0.022 95.277) */` al elemento; úsalo cuando necesites ajustar `background-color` con esta utilidad.
`bg-amber-100`	`background-color: var(--color-amber-100); /* oklch(96.2% 0.059 95.617) */`	Aplica `background-color: var(--color-amber-100); /* oklch(96.2% 0.059 95.617) */` al elemento; úsalo cuando necesites ajustar `background-color` con esta utilidad.
`bg-amber-200`	`background-color: var(--color-amber-200); /* oklch(92.4% 0.12 95.746) */`	Aplica `background-color: var(--color-amber-200); /* oklch(92.4% 0.12 95.746) */` al elemento; úsalo cuando necesites ajustar `background-color` con esta utilidad.
`bg-amber-300`	`background-color: var(--color-amber-300); /* oklch(87.9% 0.169 91.605) */`	Aplica `background-color: var(--color-amber-300); /* oklch(87.9% 0.169 91.605) */` al elemento; úsalo cuando necesites ajustar `background-color` con esta utilidad.
`bg-amber-400`	`background-color: var(--color-amber-400); /* oklch(82.8% 0.189 84.429) */`	Aplica `background-color: var(--color-amber-400); /* oklch(82.8% 0.189 84.429) */` al elemento; úsalo cuando necesites ajustar `background-color` con esta utilidad.
`bg-amber-500`	`background-color: var(--color-amber-500); /* oklch(76.9% 0.188 70.08) */`	Aplica `background-color: var(--color-amber-500); /* oklch(76.9% 0.188 70.08) */` al elemento; úsalo cuando necesites ajustar `background-color` con esta utilidad.
`bg-amber-600`	`background-color: var(--color-amber-600); /* oklch(66.6% 0.179 58.318) */`	Aplica `background-color: var(--color-amber-600); /* oklch(66.6% 0.179 58.318) */` al elemento; úsalo cuando necesites ajustar `background-color` con esta utilidad.
`bg-amber-700`	`background-color: var(--color-amber-700); /* oklch(55.5% 0.163 48.998) */`	Aplica `background-color: var(--color-amber-700); /* oklch(55.5% 0.163 48.998) */` al elemento; úsalo cuando necesites ajustar `background-color` con esta utilidad.
`bg-amber-800`	`background-color: var(--color-amber-800); /* oklch(47.3% 0.137 46.201) */`	Aplica `background-color: var(--color-amber-800); /* oklch(47.3% 0.137 46.201) */` al elemento; úsalo cuando necesites ajustar `background-color` con esta utilidad.
`bg-amber-900`	`background-color: var(--color-amber-900); /* oklch(41.4% 0.112 45.904) */`	Aplica `background-color: var(--color-amber-900); /* oklch(41.4% 0.112 45.904) */` al elemento; úsalo cuando necesites ajustar `background-color` con esta utilidad.
`bg-amber-950`	`background-color: var(--color-amber-950); /* oklch(27.9% 0.077 45.635) */`	Aplica `background-color: var(--color-amber-950); /* oklch(27.9% 0.077 45.635) */` al elemento; úsalo cuando necesites ajustar `background-color` con esta utilidad.
`bg-yellow-50`	`background-color: var(--color-yellow-50); /* oklch(98.7% 0.026 102.212) */`	Aplica `background-color: var(--color-yellow-50); /* oklch(98.7% 0.026 102.212) */` al elemento; úsalo cuando necesites ajustar `background-color` con esta utilidad.
`bg-yellow-100`	`background-color: var(--color-yellow-100); /* oklch(97.3% 0.071 103.193) */`	Aplica `background-color: var(--color-yellow-100); /* oklch(97.3% 0.071 103.193) */` al elemento; úsalo cuando necesites ajustar `background-color` con esta utilidad.

Clase de Utilidad	Propiedad CSS	Explicación Breve
`shadow-2xs`	`box-shadow: var(--shadow-2xs); /* 0 1px rgb(0 0 0 / 0.05) */`	Aplica `box-shadow: var(--shadow-2xs); /* 0 1px rgb(0 0 0 / 0.05) */` al elemento; úsalo cuando necesites ajustar `box-shadow` con esta utilidad.
`shadow-xs`	`box-shadow: var(--shadow-xs); /* 0 1px 2px 0 rgb(0 0 0 / 0.05) */`	Aplica `box-shadow: var(--shadow-xs); /* 0 1px 2px 0 rgb(0 0 0 / 0.05) */` al elemento; úsalo cuando necesites ajustar `box-shadow` con esta utilidad.
`shadow-sm`	`box-shadow: var(--shadow-sm); /* 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1) */`	Aplica `box-shadow: var(--shadow-sm); /* 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1) */` al elemento; úsalo cuando necesites ajustar `box-shadow` con esta utilidad.
`shadow-md`	`box-shadow: var(--shadow-md); /* 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) */`	Aplica `box-shadow: var(--shadow-md); /* 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) */` al elemento; úsalo cuando necesites ajustar `box-shadow` con esta utilidad.
`shadow-lg`	`box-shadow: var(--shadow-lg); /* 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) */`	Aplica `box-shadow: var(--shadow-lg); /* 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) */` al elemento; úsalo cuando necesites ajustar `box-shadow` con esta utilidad.
`shadow-xl`	`box-shadow: var(--shadow-xl); /* 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) */`	Aplica `box-shadow: var(--shadow-xl); /* 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) */` al elemento; úsalo cuando necesites ajustar `box-shadow` con esta utilidad.
`shadow-2xl`	`box-shadow: var(--shadow-2xl); /* 0 25px 50px -12px rgb(0 0 0 / 0.25) */`	Aplica `box-shadow: var(--shadow-2xl); /* 0 25px 50px -12px rgb(0 0 0 / 0.25) */` al elemento; úsalo cuando necesites ajustar `box-shadow` con esta utilidad.
`shadow-none`	`box-shadow: 0 0 #0000;`	Aplica `box-shadow: 0 0 #0000;` al elemento; úsalo cuando necesites ajustar `box-shadow` con esta utilidad.
`shadow-( <custom-property> )`	`box-shadow: var( <custom-property> );`	Aplica `box-shadow: var( <custom-property> );` al elemento; úsalo cuando necesites ajustar `box-shadow` con esta utilidad.
`shadow-(color: <custom-property> )`	`--tw-shadow-color: var( <custom-property> );`	Aplica `--tw-shadow-color: var( <custom-property> );` al elemento; úsalo cuando necesites ajustar `box-shadow` con esta utilidad.
`shadow-[ <value> ]`	`box-shadow: <value> ;`	Aplica `box-shadow: <value> ;` al elemento; úsalo cuando necesites ajustar `box-shadow` con esta utilidad.
`shadow-inherit`	`--tw-shadow-color: inherit;`	Aplica `--tw-shadow-color: inherit;` al elemento; úsalo cuando necesites ajustar `box-shadow` con esta utilidad.
`shadow-current`	`--tw-shadow-color: currentColor;`	Aplica `--tw-shadow-color: currentColor;` al elemento; úsalo cuando necesites ajustar `box-shadow` con esta utilidad.
`shadow-transparent`	`--tw-shadow-color: transparent;`	Aplica `--tw-shadow-color: transparent;` al elemento; úsalo cuando necesites ajustar `box-shadow` con esta utilidad.
`shadow-black`	`--tw-shadow-color: var(--color-black); /* #000 */`	Aplica `--tw-shadow-color: var(--color-black); /* #000 */` al elemento; úsalo cuando necesites ajustar `box-shadow` con esta utilidad.
`shadow-white`	`--tw-shadow-color: var(--color-white); /* #fff */`	Aplica `--tw-shadow-color: var(--color-white); /* #fff */` al elemento; úsalo cuando necesites ajustar `box-shadow` con esta utilidad.
`shadow-red-50`	`--tw-shadow-color: var(--color-red-50); /* oklch(97.1% 0.013 17.38) */`	Aplica `--tw-shadow-color: var(--color-red-50); /* oklch(97.1% 0.013 17.38) */` al elemento; úsalo cuando necesites ajustar `box-shadow` con esta utilidad.
`shadow-red-100`	`--tw-shadow-color: var(--color-red-100); /* oklch(93.6% 0.032 17.717) */`	Aplica `--tw-shadow-color: var(--color-red-100); /* oklch(93.6% 0.032 17.717) */` al elemento; úsalo cuando necesites ajustar `box-shadow` con esta utilidad.
`shadow-red-200`	`--tw-shadow-color: var(--color-red-200); /* oklch(88.5% 0.062 18.334) */`	Aplica `--tw-shadow-color: var(--color-red-200); /* oklch(88.5% 0.062 18.334) */` al elemento; úsalo cuando necesites ajustar `box-shadow` con esta utilidad.
`shadow-red-300`	`--tw-shadow-color: var(--color-red-300); /* oklch(80.8% 0.114 19.571) */`	Aplica `--tw-shadow-color: var(--color-red-300); /* oklch(80.8% 0.114 19.571) */` al elemento; úsalo cuando necesites ajustar `box-shadow` con esta utilidad.
`shadow-red-400`	`--tw-shadow-color: var(--color-red-400); /* oklch(70.4% 0.191 22.216) */`	Aplica `--tw-shadow-color: var(--color-red-400); /* oklch(70.4% 0.191 22.216) */` al elemento; úsalo cuando necesites ajustar `box-shadow` con esta utilidad.
`shadow-red-500`	`--tw-shadow-color: var(--color-red-500); /* oklch(63.7% 0.237 25.331) */`	Aplica `--tw-shadow-color: var(--color-red-500); /* oklch(63.7% 0.237 25.331) */` al elemento; úsalo cuando necesites ajustar `box-shadow` con esta utilidad.
`shadow-red-600`	`--tw-shadow-color: var(--color-red-600); /* oklch(57.7% 0.245 27.325) */`	Aplica `--tw-shadow-color: var(--color-red-600); /* oklch(57.7% 0.245 27.325) */` al elemento; úsalo cuando necesites ajustar `box-shadow` con esta utilidad.
`shadow-red-700`	`--tw-shadow-color: var(--color-red-700); /* oklch(50.5% 0.213 27.518) */`	Aplica `--tw-shadow-color: var(--color-red-700); /* oklch(50.5% 0.213 27.518) */` al elemento; úsalo cuando necesites ajustar `box-shadow` con esta utilidad.
`shadow-red-800`	`--tw-shadow-color: var(--color-red-800); /* oklch(44.4% 0.177 26.899) */`	Aplica `--tw-shadow-color: var(--color-red-800); /* oklch(44.4% 0.177 26.899) */` al elemento; úsalo cuando necesites ajustar `box-shadow` con esta utilidad.
`shadow-red-900`	`--tw-shadow-color: var(--color-red-900); /* oklch(39.6% 0.141 25.723) */`	Aplica `--tw-shadow-color: var(--color-red-900); /* oklch(39.6% 0.141 25.723) */` al elemento; úsalo cuando necesites ajustar `box-shadow` con esta utilidad.
`shadow-red-950`	`--tw-shadow-color: var(--color-red-950); /* oklch(25.8% 0.092 26.042) */`	Aplica `--tw-shadow-color: var(--color-red-950); /* oklch(25.8% 0.092 26.042) */` al elemento; úsalo cuando necesites ajustar `box-shadow` con esta utilidad.
`shadow-orange-50`	`--tw-shadow-color: var(--color-orange-50); /* oklch(98% 0.016 73.684) */`	Aplica `--tw-shadow-color: var(--color-orange-50); /* oklch(98% 0.016 73.684) */` al elemento; úsalo cuando necesites ajustar `box-shadow` con esta utilidad.
`shadow-orange-100`	`--tw-shadow-color: var(--color-orange-100); /* oklch(95.4% 0.038 75.164) */`	Aplica `--tw-shadow-color: var(--color-orange-100); /* oklch(95.4% 0.038 75.164) */` al elemento; úsalo cuando necesites ajustar `box-shadow` con esta utilidad.
`shadow-orange-200`	`--tw-shadow-color: var(--color-orange-200); /* oklch(90.1% 0.076 70.697) */`	Aplica `--tw-shadow-color: var(--color-orange-200); /* oklch(90.1% 0.076 70.697) */` al elemento; úsalo cuando necesites ajustar `box-shadow` con esta utilidad.
`shadow-orange-300`	`--tw-shadow-color: var(--color-orange-300); /* oklch(83.7% 0.128 66.29) */`	Aplica `--tw-shadow-color: var(--color-orange-300); /* oklch(83.7% 0.128 66.29) */` al elemento; úsalo cuando necesites ajustar `box-shadow` con esta utilidad.
`shadow-orange-400`	`--tw-shadow-color: var(--color-orange-400); /* oklch(75% 0.183 55.934) */`	Aplica `--tw-shadow-color: var(--color-orange-400); /* oklch(75% 0.183 55.934) */` al elemento; úsalo cuando necesites ajustar `box-shadow` con esta utilidad.
`shadow-orange-500`	`--tw-shadow-color: var(--color-orange-500); /* oklch(70.5% 0.213 47.604) */`	Aplica `--tw-shadow-color: var(--color-orange-500); /* oklch(70.5% 0.213 47.604) */` al elemento; úsalo cuando necesites ajustar `box-shadow` con esta utilidad.
`shadow-orange-600`	`--tw-shadow-color: var(--color-orange-600); /* oklch(64.6% 0.222 41.116) */`	Aplica `--tw-shadow-color: var(--color-orange-600); /* oklch(64.6% 0.222 41.116) */` al elemento; úsalo cuando necesites ajustar `box-shadow` con esta utilidad.
`shadow-orange-700`	`--tw-shadow-color: var(--color-orange-700); /* oklch(55.3% 0.195 38.402) */`	Aplica `--tw-shadow-color: var(--color-orange-700); /* oklch(55.3% 0.195 38.402) */` al elemento; úsalo cuando necesites ajustar `box-shadow` con esta utilidad.
`shadow-orange-800`	`--tw-shadow-color: var(--color-orange-800); /* oklch(47% 0.157 37.304) */`	Aplica `--tw-shadow-color: var(--color-orange-800); /* oklch(47% 0.157 37.304) */` al elemento; úsalo cuando necesites ajustar `box-shadow` con esta utilidad.
`shadow-orange-900`	`--tw-shadow-color: var(--color-orange-900); /* oklch(40.8% 0.123 38.172) */`	Aplica `--tw-shadow-color: var(--color-orange-900); /* oklch(40.8% 0.123 38.172) */` al elemento; úsalo cuando necesites ajustar `box-shadow` con esta utilidad.
`shadow-orange-950`	`--tw-shadow-color: var(--color-orange-950); /* oklch(26.6% 0.079 36.259) */`	Aplica `--tw-shadow-color: var(--color-orange-950); /* oklch(26.6% 0.079 36.259) */` al elemento; úsalo cuando necesites ajustar `box-shadow` con esta utilidad.
`shadow-amber-50`	`--tw-shadow-color: var(--color-amber-50); /* oklch(98.7% 0.022 95.277) */`	Aplica `--tw-shadow-color: var(--color-amber-50); /* oklch(98.7% 0.022 95.277) */` al elemento; úsalo cuando necesites ajustar `box-shadow` con esta utilidad.
`shadow-amber-100`	`--tw-shadow-color: var(--color-amber-100); /* oklch(96.2% 0.059 95.617) */`	Aplica `--tw-shadow-color: var(--color-amber-100); /* oklch(96.2% 0.059 95.617) */` al elemento; úsalo cuando necesites ajustar `box-shadow` con esta utilidad.

Clase de Utilidad	Propiedad CSS	Explicación Breve
`text-shadow-2xs`	`text-shadow: var(--text-shadow-2xs); /* 0px 1px 0px rgb(0 0 0 / 0.15) */`	Aplica `text-shadow: var(--text-shadow-2xs); /* 0px 1px 0px rgb(0 0 0 / 0.15) */` al elemento; úsalo cuando necesites ajustar `text-shadow` con esta utilidad.
`text-shadow-xs`	`text-shadow: var(--text-shadow-xs); /* 0px 1px 1px rgb(0 0 0 / 0.2) */`	Aplica `text-shadow: var(--text-shadow-xs); /* 0px 1px 1px rgb(0 0 0 / 0.2) */` al elemento; úsalo cuando necesites ajustar `text-shadow` con esta utilidad.
`text-shadow-sm`	`text-shadow: var(--text-shadow-sm); /* 0px 1px 0px rgb(0 0 0 / 0.075), 0px 1px 1px rgb(0 0 0 / 0.075), 0px 2px 2px rgb(0 0 0 / 0.075) */`	Aplica `text-shadow: var(--text-shadow-sm); /* 0px 1px 0px rgb(0 0 0 / 0.075), 0px 1px 1px rgb(0 0 0 / 0.075), 0px 2px 2px rgb(0 0 0 / 0.075) */` al elemento; úsalo cuando necesites ajustar `text-shadow` con esta utilidad.
`text-shadow-md`	`text-shadow: var(--text-shadow-md); /* 0px 1px 1px rgb(0 0 0 / 0.1), 0px 1px 2px rgb(0 0 0 / 0.1), 0px 2px 4px rgb(0 0 0 / 0.1) */`	Aplica `text-shadow: var(--text-shadow-md); /* 0px 1px 1px rgb(0 0 0 / 0.1), 0px 1px 2px rgb(0 0 0 / 0.1), 0px 2px 4px rgb(0 0 0 / 0.1) */` al elemento; úsalo cuando necesites ajustar `text-shadow` con esta utilidad.
`text-shadow-lg`	`text-shadow: var(--text-shadow-lg); /* 0px 1px 2px rgb(0 0 0 / 0.1), 0px 3px 2px rgb(0 0 0 / 0.1), 0px 4px 8px rgb(0 0 0 / 0.1) */`	Aplica `text-shadow: var(--text-shadow-lg); /* 0px 1px 2px rgb(0 0 0 / 0.1), 0px 3px 2px rgb(0 0 0 / 0.1), 0px 4px 8px rgb(0 0 0 / 0.1) */` al elemento; úsalo cuando necesites ajustar `text-shadow` con esta utilidad.
`text-shadow-none`	`text-shadow: none;`	Aplica `text-shadow: none;` al elemento; úsalo cuando necesites ajustar `text-shadow` con esta utilidad.
`text-shadow-( <custom-property> )`	`text-shadow: var( <custom-property> );`	Aplica `text-shadow: var( <custom-property> );` al elemento; úsalo cuando necesites ajustar `text-shadow` con esta utilidad.
`text-shadow-(color: <custom-property> )`	`--tw-shadow-color var( <custom-property> );`	Aplica `--tw-shadow-color var( <custom-property> );` al elemento; úsalo cuando necesites ajustar `text-shadow` con esta utilidad.
`text-shadow-[ <value> ]`	`text-shadow: <value> ;`	Aplica `text-shadow: <value> ;` al elemento; úsalo cuando necesites ajustar `text-shadow` con esta utilidad.
`text-shadow-inherit`	`--tw-shadow-color inherit;`	Aplica `--tw-shadow-color inherit;` al elemento; úsalo cuando necesites ajustar `text-shadow` con esta utilidad.
`text-shadow-current`	`--tw-shadow-color currentColor;`	Aplica `--tw-shadow-color currentColor;` al elemento; úsalo cuando necesites ajustar `text-shadow` con esta utilidad.
`text-shadow-transparent`	`--tw-shadow-color transparent;`	Aplica `--tw-shadow-color transparent;` al elemento; úsalo cuando necesites ajustar `text-shadow` con esta utilidad.
`text-shadow-black`	`--tw-text-shadow-color var(--color-black); /* #000 */`	Aplica `--tw-text-shadow-color var(--color-black); /* #000 */` al elemento; úsalo cuando necesites ajustar `text-shadow` con esta utilidad.
`text-shadow-white`	`--tw-text-shadow-color var(--color-white); /* #fff */`	Aplica `--tw-text-shadow-color var(--color-white); /* #fff */` al elemento; úsalo cuando necesites ajustar `text-shadow` con esta utilidad.
`text-shadow-red-50`	`--tw-text-shadow-color var(--color-red-50); /* oklch(97.1% 0.013 17.38) */`	Aplica `--tw-text-shadow-color var(--color-red-50); /* oklch(97.1% 0.013 17.38) */` al elemento; úsalo cuando necesites ajustar `text-shadow` con esta utilidad.
`text-shadow-red-100`	`--tw-text-shadow-color var(--color-red-100); /* oklch(93.6% 0.032 17.717) */`	Aplica `--tw-text-shadow-color var(--color-red-100); /* oklch(93.6% 0.032 17.717) */` al elemento; úsalo cuando necesites ajustar `text-shadow` con esta utilidad.
`text-shadow-red-200`	`--tw-text-shadow-color var(--color-red-200); /* oklch(88.5% 0.062 18.334) */`	Aplica `--tw-text-shadow-color var(--color-red-200); /* oklch(88.5% 0.062 18.334) */` al elemento; úsalo cuando necesites ajustar `text-shadow` con esta utilidad.
`text-shadow-red-300`	`--tw-text-shadow-color var(--color-red-300); /* oklch(80.8% 0.114 19.571) */`	Aplica `--tw-text-shadow-color var(--color-red-300); /* oklch(80.8% 0.114 19.571) */` al elemento; úsalo cuando necesites ajustar `text-shadow` con esta utilidad.
`text-shadow-red-400`	`--tw-text-shadow-color var(--color-red-400); /* oklch(70.4% 0.191 22.216) */`	Aplica `--tw-text-shadow-color var(--color-red-400); /* oklch(70.4% 0.191 22.216) */` al elemento; úsalo cuando necesites ajustar `text-shadow` con esta utilidad.
`text-shadow-red-500`	`--tw-text-shadow-color var(--color-red-500); /* oklch(63.7% 0.237 25.331) */`	Aplica `--tw-text-shadow-color var(--color-red-500); /* oklch(63.7% 0.237 25.331) */` al elemento; úsalo cuando necesites ajustar `text-shadow` con esta utilidad.
`text-shadow-red-600`	`--tw-text-shadow-color var(--color-red-600); /* oklch(57.7% 0.245 27.325) */`	Aplica `--tw-text-shadow-color var(--color-red-600); /* oklch(57.7% 0.245 27.325) */` al elemento; úsalo cuando necesites ajustar `text-shadow` con esta utilidad.
`text-shadow-red-700`	`--tw-text-shadow-color var(--color-red-700); /* oklch(50.5% 0.213 27.518) */`	Aplica `--tw-text-shadow-color var(--color-red-700); /* oklch(50.5% 0.213 27.518) */` al elemento; úsalo cuando necesites ajustar `text-shadow` con esta utilidad.
`text-shadow-red-800`	`--tw-text-shadow-color var(--color-red-800); /* oklch(44.4% 0.177 26.899) */`	Aplica `--tw-text-shadow-color var(--color-red-800); /* oklch(44.4% 0.177 26.899) */` al elemento; úsalo cuando necesites ajustar `text-shadow` con esta utilidad.
`text-shadow-red-900`	`--tw-text-shadow-color var(--color-red-900); /* oklch(39.6% 0.141 25.723) */`	Aplica `--tw-text-shadow-color var(--color-red-900); /* oklch(39.6% 0.141 25.723) */` al elemento; úsalo cuando necesites ajustar `text-shadow` con esta utilidad.
`text-shadow-red-950`	`--tw-text-shadow-color var(--color-red-950); /* oklch(25.8% 0.092 26.042) */`	Aplica `--tw-text-shadow-color var(--color-red-950); /* oklch(25.8% 0.092 26.042) */` al elemento; úsalo cuando necesites ajustar `text-shadow` con esta utilidad.
`text-shadow-orange-50`	`--tw-text-shadow-color var(--color-orange-50); /* oklch(98% 0.016 73.684) */`	Aplica `--tw-text-shadow-color var(--color-orange-50); /* oklch(98% 0.016 73.684) */` al elemento; úsalo cuando necesites ajustar `text-shadow` con esta utilidad.
`text-shadow-orange-100`	`--tw-text-shadow-color var(--color-orange-100); /* oklch(95.4% 0.038 75.164) */`	Aplica `--tw-text-shadow-color var(--color-orange-100); /* oklch(95.4% 0.038 75.164) */` al elemento; úsalo cuando necesites ajustar `text-shadow` con esta utilidad.
`text-shadow-orange-200`	`--tw-text-shadow-color var(--color-orange-200); /* oklch(90.1% 0.076 70.697) */`	Aplica `--tw-text-shadow-color var(--color-orange-200); /* oklch(90.1% 0.076 70.697) */` al elemento; úsalo cuando necesites ajustar `text-shadow` con esta utilidad.
`text-shadow-orange-300`	`--tw-text-shadow-color var(--color-orange-300); /* oklch(83.7% 0.128 66.29) */`	Aplica `--tw-text-shadow-color var(--color-orange-300); /* oklch(83.7% 0.128 66.29) */` al elemento; úsalo cuando necesites ajustar `text-shadow` con esta utilidad.
`text-shadow-orange-400`	`--tw-text-shadow-color var(--color-orange-400); /* oklch(75% 0.183 55.934) */`	Aplica `--tw-text-shadow-color var(--color-orange-400); /* oklch(75% 0.183 55.934) */` al elemento; úsalo cuando necesites ajustar `text-shadow` con esta utilidad.
`text-shadow-orange-500`	`--tw-text-shadow-color var(--color-orange-500); /* oklch(70.5% 0.213 47.604) */`	Aplica `--tw-text-shadow-color var(--color-orange-500); /* oklch(70.5% 0.213 47.604) */` al elemento; úsalo cuando necesites ajustar `text-shadow` con esta utilidad.
`text-shadow-orange-600`	`--tw-text-shadow-color var(--color-orange-600); /* oklch(64.6% 0.222 41.116) */`	Aplica `--tw-text-shadow-color var(--color-orange-600); /* oklch(64.6% 0.222 41.116) */` al elemento; úsalo cuando necesites ajustar `text-shadow` con esta utilidad.
`text-shadow-orange-700`	`--tw-text-shadow-color var(--color-orange-700); /* oklch(55.3% 0.195 38.402) */`	Aplica `--tw-text-shadow-color var(--color-orange-700); /* oklch(55.3% 0.195 38.402) */` al elemento; úsalo cuando necesites ajustar `text-shadow` con esta utilidad.
`text-shadow-orange-800`	`--tw-text-shadow-color var(--color-orange-800); /* oklch(47% 0.157 37.304) */`	Aplica `--tw-text-shadow-color var(--color-orange-800); /* oklch(47% 0.157 37.304) */` al elemento; úsalo cuando necesites ajustar `text-shadow` con esta utilidad.
`text-shadow-orange-900`	`--tw-text-shadow-color var(--color-orange-900); /* oklch(40.8% 0.123 38.172) */`	Aplica `--tw-text-shadow-color var(--color-orange-900); /* oklch(40.8% 0.123 38.172) */` al elemento; úsalo cuando necesites ajustar `text-shadow` con esta utilidad.
`text-shadow-orange-950`	`--tw-text-shadow-color var(--color-orange-950); /* oklch(26.6% 0.079 36.259) */`	Aplica `--tw-text-shadow-color var(--color-orange-950); /* oklch(26.6% 0.079 36.259) */` al elemento; úsalo cuando necesites ajustar `text-shadow` con esta utilidad.
`text-shadow-amber-50`	`--tw-text-shadow-color var(--color-amber-50); /* oklch(98.7% 0.022 95.277) */`	Aplica `--tw-text-shadow-color var(--color-amber-50); /* oklch(98.7% 0.022 95.277) */` al elemento; úsalo cuando necesites ajustar `text-shadow` con esta utilidad.
`text-shadow-amber-100`	`--tw-text-shadow-color var(--color-amber-100); /* oklch(96.2% 0.059 95.617) */`	Aplica `--tw-text-shadow-color var(--color-amber-100); /* oklch(96.2% 0.059 95.617) */` al elemento; úsalo cuando necesites ajustar `text-shadow` con esta utilidad.
`text-shadow-amber-200`	`--tw-text-shadow-color var(--color-amber-200); /* oklch(92.4% 0.12 95.746) */`	Aplica `--tw-text-shadow-color var(--color-amber-200); /* oklch(92.4% 0.12 95.746) */` al elemento; úsalo cuando necesites ajustar `text-shadow` con esta utilidad.
`text-shadow-amber-300`	`--tw-text-shadow-color var(--color-amber-300); /* oklch(87.9% 0.169 91.605) */`	Aplica `--tw-text-shadow-color var(--color-amber-300); /* oklch(87.9% 0.169 91.605) */` al elemento; úsalo cuando necesites ajustar `text-shadow` con esta utilidad.