Notebook 4 - Tipografía — Cheatsheets Tailwind

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

familia de fuentes

Fuente oficial: https://tailwindcss.com/docs/font-family

Utilidades para controlar la familia tipográfica de un elemento.

Clase de Utilidad	Propiedad CSS	Explicación Breve
`font-sans`	`font-family: var(--font-sans); /* ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' */`	Aplica `font-family: var(--font-sans); /* ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' */` al elemento; úsalo cuando necesites ajustar `font-family` con esta utilidad.
`font-serif`	`font-family: var(--font-serif); /* ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif */`	Aplica `font-family: var(--font-serif); /* ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif */` al elemento; úsalo cuando necesites ajustar `font-family` con esta utilidad.
`font-mono`	`font-family: var(--font-mono); /* ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace */`	Aplica `font-family: var(--font-mono); /* ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace */` al elemento; úsalo cuando necesites ajustar `font-family` con esta utilidad.
`font-(family-name: <custom-property> )`	`font-family: var( <custom-property> );`	Aplica `font-family: var( <custom-property> );` al elemento; úsalo cuando necesites ajustar `font-family` con esta utilidad.
`font-[ <value> ]`	`font-family: <value> ;`	Aplica `font-family: <value> ;` al elemento; úsalo cuando necesites ajustar `font-family` con esta utilidad.

tamaño de fuente

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

Utilidades para controlar el tamaño de fuente de un elemento.

suavizado de fuentes

Fuente oficial: https://tailwindcss.com/docs/font-smoothing

Utilidades para controlar el suavizado de fuentes de un elemento.

Clase de Utilidad	Propiedad CSS	Explicación Breve
`antialiased`	`-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;`	Aplica `-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;` al elemento; úsalo cuando necesites ajustar `font-smoothing` con esta utilidad.
`subpixel-antialiased`	`-webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto;`	Aplica `-webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto;` al elemento; úsalo cuando necesites ajustar `font-smoothing` con esta utilidad.

estilo de fuente

Fuente oficial: https://tailwindcss.com/docs/font-style

Utilidades para controlar el estilo del texto.

Clase de Utilidad	Propiedad CSS	Explicación Breve
`italic`	`font-style: italic;`	Aplica `font-style: italic;` al elemento; úsalo cuando necesites ajustar `font-style` con esta utilidad.
`not-italic`	`font-style: normal;`	Aplica `font-style: normal;` al elemento; úsalo cuando necesites ajustar `font-style` con esta utilidad.

peso de fuente

Fuente oficial: https://tailwindcss.com/docs/font-weight

Utilidades para controlar el peso de fuente de un elemento.

Clase de Utilidad	Propiedad CSS	Explicación Breve
`font-thin`	`font-weight: 100;`	Aplica `font-weight: 100;` al elemento; úsalo cuando necesites ajustar `font-weight` con esta utilidad.
`font-extralight`	`font-weight: 200;`	Aplica `font-weight: 200;` al elemento; úsalo cuando necesites ajustar `font-weight` con esta utilidad.
`font-light`	`font-weight: 300;`	Aplica `font-weight: 300;` al elemento; úsalo cuando necesites ajustar `font-weight` con esta utilidad.
`font-normal`	`font-weight: 400;`	Aplica `font-weight: 400;` al elemento; úsalo cuando necesites ajustar `font-weight` con esta utilidad.
`font-medium`	`font-weight: 500;`	Aplica `font-weight: 500;` al elemento; úsalo cuando necesites ajustar `font-weight` con esta utilidad.
`font-semibold`	`font-weight: 600;`	Aplica `font-weight: 600;` al elemento; úsalo cuando necesites ajustar `font-weight` con esta utilidad.
`font-bold`	`font-weight: 700;`	Aplica `font-weight: 700;` al elemento; úsalo cuando necesites ajustar `font-weight` con esta utilidad.
`font-extrabold`	`font-weight: 800;`	Aplica `font-weight: 800;` al elemento; úsalo cuando necesites ajustar `font-weight` con esta utilidad.
`font-black`	`font-weight: 900;`	Aplica `font-weight: 900;` al elemento; úsalo cuando necesites ajustar `font-weight` con esta utilidad.
`font-( <custom-property> )`	`font-weight: var( <custom-property> );`	Aplica `font-weight: var( <custom-property> );` al elemento; úsalo cuando necesites ajustar `font-weight` con esta utilidad.
`font-[ <value> ]`	`font-weight: <value> ;`	Aplica `font-weight: <value> ;` al elemento; úsalo cuando necesites ajustar `font-weight` con esta utilidad.

estiramiento de fuente

Fuente oficial: https://tailwindcss.com/docs/font-stretch

Utilidades para seleccionar el ancho de una fuente.

Clase de Utilidad	Propiedad CSS	Explicación Breve
`font-stretch-ultra-condensed`	`font-stretch: ultra-condensed; /* 50% */`	Aplica `font-stretch: ultra-condensed; /* 50% */` al elemento; úsalo cuando necesites ajustar `font-stretch` con esta utilidad.
`font-stretch-extra-condensed`	`font-stretch: extra-condensed; /* 62.5% */`	Aplica `font-stretch: extra-condensed; /* 62.5% */` al elemento; úsalo cuando necesites ajustar `font-stretch` con esta utilidad.
`font-stretch-condensed`	`font-stretch: condensed; /* 75% */`	Aplica `font-stretch: condensed; /* 75% */` al elemento; úsalo cuando necesites ajustar `font-stretch` con esta utilidad.
`font-stretch-semi-condensed`	`font-stretch: semi-condensed; /* 87.5% */`	Aplica `font-stretch: semi-condensed; /* 87.5% */` al elemento; úsalo cuando necesites ajustar `font-stretch` con esta utilidad.
`font-stretch-normal`	`font-stretch: normal; /* 100% */`	Aplica `font-stretch: normal; /* 100% */` al elemento; úsalo cuando necesites ajustar `font-stretch` con esta utilidad.
`font-stretch-semi-expanded`	`font-stretch: semi-expanded; /* 112.5% */`	Aplica `font-stretch: semi-expanded; /* 112.5% */` al elemento; úsalo cuando necesites ajustar `font-stretch` con esta utilidad.
`font-stretch-expanded`	`font-stretch: expanded; /* 125% */`	Aplica `font-stretch: expanded; /* 125% */` al elemento; úsalo cuando necesites ajustar `font-stretch` con esta utilidad.
`font-stretch-extra-expanded`	`font-stretch: extra-expanded; /* 150% */`	Aplica `font-stretch: extra-expanded; /* 150% */` al elemento; úsalo cuando necesites ajustar `font-stretch` con esta utilidad.
`font-stretch-ultra-expanded`	`font-stretch: ultra-expanded; /* 200% */`	Aplica `font-stretch: ultra-expanded; /* 200% */` al elemento; úsalo cuando necesites ajustar `font-stretch` con esta utilidad.
`font-stretch- <percentage>`	`font-stretch: <percentage> ;`	Aplica `font-stretch: <percentage> ;` al elemento; úsalo cuando necesites ajustar `font-stretch` con esta utilidad.
`font-stretch-( <custom-property> )`	`font-stretch: var( <custom-property> );`	Aplica `font-stretch: var( <custom-property> );` al elemento; úsalo cuando necesites ajustar `font-stretch` con esta utilidad.
`font-stretch-[ <value> ]`	`font-stretch: <value> ;`	Aplica `font-stretch: <value> ;` al elemento; úsalo cuando necesites ajustar `font-stretch` con esta utilidad.

variante-de-fuente-numérica

Fuente oficial: https://tailwindcss.com/docs/font-variant-numeric

Utilidades para controlar la variante de números.

Clase de Utilidad	Propiedad CSS	Explicación Breve
`normal-nums`	`font-variant-numeric: normal;`	Aplica `font-variant-numeric: normal;` al elemento; úsalo cuando necesites ajustar `font-variant-numeric` con esta utilidad.
`ordinal`	`font-variant-numeric: ordinal;`	Aplica `font-variant-numeric: ordinal;` al elemento; úsalo cuando necesites ajustar `font-variant-numeric` con esta utilidad.
`slashed-zero`	`font-variant-numeric: slashed-zero;`	Aplica `font-variant-numeric: slashed-zero;` al elemento; úsalo cuando necesites ajustar `font-variant-numeric` con esta utilidad.
`lining-nums`	`font-variant-numeric: lining-nums;`	Aplica `font-variant-numeric: lining-nums;` al elemento; úsalo cuando necesites ajustar `font-variant-numeric` con esta utilidad.
`oldstyle-nums`	`font-variant-numeric: oldstyle-nums;`	Aplica `font-variant-numeric: oldstyle-nums;` al elemento; úsalo cuando necesites ajustar `font-variant-numeric` con esta utilidad.
`proportional-nums`	`font-variant-numeric: proportional-nums;`	Aplica `font-variant-numeric: proportional-nums;` al elemento; úsalo cuando necesites ajustar `font-variant-numeric` con esta utilidad.
`tabular-nums`	`font-variant-numeric: tabular-nums;`	Aplica `font-variant-numeric: tabular-nums;` al elemento; úsalo cuando necesites ajustar `font-variant-numeric` con esta utilidad.
`diagonal-fractions`	`font-variant-numeric: diagonal-fractions;`	Aplica `font-variant-numeric: diagonal-fractions;` al elemento; úsalo cuando necesites ajustar `font-variant-numeric` con esta utilidad.
`stacked-fractions`	`font-variant-numeric: stacked-fractions;`	Aplica `font-variant-numeric: stacked-fractions;` al elemento; úsalo cuando necesites ajustar `font-variant-numeric` con esta utilidad.

configuración-de-funciones-de-fuente

Fuente oficial: https://tailwindcss.com/docs/font-feature-settings

Utilidades para controlar funciones tipográficas avanzadas.

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

espaciado entre letras

Fuente oficial: https://tailwindcss.com/docs/letter-spacing

Utilidades para controlar el seguimiento o espaciado entre letras de un elemento.

Clase de Utilidad	Propiedad CSS	Explicación Breve
`tracking-tighter`	`letter-spacing: var(--tracking-tighter); /* -0.05em */`	Aplica `letter-spacing: var(--tracking-tighter); /* -0.05em */` al elemento; úsalo cuando necesites ajustar `letter-spacing` con esta utilidad.
`tracking-tight`	`letter-spacing: var(--tracking-tight); /* -0.025em */`	Aplica `letter-spacing: var(--tracking-tight); /* -0.025em */` al elemento; úsalo cuando necesites ajustar `letter-spacing` con esta utilidad.
`tracking-normal`	`letter-spacing: var(--tracking-normal); /* 0em */`	Aplica `letter-spacing: var(--tracking-normal); /* 0em */` al elemento; úsalo cuando necesites ajustar `letter-spacing` con esta utilidad.
`tracking-wide`	`letter-spacing: var(--tracking-wide); /* 0.025em */`	Aplica `letter-spacing: var(--tracking-wide); /* 0.025em */` al elemento; úsalo cuando necesites ajustar `letter-spacing` con esta utilidad.
`tracking-wider`	`letter-spacing: var(--tracking-wider); /* 0.05em */`	Aplica `letter-spacing: var(--tracking-wider); /* 0.05em */` al elemento; úsalo cuando necesites ajustar `letter-spacing` con esta utilidad.
`tracking-widest`	`letter-spacing: var(--tracking-widest); /* 0.1em */`	Aplica `letter-spacing: var(--tracking-widest); /* 0.1em */` al elemento; úsalo cuando necesites ajustar `letter-spacing` con esta utilidad.
`tracking-( <custom-property> )`	`letter-spacing: var( <custom-property> );`	Aplica `letter-spacing: var( <custom-property> );` al elemento; úsalo cuando necesites ajustar `letter-spacing` con esta utilidad.
`tracking-[ <value> ]`	`letter-spacing: <value> ;`	Aplica `letter-spacing: <value> ;` al elemento; úsalo cuando necesites ajustar `letter-spacing` con esta utilidad.

abrazadera de línea

Fuente oficial: https://tailwindcss.com/docs/line-clamp

Utilidades para sujetar texto a un número específico de líneas.

Clase de Utilidad	Propiedad CSS	Explicación Breve
`line-clamp- <number>`	`overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: <number> ;`	Aplica `overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: <number> ;` al elemento; úsalo cuando necesites ajustar `line-clamp` con esta utilidad.
`line-clamp-none`	`overflow: visible; display: block; -webkit-box-orient: horizontal; -webkit-line-clamp: unset;`	Aplica `overflow: visible; display: block; -webkit-box-orient: horizontal; -webkit-line-clamp: unset;` al elemento; úsalo cuando necesites ajustar `line-clamp` con esta utilidad.
`line-clamp-( <custom-property> )`	`overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var( <custom-property> );`	Aplica `overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var( <custom-property> );` al elemento; úsalo cuando necesites ajustar `line-clamp` con esta utilidad.
`line-clamp-[ <value> ]`	`overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: <value> ;`	Aplica `overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: <value> ;` al elemento; úsalo cuando necesites ajustar `line-clamp` con esta utilidad.

altura de línea

Fuente oficial: https://tailwindcss.com/docs/line-height

Utilidades para controlar el interlineado o altura de línea de un elemento.

Clase de Utilidad	Propiedad CSS	Explicación Breve
`text- <size> / <number>`	`font-size: <size> ; line-height: calc(var(--spacing) * <number> );`	Aplica `font-size: <size> ; line-height: calc(var(--spacing) * <number> );` al elemento; úsalo cuando necesites ajustar `line-height` con esta utilidad.
`text- <size> /( <custom-property> )`	`font-size: <size> ; line-height: var( <custom-property> );`	Aplica `font-size: <size> ; line-height: var( <custom-property> );` al elemento; úsalo cuando necesites ajustar `line-height` con esta utilidad.
`text- <size> /[ <value> ]`	`font-size: <size> ; line-height: <value> ;`	Aplica `font-size: <size> ; line-height: <value> ;` al elemento; úsalo cuando necesites ajustar `line-height` con esta utilidad.
`leading-none`	`line-height: 1;`	Aplica `line-height: 1;` al elemento; úsalo cuando necesites ajustar `line-height` con esta utilidad.
`leading- <number>`	`line-height: calc(var(--spacing) * <number> );`	Aplica `line-height: calc(var(--spacing) * <number> );` al elemento; úsalo cuando necesites ajustar `line-height` con esta utilidad.
`leading-( <custom-property> )`	`line-height: var( <custom-property> );`	Aplica `line-height: var( <custom-property> );` al elemento; úsalo cuando necesites ajustar `line-height` con esta utilidad.
`leading-[ <value> ]`	`line-height: <value> ;`	Aplica `line-height: <value> ;` al elemento; úsalo cuando necesites ajustar `line-height` con esta utilidad.

imagen-estilo-lista

Fuente oficial: https://tailwindcss.com/docs/list-style-image

Utilidades para controlar las imágenes de marcadores de elementos de la lista.

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

posición-estilo-lista

Fuente oficial: https://tailwindcss.com/docs/list-style-position

Utilidades para controlar la posición de viñetas y números en listas.

Clase de Utilidad	Propiedad CSS	Explicación Breve
`list-inside`	`list-style-position: inside;`	Aplica `list-style-position: inside;` al elemento; úsalo cuando necesites ajustar `list-style-position` con esta utilidad.
`list-outside`	`list-style-position: outside;`	Aplica `list-style-position: outside;` al elemento; úsalo cuando necesites ajustar `list-style-position` con esta utilidad.

tipo de estilo de lista

Fuente oficial: https://tailwindcss.com/docs/list-style-type

Utilidades para controlar el estilo de marcador de una lista.

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

alineación de texto

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

Utilidades para controlar la alineación del texto.

Clase de Utilidad	Propiedad CSS	Explicación Breve
`text-left`	`text-align: left;`	Aplica `text-align: left;` al elemento; úsalo cuando necesites ajustar `text-align` con esta utilidad.
`text-center`	`text-align: center;`	Aplica `text-align: center;` al elemento; úsalo cuando necesites ajustar `text-align` con esta utilidad.
`text-right`	`text-align: right;`	Aplica `text-align: right;` al elemento; úsalo cuando necesites ajustar `text-align` con esta utilidad.
`text-justify`	`text-align: justify;`	Aplica `text-align: justify;` al elemento; úsalo cuando necesites ajustar `text-align` con esta utilidad.
`text-start`	`text-align: start;`	Aplica `text-align: start;` al elemento; úsalo cuando necesites ajustar `text-align` con esta utilidad.
`text-end`	`text-align: end;`	Aplica `text-align: end;` al elemento; úsalo cuando necesites ajustar `text-align` con esta utilidad.

color

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

Utilidades para controlar el color del texto de un elemento.

línea-de-decoración-de-texto

Fuente oficial: https://tailwindcss.com/docs/text-decoration-line

Utilidades para controlar la decoración del texto.

Clase de Utilidad	Propiedad CSS	Explicación Breve
`underline`	`text-decoration-line: underline;`	Aplica `text-decoration-line: underline;` al elemento; úsalo cuando necesites ajustar `text-decoration-line` con esta utilidad.
`overline`	`text-decoration-line: overline;`	Aplica `text-decoration-line: overline;` al elemento; úsalo cuando necesites ajustar `text-decoration-line` con esta utilidad.
`line-through`	`text-decoration-line: line-through;`	Aplica `text-decoration-line: line-through;` al elemento; úsalo cuando necesites ajustar `text-decoration-line` con esta utilidad.
`no-underline`	`text-decoration-line: none;`	Aplica `text-decoration-line: none;` al elemento; úsalo cuando necesites ajustar `text-decoration-line` con esta utilidad.

texto-decoración-color

Fuente oficial: https://tailwindcss.com/docs/text-decoration-color

Utilidades para controlar el color de las decoraciones de texto.

estilo-de-decoración-de-texto

Fuente oficial: https://tailwindcss.com/docs/text-decoration-style

Utilidades para controlar el estilo de las decoraciones de texto.

Clase de Utilidad	Propiedad CSS	Explicación Breve
`decoration-solid`	`text-decoration-style: solid;`	Aplica `text-decoration-style: solid;` al elemento; úsalo cuando necesites ajustar `text-decoration-style` con esta utilidad.
`decoration-double`	`text-decoration-style: double;`	Aplica `text-decoration-style: double;` al elemento; úsalo cuando necesites ajustar `text-decoration-style` con esta utilidad.
`decoration-dotted`	`text-decoration-style: dotted;`	Aplica `text-decoration-style: dotted;` al elemento; úsalo cuando necesites ajustar `text-decoration-style` con esta utilidad.
`decoration-dashed`	`text-decoration-style: dashed;`	Aplica `text-decoration-style: dashed;` al elemento; úsalo cuando necesites ajustar `text-decoration-style` con esta utilidad.
`decoration-wavy`	`text-decoration-style: wavy;`	Aplica `text-decoration-style: wavy;` al elemento; úsalo cuando necesites ajustar `text-decoration-style` con esta utilidad.

texto-decoración-grosor

Fuente oficial: https://tailwindcss.com/docs/text-decoration-thickness

Utilidades para controlar el grosor de las decoraciones de texto.

Clase de Utilidad	Propiedad CSS	Explicación Breve
`decoration- <number>`	`text-decoration-thickness: <number> px;`	Aplica `text-decoration-thickness: <number> px;` al elemento; úsalo cuando necesites ajustar `text-decoration-thickness` con esta utilidad.
`decoration-from-font`	`text-decoration-thickness: from-font;`	Aplica `text-decoration-thickness: from-font;` al elemento; úsalo cuando necesites ajustar `text-decoration-thickness` con esta utilidad.
`decoration-auto`	`text-decoration-thickness: auto;`	Aplica `text-decoration-thickness: auto;` al elemento; úsalo cuando necesites ajustar `text-decoration-thickness` con esta utilidad.
`decoration-(length: <custom-property> )`	`text-decoration-thickness: var( <custom-property> );`	Aplica `text-decoration-thickness: var( <custom-property> );` al elemento; úsalo cuando necesites ajustar `text-decoration-thickness` con esta utilidad.
`decoration-[ <value> ]`	`text-decoration-thickness: <value> ;`	Aplica `text-decoration-thickness: <value> ;` al elemento; úsalo cuando necesites ajustar `text-decoration-thickness` con esta utilidad.

desplazamiento de subrayado de texto

Fuente oficial: https://tailwindcss.com/docs/text-underline-offset

Utilidades para controlar el desplazamiento de un subrayado de texto.

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

transformación de texto

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

Utilidades para controlar el uso de mayúsculas en el texto.

Clase de Utilidad	Propiedad CSS	Explicación Breve
`uppercase`	`text-transform: uppercase;`	Aplica `text-transform: uppercase;` al elemento; úsalo cuando necesites ajustar `text-transform` con esta utilidad.
`lowercase`	`text-transform: lowercase;`	Aplica `text-transform: lowercase;` al elemento; úsalo cuando necesites ajustar `text-transform` con esta utilidad.
`capitalize`	`text-transform: capitalize;`	Aplica `text-transform: capitalize;` al elemento; úsalo cuando necesites ajustar `text-transform` con esta utilidad.
`normal-case`	`text-transform: none;`	Aplica `text-transform: none;` al elemento; úsalo cuando necesites ajustar `text-transform` con esta utilidad.

desbordamiento de texto

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

Utilidades para controlar cómo se desborda el texto de un elemento.

Clase de Utilidad	Propiedad CSS	Explicación Breve
`truncate`	`overflow: hidden; text-overflow: ellipsis; white-space: nowrap;`	Aplica `overflow: hidden; text-overflow: ellipsis; white-space: nowrap;` al elemento; úsalo cuando necesites ajustar `text-overflow` con esta utilidad.
`text-ellipsis`	`text-overflow: ellipsis;`	Aplica `text-overflow: ellipsis;` al elemento; úsalo cuando necesites ajustar `text-overflow` con esta utilidad.
`text-clip`	`text-overflow: clip;`	Aplica `text-overflow: clip;` al elemento; úsalo cuando necesites ajustar `text-overflow` con esta utilidad.

ajuste de texto

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

Utilidades para controlar cómo se ajusta el texto dentro de un elemento.

Clase de Utilidad	Propiedad CSS	Explicación Breve
`text-wrap`	`text-wrap: wrap;`	Aplica `text-wrap: wrap;` al elemento; úsalo cuando necesites ajustar `text-wrap` con esta utilidad.
`text-nowrap`	`text-wrap: nowrap;`	Aplica `text-wrap: nowrap;` al elemento; úsalo cuando necesites ajustar `text-wrap` con esta utilidad.
`text-balance`	`text-wrap: balance;`	Aplica `text-wrap: balance;` al elemento; úsalo cuando necesites ajustar `text-wrap` con esta utilidad.
`text-pretty`	`text-wrap: pretty;`	Aplica `text-wrap: pretty;` al elemento; úsalo cuando necesites ajustar `text-wrap` con esta utilidad.

sangría de texto

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

Utilidades para controlar la cantidad de espacio vacío que se muestra antes del texto en un bloque.

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

alineación vertical

Fuente oficial: https://tailwindcss.com/docs/vertical-align

Utilidades para controlar la alineación vertical de un cuadro en línea o de celda de tabla.

Clase de Utilidad	Propiedad CSS	Explicación Breve
`align-baseline`	`vertical-align: baseline;`	Aplica `vertical-align: baseline;` al elemento; úsalo cuando necesites ajustar `vertical-align` con esta utilidad.
`align-top`	`vertical-align: top;`	Aplica `vertical-align: top;` al elemento; úsalo cuando necesites ajustar `vertical-align` con esta utilidad.
`align-middle`	`vertical-align: middle;`	Aplica `vertical-align: middle;` al elemento; úsalo cuando necesites ajustar `vertical-align` con esta utilidad.
`align-bottom`	`vertical-align: bottom;`	Aplica `vertical-align: bottom;` al elemento; úsalo cuando necesites ajustar `vertical-align` con esta utilidad.
`align-text-top`	`vertical-align: text-top;`	Aplica `vertical-align: text-top;` al elemento; úsalo cuando necesites ajustar `vertical-align` con esta utilidad.
`align-text-bottom`	`vertical-align: text-bottom;`	Aplica `vertical-align: text-bottom;` al elemento; úsalo cuando necesites ajustar `vertical-align` con esta utilidad.
`align-sub`	`vertical-align: sub;`	Aplica `vertical-align: sub;` al elemento; úsalo cuando necesites ajustar `vertical-align` con esta utilidad.
`align-super`	`vertical-align: super;`	Aplica `vertical-align: super;` al elemento; úsalo cuando necesites ajustar `vertical-align` con esta utilidad.
`align-( <custom-property> )`	`vertical-align: var( <custom-property> );`	Aplica `vertical-align: var( <custom-property> );` al elemento; úsalo cuando necesites ajustar `vertical-align` con esta utilidad.
`align-[ <value> ]`	`vertical-align: <value> ;`	Aplica `vertical-align: <value> ;` al elemento; úsalo cuando necesites ajustar `vertical-align` con esta utilidad.

espacio en blanco

Fuente oficial: https://tailwindcss.com/docs/white-space

Utilidades para controlar la propiedad de espacio en blanco de un elemento.

Clase de Utilidad	Propiedad CSS	Explicación Breve
`whitespace-normal`	`white-space: normal;`	Aplica `white-space: normal;` al elemento; úsalo cuando necesites ajustar `white-space` con esta utilidad.
`whitespace-nowrap`	`white-space: nowrap;`	Aplica `white-space: nowrap;` al elemento; úsalo cuando necesites ajustar `white-space` con esta utilidad.
`whitespace-pre`	`white-space: pre;`	Aplica `white-space: pre;` al elemento; úsalo cuando necesites ajustar `white-space` con esta utilidad.
`whitespace-pre-line`	`white-space: pre-line;`	Aplica `white-space: pre-line;` al elemento; úsalo cuando necesites ajustar `white-space` con esta utilidad.
`whitespace-pre-wrap`	`white-space: pre-wrap;`	Aplica `white-space: pre-wrap;` al elemento; úsalo cuando necesites ajustar `white-space` con esta utilidad.
`whitespace-break-spaces`	`white-space: break-spaces;`	Aplica `white-space: break-spaces;` al elemento; úsalo cuando necesites ajustar `white-space` con esta utilidad.

salto de palabra

Fuente oficial: https://tailwindcss.com/docs/word-break

Utilidades para controlar los saltos de palabras en un elemento.

Clase de Utilidad	Propiedad CSS	Explicación Breve
`break-normal`	`word-break: normal;`	Aplica `word-break: normal;` al elemento; úsalo cuando necesites ajustar `word-break` con esta utilidad.
`break-all`	`word-break: break-all;`	Aplica `word-break: break-all;` al elemento; úsalo cuando necesites ajustar `word-break` con esta utilidad.
`break-keep`	`word-break: keep-all;`	Aplica `word-break: keep-all;` al elemento; úsalo cuando necesites ajustar `word-break` con esta utilidad.

envoltura de desbordamiento

Fuente oficial: https://tailwindcss.com/docs/overflow-wrap

Utilidades para controlar los saltos de línea dentro de palabras en un elemento desbordado.

Clase de Utilidad	Propiedad CSS	Explicación Breve
`wrap-break-word`	`overflow-wrap: break-word;`	Aplica `overflow-wrap: break-word;` al elemento; úsalo cuando necesites ajustar `overflow-wrap` con esta utilidad.
`wrap-anywhere`	`overflow-wrap: anywhere;`	Aplica `overflow-wrap: anywhere;` al elemento; úsalo cuando necesites ajustar `overflow-wrap` con esta utilidad.
`wrap-normal`	`overflow-wrap: normal;`	Aplica `overflow-wrap: normal;` al elemento; úsalo cuando necesites ajustar `overflow-wrap` con esta utilidad.

guiones

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

Utilidades para controlar cómo se deben dividir las palabras con guiones.

Clase de Utilidad	Propiedad CSS	Explicación Breve
`hyphens-none`	`hyphens: none;`	Aplica `hyphens: none;` al elemento; úsalo cuando necesites ajustar `hyphens` con esta utilidad.
`hyphens-manual`	`hyphens: manual;`	Aplica `hyphens: manual;` al elemento; úsalo cuando necesites ajustar `hyphens` con esta utilidad.
`hyphens-auto`	`hyphens: auto;`	Aplica `hyphens: auto;` al elemento; úsalo cuando necesites ajustar `hyphens` con esta utilidad.

contenido

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

Utilidades para controlar el contenido de los pseudoelementos antes y después.

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

Clase de Utilidad	Propiedad CSS	Explicación Breve
`text-xs`	`font-size: var(--text-xs); /* 0.75rem (12px) / line-height: var(--text-xs--line-height); / calc(1 / 0.75) */`	Aplica `font-size: var(--text-xs); /* 0.75rem (12px) / line-height: var(--text-xs--line-height); / calc(1 / 0.75) */` al elemento; úsalo cuando necesites ajustar `font-size` con esta utilidad.
`text-sm`	`font-size: var(--text-sm); /* 0.875rem (14px) / line-height: var(--text-sm--line-height); / calc(1.25 / 0.875) */`	Aplica `font-size: var(--text-sm); /* 0.875rem (14px) / line-height: var(--text-sm--line-height); / calc(1.25 / 0.875) */` al elemento; úsalo cuando necesites ajustar `font-size` con esta utilidad.
`text-base`	`font-size: var(--text-base); /* 1rem (16px) / line-height: var(--text-base--line-height); / calc(1.5 / 1) */`	Aplica `font-size: var(--text-base); /* 1rem (16px) / line-height: var(--text-base--line-height); / calc(1.5 / 1) */` al elemento; úsalo cuando necesites ajustar `font-size` con esta utilidad.
`text-lg`	`font-size: var(--text-lg); /* 1.125rem (18px) / line-height: var(--text-lg--line-height); / calc(1.75 / 1.125) */`	Aplica `font-size: var(--text-lg); /* 1.125rem (18px) / line-height: var(--text-lg--line-height); / calc(1.75 / 1.125) */` al elemento; úsalo cuando necesites ajustar `font-size` con esta utilidad.
`text-xl`	`font-size: var(--text-xl); /* 1.25rem (20px) / line-height: var(--text-xl--line-height); / calc(1.75 / 1.25) */`	Aplica `font-size: var(--text-xl); /* 1.25rem (20px) / line-height: var(--text-xl--line-height); / calc(1.75 / 1.25) */` al elemento; úsalo cuando necesites ajustar `font-size` con esta utilidad.
`text-2xl`	`font-size: var(--text-2xl); /* 1.5rem (24px) / line-height: var(--text-2xl--line-height); / calc(2 / 1.5) */`	Aplica `font-size: var(--text-2xl); /* 1.5rem (24px) / line-height: var(--text-2xl--line-height); / calc(2 / 1.5) */` al elemento; úsalo cuando necesites ajustar `font-size` con esta utilidad.
`text-3xl`	`font-size: var(--text-3xl); /* 1.875rem (30px) / line-height: var(--text-3xl--line-height); / calc(2.25 / 1.875) */`	Aplica `font-size: var(--text-3xl); /* 1.875rem (30px) / line-height: var(--text-3xl--line-height); / calc(2.25 / 1.875) */` al elemento; úsalo cuando necesites ajustar `font-size` con esta utilidad.
`text-4xl`	`font-size: var(--text-4xl); /* 2.25rem (36px) / line-height: var(--text-4xl--line-height); / calc(2.5 / 2.25) */`	Aplica `font-size: var(--text-4xl); /* 2.25rem (36px) / line-height: var(--text-4xl--line-height); / calc(2.5 / 2.25) */` al elemento; úsalo cuando necesites ajustar `font-size` con esta utilidad.
`text-5xl`	`font-size: var(--text-5xl); /* 3rem (48px) / line-height: var(--text-5xl--line-height); / 1 */`	Aplica `font-size: var(--text-5xl); /* 3rem (48px) / line-height: var(--text-5xl--line-height); / 1 */` al elemento; úsalo cuando necesites ajustar `font-size` con esta utilidad.
`text-6xl`	`font-size: var(--text-6xl); /* 3.75rem (60px) / line-height: var(--text-6xl--line-height); / 1 */`	Aplica `font-size: var(--text-6xl); /* 3.75rem (60px) / line-height: var(--text-6xl--line-height); / 1 */` al elemento; úsalo cuando necesites ajustar `font-size` con esta utilidad.
`text-7xl`	`font-size: var(--text-7xl); /* 4.5rem (72px) / line-height: var(--text-7xl--line-height); / 1 */`	Aplica `font-size: var(--text-7xl); /* 4.5rem (72px) / line-height: var(--text-7xl--line-height); / 1 */` al elemento; úsalo cuando necesites ajustar `font-size` con esta utilidad.
`text-8xl`	`font-size: var(--text-8xl); /* 6rem (96px) / line-height: var(--text-8xl--line-height); / 1 */`	Aplica `font-size: var(--text-8xl); /* 6rem (96px) / line-height: var(--text-8xl--line-height); / 1 */` al elemento; úsalo cuando necesites ajustar `font-size` con esta utilidad.
`text-9xl`	`font-size: var(--text-9xl); /* 8rem (128px) / line-height: var(--text-9xl--line-height); / 1 */`	Aplica `font-size: var(--text-9xl); /* 8rem (128px) / line-height: var(--text-9xl--line-height); / 1 */` al elemento; úsalo cuando necesites ajustar `font-size` con esta utilidad.
`text-(length: <custom-property> )`	`font-size: var( <custom-property> );`	Aplica `font-size: var( <custom-property> );` al elemento; úsalo cuando necesites ajustar `font-size` con esta utilidad.
`text-[ <value> ]`	`font-size: <value> ;`	Aplica `font-size: <value> ;` al elemento; úsalo cuando necesites ajustar `font-size` con esta utilidad.

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

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