Cheatsheet · 37 secciones

Notebook 6 - Interactividad, Animaciones, Transforms & SVG

Cheatsheet consolidado de Notebook 6 - Interactividad, Animaciones, Transforms & SVG, generado a partir de la documentación oficial de Tailwind CSS y agrupado por tema.

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

propiedad de transición

Fuente oficial: https://tailwindcss.com/docs/transition-property

Utilidades para controlar qué propiedades CSS cambian.

Clase de UtilidadPropiedad CSSExplicación Breve
transitiontransition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events; transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */ transition-duration: var(--default-transition-duration); /* 150ms */Aplica transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events; transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */ transition-duration: var(--default-transition-duration); /* 150ms */ al elemento; úsalo cuando necesites ajustar transition-property con esta utilidad.
transition-alltransition-property: all; transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */ transition-duration: var(--default-transition-duration); /* 150ms */Aplica transition-property: all; transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */ transition-duration: var(--default-transition-duration); /* 150ms */ al elemento; úsalo cuando necesites ajustar transition-property con esta utilidad.
transition-colorstransition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */ transition-duration: var(--default-transition-duration); /* 150ms */Aplica transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */ transition-duration: var(--default-transition-duration); /* 150ms */ al elemento; úsalo cuando necesites ajustar transition-property con esta utilidad.
transition-opacitytransition-property: opacity; transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */ transition-duration: var(--default-transition-duration); /* 150ms */Aplica transition-property: opacity; transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */ transition-duration: var(--default-transition-duration); /* 150ms */ al elemento; úsalo cuando necesites ajustar transition-property con esta utilidad.
transition-shadowtransition-property: box-shadow; transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */ transition-duration: var(--default-transition-duration); /* 150ms */Aplica transition-property: box-shadow; transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */ transition-duration: var(--default-transition-duration); /* 150ms */ al elemento; úsalo cuando necesites ajustar transition-property con esta utilidad.
transition-transformtransition-property: transform, translate, scale, rotate; transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */ transition-duration: var(--default-transition-duration); /* 150ms */Aplica transition-property: transform, translate, scale, rotate; transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */ transition-duration: var(--default-transition-duration); /* 150ms */ al elemento; úsalo cuando necesites ajustar transition-property con esta utilidad.
transition-nonetransition-property: none;Aplica transition-property: none; al elemento; úsalo cuando necesites ajustar transition-property con esta utilidad.
transition-( <custom-property> )transition-property: var( <custom-property> ); transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */ transition-duration: var(--default-transition-duration); /* 150ms */Aplica transition-property: var( <custom-property> ); transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */ transition-duration: var(--default-transition-duration); /* 150ms */ al elemento; úsalo cuando necesites ajustar transition-property con esta utilidad.
transition-[ <value> ]transition-property: <value> ; transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */ transition-duration: var(--default-transition-duration); /* 150ms */Aplica transition-property: <value> ; transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */ transition-duration: var(--default-transition-duration); /* 150ms */ al elemento; úsalo cuando necesites ajustar transition-property con esta utilidad.

comportamiento de transición

Fuente oficial: https://tailwindcss.com/docs/transition-behavior

Utilidades para controlar el comportamiento de las transiciones CSS.

Clase de UtilidadPropiedad CSSExplicación Breve
transition-normaltransition-behavior: normal;Aplica transition-behavior: normal; al elemento; úsalo cuando necesites ajustar transition-behavior con esta utilidad.
transition-discretetransition-behavior: allow-discrete;Aplica transition-behavior: allow-discrete; al elemento; úsalo cuando necesites ajustar transition-behavior con esta utilidad.

duración de la transición

Fuente oficial: https://tailwindcss.com/docs/transition-duration

Utilidades para controlar la duración de las transiciones CSS.

Clase de UtilidadPropiedad CSSExplicación Breve
duration- <number>transition-duration: <number> ms;Aplica transition-duration: <number> ms; al elemento; úsalo cuando necesites ajustar transition-duration con esta utilidad.
duration-initialtransition-duration: initial;Aplica transition-duration: initial; al elemento; úsalo cuando necesites ajustar transition-duration con esta utilidad.
duration-( <custom-property> )transition-duration: var( <custom-property> );Aplica transition-duration: var( <custom-property> ); al elemento; úsalo cuando necesites ajustar transition-duration con esta utilidad.
duration-[ <value> ]transition-duration: <value> ;Aplica transition-duration: <value> ; al elemento; úsalo cuando necesites ajustar transition-duration con esta utilidad.

función de sincronización de transición

Fuente oficial: https://tailwindcss.com/docs/transition-timing-function

Utilidades para controlar la facilitación de las transiciones CSS.

Clase de UtilidadPropiedad CSSExplicación Breve
ease-lineartransition-timing-function: linear;Aplica transition-timing-function: linear; al elemento; úsalo cuando necesites ajustar transition-timing-function con esta utilidad.
ease-intransition-timing-function: var(--ease-in); /* cubic-bezier(0.4, 0, 1, 1) */Aplica transition-timing-function: var(--ease-in); /* cubic-bezier(0.4, 0, 1, 1) */ al elemento; úsalo cuando necesites ajustar transition-timing-function con esta utilidad.
ease-outtransition-timing-function: var(--ease-out); /* cubic-bezier(0, 0, 0.2, 1) */Aplica transition-timing-function: var(--ease-out); /* cubic-bezier(0, 0, 0.2, 1) */ al elemento; úsalo cuando necesites ajustar transition-timing-function con esta utilidad.
ease-in-outtransition-timing-function: var(--ease-in-out); /* cubic-bezier(0.4, 0, 0.2, 1) */Aplica transition-timing-function: var(--ease-in-out); /* cubic-bezier(0.4, 0, 0.2, 1) */ al elemento; úsalo cuando necesites ajustar transition-timing-function con esta utilidad.
ease-initialtransition-timing-function: initial;Aplica transition-timing-function: initial; al elemento; úsalo cuando necesites ajustar transition-timing-function con esta utilidad.
ease-( <custom-property> )transition-timing-function: var( <custom-property> );Aplica transition-timing-function: var( <custom-property> ); al elemento; úsalo cuando necesites ajustar transition-timing-function con esta utilidad.
ease-[ <value> ]transition-timing-function: <value> ;Aplica transition-timing-function: <value> ; al elemento; úsalo cuando necesites ajustar transition-timing-function con esta utilidad.

retraso de transición

Fuente oficial: https://tailwindcss.com/docs/transition-delay

Utilidades para controlar el retraso de las transiciones CSS.

Clase de UtilidadPropiedad CSSExplicación Breve
delay- <number>transition-delay: <number> ms;Aplica transition-delay: <number> ms; al elemento; úsalo cuando necesites ajustar transition-delay con esta utilidad.
delay-( <custom-property> )transition-delay: var( <custom-property> );Aplica transition-delay: var( <custom-property> ); al elemento; úsalo cuando necesites ajustar transition-delay con esta utilidad.
delay-[ <value> ]transition-delay: <value> ;Aplica transition-delay: <value> ; al elemento; úsalo cuando necesites ajustar transition-delay con esta utilidad.

animación

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

Utilidades para animar elementos con animaciones CSS.

Clase de UtilidadPropiedad CSSExplicación Breve
animate-spinanimation: var(--animate-spin); /* spin 1s linear infinite */ @keyframes spin { to { transform: rotate(360deg); } }Aplica animation: var(--animate-spin); /* spin 1s linear infinite */ @keyframes spin { to { transform: rotate(360deg); } } al elemento; úsalo cuando necesites ajustar animation con esta utilidad.
animate-pinganimation: var(--animate-ping); /* ping 1s cubic-bezier(0, 0, 0.2, 1) infinite */ @keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } }Aplica animation: var(--animate-ping); /* ping 1s cubic-bezier(0, 0, 0.2, 1) infinite */ @keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } } al elemento; úsalo cuando necesites ajustar animation con esta utilidad.
animate-pulseanimation: var(--animate-pulse); /* pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite */ @keyframes pulse { 50% { opacity: 0.5; } }Aplica animation: var(--animate-pulse); /* pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite */ @keyframes pulse { 50% { opacity: 0.5; } } al elemento; úsalo cuando necesites ajustar animation con esta utilidad.
animate-bounceanimation: var(--animate-bounce); /* bounce 1s infinite */ @keyframes bounce { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); } 50% { transform: none; animation-timing-function: cubic-bezier(0, 0, 0.2, 1); } }Aplica animation: var(--animate-bounce); /* bounce 1s infinite */ @keyframes bounce { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); } 50% { transform: none; animation-timing-function: cubic-bezier(0, 0, 0.2, 1); } } al elemento; úsalo cuando necesites ajustar animation con esta utilidad.
animate-noneanimation: none;Aplica animation: none; al elemento; úsalo cuando necesites ajustar animation con esta utilidad.
animate-( <custom-property> )animation: var( <custom-property> );Aplica animation: var( <custom-property> ); al elemento; úsalo cuando necesites ajustar animation con esta utilidad.
animate-[ <value> ]animation: <value> ;Aplica animation: <value> ; al elemento; úsalo cuando necesites ajustar animation con esta utilidad.

visibilidad de la cara posterior

Fuente oficial: https://tailwindcss.com/docs/backface-visibility

Utilidades para controlar si la cara posterior de un elemento es visible.

Clase de UtilidadPropiedad CSSExplicación Breve
backface-hiddenbackface-visibility: hidden;Aplica backface-visibility: hidden; al elemento; úsalo cuando necesites ajustar backface-visibility con esta utilidad.
backface-visiblebackface-visibility: visible;Aplica backface-visibility: visible; al elemento; úsalo cuando necesites ajustar backface-visibility con esta utilidad.

perspectiva

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

Utilidades para controlar la perspectiva de un elemento cuando se coloca en un espacio 3D.

Clase de UtilidadPropiedad CSSExplicación Breve
perspective-dramaticperspective: var(--perspective-dramatic); /* 100px */Aplica perspective: var(--perspective-dramatic); /* 100px */ al elemento; úsalo cuando necesites ajustar perspective con esta utilidad.
perspective-nearperspective: var(--perspective-near); /* 300px */Aplica perspective: var(--perspective-near); /* 300px */ al elemento; úsalo cuando necesites ajustar perspective con esta utilidad.
perspective-normalperspective: var(--perspective-normal); /* 500px */Aplica perspective: var(--perspective-normal); /* 500px */ al elemento; úsalo cuando necesites ajustar perspective con esta utilidad.
perspective-midrangeperspective: var(--perspective-midrange); /* 800px */Aplica perspective: var(--perspective-midrange); /* 800px */ al elemento; úsalo cuando necesites ajustar perspective con esta utilidad.
perspective-distantperspective: var(--perspective-distant); /* 1200px */Aplica perspective: var(--perspective-distant); /* 1200px */ al elemento; úsalo cuando necesites ajustar perspective con esta utilidad.
perspective-noneperspective: none;Aplica perspective: none; al elemento; úsalo cuando necesites ajustar perspective con esta utilidad.
perspective-( <custom-property> )perspective: var( <custom-property> );Aplica perspective: var( <custom-property> ); al elemento; úsalo cuando necesites ajustar perspective con esta utilidad.
perspective-[ <value> ]perspective: <value> ;Aplica perspective: <value> ; al elemento; úsalo cuando necesites ajustar perspective con esta utilidad.

origen-perspectiva

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

Utilidades para controlar el origen de la perspectiva de un elemento cuando se coloca en un espacio 3D.

Clase de UtilidadPropiedad CSSExplicación Breve
perspective-origin-centerperspective-origin: center;Aplica perspective-origin: center; al elemento; úsalo cuando necesites ajustar perspective-origin con esta utilidad.
perspective-origin-topperspective-origin: top;Aplica perspective-origin: top; al elemento; úsalo cuando necesites ajustar perspective-origin con esta utilidad.
perspective-origin-top-rightperspective-origin: top right;Aplica perspective-origin: top right; al elemento; úsalo cuando necesites ajustar perspective-origin con esta utilidad.
perspective-origin-rightperspective-origin: right;Aplica perspective-origin: right; al elemento; úsalo cuando necesites ajustar perspective-origin con esta utilidad.
perspective-origin-bottom-rightperspective-origin: bottom right;Aplica perspective-origin: bottom right; al elemento; úsalo cuando necesites ajustar perspective-origin con esta utilidad.
perspective-origin-bottomperspective-origin: bottom;Aplica perspective-origin: bottom; al elemento; úsalo cuando necesites ajustar perspective-origin con esta utilidad.
perspective-origin-bottom-leftperspective-origin: bottom left;Aplica perspective-origin: bottom left; al elemento; úsalo cuando necesites ajustar perspective-origin con esta utilidad.
perspective-origin-leftperspective-origin: left;Aplica perspective-origin: left; al elemento; úsalo cuando necesites ajustar perspective-origin con esta utilidad.
perspective-origin-top-leftperspective-origin: top left;Aplica perspective-origin: top left; al elemento; úsalo cuando necesites ajustar perspective-origin con esta utilidad.
perspective-origin-( <custom-property> )perspective-origin: var( <custom-property> );Aplica perspective-origin: var( <custom-property> ); al elemento; úsalo cuando necesites ajustar perspective-origin con esta utilidad.
perspective-origin-[ <value> ]perspective-origin: <value> ;Aplica perspective-origin: <value> ; al elemento; úsalo cuando necesites ajustar perspective-origin con esta utilidad.

girar

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

Utilidades para elementos giratorios.

Clase de UtilidadPropiedad CSSExplicación Breve
rotate-nonerotate: none;Aplica rotate: none; al elemento; úsalo cuando necesites ajustar rotate con esta utilidad.
rotate- <number>rotate: <number> deg;Aplica rotate: <number> deg; al elemento; úsalo cuando necesites ajustar rotate con esta utilidad.
-rotate- <number>rotate: calc( <number> deg * -1);Aplica rotate: calc( <number> deg * -1); al elemento; úsalo cuando necesites ajustar rotate con esta utilidad.
rotate-( <custom-property> )rotate: var( <custom-property> );Aplica rotate: var( <custom-property> ); al elemento; úsalo cuando necesites ajustar rotate con esta utilidad.
rotate-[ <value> ]rotate: <value> ;Aplica rotate: <value> ; al elemento; úsalo cuando necesites ajustar rotate con esta utilidad.
rotate-x- <number>transform: rotateX( <number> deg) var(--tw-rotate-y);Aplica transform: rotateX( <number> deg) var(--tw-rotate-y); al elemento; úsalo cuando necesites ajustar rotate con esta utilidad.
-rotate-x- <number>transform: rotateX(- <number> deg) var(--tw-rotate-y);Aplica transform: rotateX(- <number> deg) var(--tw-rotate-y); al elemento; úsalo cuando necesites ajustar rotate con esta utilidad.
rotate-x-( <custom-property> )transform: rotateX(var( <custom-property> )) var(--tw-rotate-y);Aplica transform: rotateX(var( <custom-property> )) var(--tw-rotate-y); al elemento; úsalo cuando necesites ajustar rotate con esta utilidad.
rotate-x-[ <value> ]transform: rotateX( <value> ) var(--tw-rotate-y);Aplica transform: rotateX( <value> ) var(--tw-rotate-y); al elemento; úsalo cuando necesites ajustar rotate con esta utilidad.
rotate-y- <number>transform: var(--tw-rotate-x) rotateY( <number> deg);Aplica transform: var(--tw-rotate-x) rotateY( <number> deg); al elemento; úsalo cuando necesites ajustar rotate con esta utilidad.
-rotate-y- <number>transform: var(--tw-rotate-x) rotateY(- <number> deg);Aplica transform: var(--tw-rotate-x) rotateY(- <number> deg); al elemento; úsalo cuando necesites ajustar rotate con esta utilidad.
rotate-y-( <custom-property> )transform: var(--tw-rotate-x) rotateY(var( <custom-property> ));Aplica transform: var(--tw-rotate-x) rotateY(var( <custom-property> )); al elemento; úsalo cuando necesites ajustar rotate con esta utilidad.
rotate-y-[ <value> ]transform: var(--tw-rotate-x) rotateY( <value> );Aplica transform: var(--tw-rotate-x) rotateY( <value> ); al elemento; úsalo cuando necesites ajustar rotate con esta utilidad.
rotate-z- <number>transform: var(--tw-rotate-x) var(--tw-rotate-y) rotateZ( <number> deg);Aplica transform: var(--tw-rotate-x) var(--tw-rotate-y) rotateZ( <number> deg); al elemento; úsalo cuando necesites ajustar rotate con esta utilidad.
-rotate-z- <number>transform: var(--tw-rotate-x) var(--tw-rotate-y) rotateZ(- <number> deg);Aplica transform: var(--tw-rotate-x) var(--tw-rotate-y) rotateZ(- <number> deg); al elemento; úsalo cuando necesites ajustar rotate con esta utilidad.
rotate-z-( <custom-property> )transform: var(--tw-rotate-x) var(--tw-rotate-y) rotateZ(var( <custom-property> ));Aplica transform: var(--tw-rotate-x) var(--tw-rotate-y) rotateZ(var( <custom-property> )); al elemento; úsalo cuando necesites ajustar rotate con esta utilidad.
rotate-z-[ <value> ]transform: var(--tw-rotate-x) var(--tw-rotate-y) rotateZ( <value> );Aplica transform: var(--tw-rotate-x) var(--tw-rotate-y) rotateZ( <value> ); al elemento; úsalo cuando necesites ajustar rotate con esta utilidad.

escala

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

Utilidades para escalar elementos.

Clase de UtilidadPropiedad CSSExplicación Breve
scale-nonescale: none;Aplica scale: none; al elemento; úsalo cuando necesites ajustar scale con esta utilidad.
scale- <number>scale: <number> % <number> %;Aplica scale: <number> % <number> %; al elemento; úsalo cuando necesites ajustar scale con esta utilidad.
-scale- <number>scale: calc( <number> % * -1) calc( <number> % * -1);Aplica scale: calc( <number> % * -1) calc( <number> % * -1); al elemento; úsalo cuando necesites ajustar scale con esta utilidad.
scale-( <custom-property> )scale: var( <custom-property> ) var( <custom-property> );Aplica scale: var( <custom-property> ) var( <custom-property> ); al elemento; úsalo cuando necesites ajustar scale con esta utilidad.
scale-[ <value> ]scale: <value> ;Aplica scale: <value> ; al elemento; úsalo cuando necesites ajustar scale con esta utilidad.
scale-x- <number>scale: <number> % var(--tw-scale-y);Aplica scale: <number> % var(--tw-scale-y); al elemento; úsalo cuando necesites ajustar scale con esta utilidad.
-scale-x- <number>scale: calc( <number> % * -1) var(--tw-scale-y);Aplica scale: calc( <number> % * -1) var(--tw-scale-y); al elemento; úsalo cuando necesites ajustar scale con esta utilidad.
scale-x-( <custom-property> )scale: var( <custom-property> ) var(--tw-scale-y);Aplica scale: var( <custom-property> ) var(--tw-scale-y); al elemento; úsalo cuando necesites ajustar scale con esta utilidad.
scale-x-[ <value> ]scale: <value> var(--tw-scale-y);Aplica scale: <value> var(--tw-scale-y); al elemento; úsalo cuando necesites ajustar scale con esta utilidad.
scale-y- <number>scale: var(--tw-scale-x) <number> %;Aplica scale: var(--tw-scale-x) <number> %; al elemento; úsalo cuando necesites ajustar scale con esta utilidad.
-scale-y- <number>scale: var(--tw-scale-x) calc( <number> % * -1);Aplica scale: var(--tw-scale-x) calc( <number> % * -1); al elemento; úsalo cuando necesites ajustar scale con esta utilidad.
scale-y-( <custom-property> )scale: var(--tw-scale-x) var( <custom-property> );Aplica scale: var(--tw-scale-x) var( <custom-property> ); al elemento; úsalo cuando necesites ajustar scale con esta utilidad.
scale-y-[ <value> ]scale: var(--tw-scale-x) <value> ;Aplica scale: var(--tw-scale-x) <value> ; al elemento; úsalo cuando necesites ajustar scale con esta utilidad.
scale-z- <number>scale: var(--tw-scale-x) var(--tw-scale-y) <number> %;Aplica scale: var(--tw-scale-x) var(--tw-scale-y) <number> %; al elemento; úsalo cuando necesites ajustar scale con esta utilidad.
-scale-z- <number>scale: var(--tw-scale-x) var(--tw-scale-y) calc( <number> % * -1);Aplica scale: var(--tw-scale-x) var(--tw-scale-y) calc( <number> % * -1); al elemento; úsalo cuando necesites ajustar scale con esta utilidad.
scale-z-( <custom-property> )scale: var(--tw-scale-x) var(--tw-scale-y) var( <custom-property> );Aplica scale: var(--tw-scale-x) var(--tw-scale-y) var( <custom-property> ); al elemento; úsalo cuando necesites ajustar scale con esta utilidad.
scale-z-[ <value> ]scale: var(--tw-scale-x) var(--tw-scale-y) <value> ;Aplica scale: var(--tw-scale-x) var(--tw-scale-y) <value> ; al elemento; úsalo cuando necesites ajustar scale con esta utilidad.
scale-3dscale: var(--tw-scale-x) var(--tw-scale-y) var(--tw-scale-z);Aplica scale: var(--tw-scale-x) var(--tw-scale-y) var(--tw-scale-z); al elemento; úsalo cuando necesites ajustar scale con esta utilidad.

sesgar

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

Utilidades para sesgar elementos con transformación.

Clase de UtilidadPropiedad CSSExplicación Breve
skew- <number>transform: skewX( <number> deg) skewY( <number> deg);Aplica transform: skewX( <number> deg) skewY( <number> deg); al elemento; úsalo cuando necesites ajustar skew con esta utilidad.
-skew- <number>transform: skewX(- <number> deg) skewY(- <number> deg);Aplica transform: skewX(- <number> deg) skewY(- <number> deg); al elemento; úsalo cuando necesites ajustar skew con esta utilidad.
skew-( <custom-property> )transform: skewX(var( <custom-property> )) skewY(var( <custom-property> ));Aplica transform: skewX(var( <custom-property> )) skewY(var( <custom-property> )); al elemento; úsalo cuando necesites ajustar skew con esta utilidad.
skew-[ <value> ]transform: skewX( <value> ) skewY( <value> );Aplica transform: skewX( <value> ) skewY( <value> ); al elemento; úsalo cuando necesites ajustar skew con esta utilidad.
skew-x- <number>transform: skewX( <number> deg));Aplica transform: skewX( <number> deg)); al elemento; úsalo cuando necesites ajustar skew con esta utilidad.
-skew-x- <number>transform: skewX(- <number> deg));Aplica transform: skewX(- <number> deg)); al elemento; úsalo cuando necesites ajustar skew con esta utilidad.
skew-x-( <custom-property> )transform: skewX(var( <custom-property> ));Aplica transform: skewX(var( <custom-property> )); al elemento; úsalo cuando necesites ajustar skew con esta utilidad.
skew-x-[ <value> ]transform: skewX( <value> ));Aplica transform: skewX( <value> )); al elemento; úsalo cuando necesites ajustar skew con esta utilidad.
skew-y- <number>transform: skewY( <number> deg);Aplica transform: skewY( <number> deg); al elemento; úsalo cuando necesites ajustar skew con esta utilidad.
-skew-y- <number>transform: skewY(- <number> deg);Aplica transform: skewY(- <number> deg); al elemento; úsalo cuando necesites ajustar skew con esta utilidad.
skew-y-( <custom-property> )transform: skewY(var( <custom-property> ));Aplica transform: skewY(var( <custom-property> )); al elemento; úsalo cuando necesites ajustar skew con esta utilidad.
skew-y-[ <value> ]transform: skewY( <value> );Aplica transform: skewY( <value> ); al elemento; úsalo cuando necesites ajustar skew con esta utilidad.

transformar

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

Utilidades para transformar elementos.

Clase de UtilidadPropiedad CSSExplicación Breve
transform-( <custom-property> )transform: var( <custom-property> );Aplica transform: var( <custom-property> ); al elemento; úsalo cuando necesites ajustar transform con esta utilidad.
transform-[ <value> ]transform: <value> ;Aplica transform: <value> ; al elemento; úsalo cuando necesites ajustar transform con esta utilidad.
transform-nonetransform: none;Aplica transform: none; al elemento; úsalo cuando necesites ajustar transform con esta utilidad.
transform-gputransform: translateZ(0) var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);Aplica transform: translateZ(0) var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y); al elemento; úsalo cuando necesites ajustar transform con esta utilidad.
transform-cputransform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);Aplica transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y); al elemento; úsalo cuando necesites ajustar transform con esta utilidad.

origen-transformación

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

Utilidades para especificar el origen de las transformaciones de un elemento.

Clase de UtilidadPropiedad CSSExplicación Breve
origin-centertransform-origin: center;Aplica transform-origin: center; al elemento; úsalo cuando necesites ajustar transform-origin con esta utilidad.
origin-toptransform-origin: top;Aplica transform-origin: top; al elemento; úsalo cuando necesites ajustar transform-origin con esta utilidad.
origin-top-righttransform-origin: top right;Aplica transform-origin: top right; al elemento; úsalo cuando necesites ajustar transform-origin con esta utilidad.
origin-righttransform-origin: right;Aplica transform-origin: right; al elemento; úsalo cuando necesites ajustar transform-origin con esta utilidad.
origin-bottom-righttransform-origin: bottom right;Aplica transform-origin: bottom right; al elemento; úsalo cuando necesites ajustar transform-origin con esta utilidad.
origin-bottomtransform-origin: bottom;Aplica transform-origin: bottom; al elemento; úsalo cuando necesites ajustar transform-origin con esta utilidad.
origin-bottom-lefttransform-origin: bottom left;Aplica transform-origin: bottom left; al elemento; úsalo cuando necesites ajustar transform-origin con esta utilidad.
origin-lefttransform-origin: left;Aplica transform-origin: left; al elemento; úsalo cuando necesites ajustar transform-origin con esta utilidad.
origin-top-lefttransform-origin: top left;Aplica transform-origin: top left; al elemento; úsalo cuando necesites ajustar transform-origin con esta utilidad.
origin-( <custom-property> )transform-origin: var( <custom-property> );Aplica transform-origin: var( <custom-property> ); al elemento; úsalo cuando necesites ajustar transform-origin con esta utilidad.
origin-[ <value> ]transform-origin: <value> ;Aplica transform-origin: <value> ; al elemento; úsalo cuando necesites ajustar transform-origin con esta utilidad.

estilo transformado

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

Utilidades para controlar si los elementos secundarios se colocan en el espacio 3D.

Clase de UtilidadPropiedad CSSExplicación Breve
transform-3dtransform-style: preserve-3d;Aplica transform-style: preserve-3d; al elemento; úsalo cuando necesites ajustar transform-style con esta utilidad.
transform-flattransform-style: flat;Aplica transform-style: flat; al elemento; úsalo cuando necesites ajustar transform-style con esta utilidad.

traducir

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

Utilidades para traducir elementos.

Clase de UtilidadPropiedad CSSExplicación Breve
translate- <number>translate: calc(var(--spacing) * <number> ) calc(var(--spacing) * <number> );Aplica translate: calc(var(--spacing) * <number> ) calc(var(--spacing) * <number> ); al elemento; úsalo cuando necesites ajustar translate con esta utilidad.
-translate- <number>translate: calc(var(--spacing) * - <number> ) calc(var(--spacing) * - <number> );Aplica translate: calc(var(--spacing) * - <number> ) calc(var(--spacing) * - <number> ); al elemento; úsalo cuando necesites ajustar translate con esta utilidad.
translate- <fraction>translate: calc( <fraction> * 100%) calc( <fraction> * 100%);Aplica translate: calc( <fraction> * 100%) calc( <fraction> * 100%); al elemento; úsalo cuando necesites ajustar translate con esta utilidad.
-translate- <fraction>translate: calc( <fraction> * -100%) calc( <fraction> * -100%);Aplica translate: calc( <fraction> * -100%) calc( <fraction> * -100%); al elemento; úsalo cuando necesites ajustar translate con esta utilidad.
translate-fulltranslate: 100% 100%;Aplica translate: 100% 100%; al elemento; úsalo cuando necesites ajustar translate con esta utilidad.
-translate-fulltranslate: -100% -100%;Aplica translate: -100% -100%; al elemento; úsalo cuando necesites ajustar translate con esta utilidad.
translate-pxtranslate: 1px 1px;Aplica translate: 1px 1px; al elemento; úsalo cuando necesites ajustar translate con esta utilidad.
-translate-pxtranslate: -1px -1px;Aplica translate: -1px -1px; al elemento; úsalo cuando necesites ajustar translate con esta utilidad.
translate-( <custom-property> )translate: var( <custom-property> ) var( <custom-property> );Aplica translate: var( <custom-property> ) var( <custom-property> ); al elemento; úsalo cuando necesites ajustar translate con esta utilidad.
translate-[ <value> ]translate: <value> <value> ;Aplica translate: <value> <value> ; al elemento; úsalo cuando necesites ajustar translate con esta utilidad.
translate-x- <number>translate: calc(var(--spacing) * <number> ) var(--tw-translate-y);Aplica translate: calc(var(--spacing) * <number> ) var(--tw-translate-y); al elemento; úsalo cuando necesites ajustar translate con esta utilidad.
-translate-x- <number>translate: calc(var(--spacing) * - <number> ) var(--tw-translate-y);Aplica translate: calc(var(--spacing) * - <number> ) var(--tw-translate-y); al elemento; úsalo cuando necesites ajustar translate con esta utilidad.
translate-x- <fraction>translate: calc( <fraction> * 100%) var(--tw-translate-y);Aplica translate: calc( <fraction> * 100%) var(--tw-translate-y); al elemento; úsalo cuando necesites ajustar translate con esta utilidad.
-translate-x- <fraction>translate: calc( <fraction> * -100%) var(--tw-translate-y);Aplica translate: calc( <fraction> * -100%) var(--tw-translate-y); al elemento; úsalo cuando necesites ajustar translate con esta utilidad.
translate-x-fulltranslate: 100% var(--tw-translate-y);Aplica translate: 100% var(--tw-translate-y); al elemento; úsalo cuando necesites ajustar translate con esta utilidad.
-translate-x-fulltranslate: -100% var(--tw-translate-y);Aplica translate: -100% var(--tw-translate-y); al elemento; úsalo cuando necesites ajustar translate con esta utilidad.
translate-x-pxtranslate: 1px var(--tw-translate-y);Aplica translate: 1px var(--tw-translate-y); al elemento; úsalo cuando necesites ajustar translate con esta utilidad.
-translate-x-pxtranslate: -1px var(--tw-translate-y);Aplica translate: -1px var(--tw-translate-y); al elemento; úsalo cuando necesites ajustar translate con esta utilidad.
translate-x-( <custom-property> )translate: var( <custom-property> ) var(--tw-translate-y);Aplica translate: var( <custom-property> ) var(--tw-translate-y); al elemento; úsalo cuando necesites ajustar translate con esta utilidad.
translate-x-[ <value> ]translate: <value> var(--tw-translate-y);Aplica translate: <value> var(--tw-translate-y); al elemento; úsalo cuando necesites ajustar translate con esta utilidad.
translate-y- <number>translate: var(--tw-translate-x) calc(var(--spacing) * <number> );Aplica translate: var(--tw-translate-x) calc(var(--spacing) * <number> ); al elemento; úsalo cuando necesites ajustar translate con esta utilidad.
-translate-y- <number>translate: var(--tw-translate-x) calc(var(--spacing) * - <number> );Aplica translate: var(--tw-translate-x) calc(var(--spacing) * - <number> ); al elemento; úsalo cuando necesites ajustar translate con esta utilidad.
translate-y- <fraction>translate: var(--tw-translate-x) calc( <fraction> * 100%);Aplica translate: var(--tw-translate-x) calc( <fraction> * 100%); al elemento; úsalo cuando necesites ajustar translate con esta utilidad.
-translate-y- <fraction>translate: var(--tw-translate-x) calc( <fraction> * -100%);Aplica translate: var(--tw-translate-x) calc( <fraction> * -100%); al elemento; úsalo cuando necesites ajustar translate con esta utilidad.
translate-y-fulltranslate: var(--tw-translate-x) 100%;Aplica translate: var(--tw-translate-x) 100%; al elemento; úsalo cuando necesites ajustar translate con esta utilidad.
-translate-y-fulltranslate: var(--tw-translate-x) -100%;Aplica translate: var(--tw-translate-x) -100%; al elemento; úsalo cuando necesites ajustar translate con esta utilidad.
translate-y-pxtranslate: var(--tw-translate-x) 1px;Aplica translate: var(--tw-translate-x) 1px; al elemento; úsalo cuando necesites ajustar translate con esta utilidad.
-translate-y-pxtranslate: var(--tw-translate-x) -1px;Aplica translate: var(--tw-translate-x) -1px; al elemento; úsalo cuando necesites ajustar translate con esta utilidad.
translate-y-( <custom-property> )translate: var(--tw-translate-x) var( <custom-property> );Aplica translate: var(--tw-translate-x) var( <custom-property> ); al elemento; úsalo cuando necesites ajustar translate con esta utilidad.
translate-y-[ <value> ]translate: var(--tw-translate-x) <value> ;Aplica translate: var(--tw-translate-x) <value> ; al elemento; úsalo cuando necesites ajustar translate con esta utilidad.
translate-z- <number>translate: var(--tw-translate-x) var(--tw-translate-y) calc(var(--spacing) * <number> );Aplica translate: var(--tw-translate-x) var(--tw-translate-y) calc(var(--spacing) * <number> ); al elemento; úsalo cuando necesites ajustar translate con esta utilidad.
-translate-z- <number>translate: var(--tw-translate-x) var(--tw-translate-y) calc(var(--spacing) * - <number> );Aplica translate: var(--tw-translate-x) var(--tw-translate-y) calc(var(--spacing) * - <number> ); al elemento; úsalo cuando necesites ajustar translate con esta utilidad.
translate-z-pxtranslate: var(--tw-translate-x) var(--tw-translate-y) 1px;Aplica translate: var(--tw-translate-x) var(--tw-translate-y) 1px; al elemento; úsalo cuando necesites ajustar translate con esta utilidad.
-translate-z-pxtranslate: var(--tw-translate-x) var(--tw-translate-y) -1px;Aplica translate: var(--tw-translate-x) var(--tw-translate-y) -1px; al elemento; úsalo cuando necesites ajustar translate con esta utilidad.
translate-z-( <custom-property> )translate: var(--tw-translate-x) var(--tw-translate-y) var( <custom-property> );Aplica translate: var(--tw-translate-x) var(--tw-translate-y) var( <custom-property> ); al elemento; úsalo cuando necesites ajustar translate con esta utilidad.
translate-z-[ <value> ]translate: var(--tw-translate-x) var(--tw-translate-y) <value> ;Aplica translate: var(--tw-translate-x) var(--tw-translate-y) <value> ; al elemento; úsalo cuando necesites ajustar translate con esta utilidad.
translate-nonetranslate: none;Aplica translate: none; al elemento; úsalo cuando necesites ajustar translate con esta utilidad.

color de acento

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

Utilidades para controlar el color acentuado de un control de formulario.

Clase de UtilidadPropiedad CSSExplicación Breve
accent-inheritaccent-color: inherit;Aplica accent-color: inherit; al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-currentaccent-color: currentColor;Aplica accent-color: currentColor; al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-transparentaccent-color: transparent;Aplica accent-color: transparent; al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-blackaccent-color: var(--color-black); /* #000 */Aplica accent-color: var(--color-black); /* #000 */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-whiteaccent-color: var(--color-white); /* #fff */Aplica accent-color: var(--color-white); /* #fff */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-red-50accent-color: var(--color-red-50); /* oklch(97.1% 0.013 17.38) */Aplica accent-color: var(--color-red-50); /* oklch(97.1% 0.013 17.38) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-red-100accent-color: var(--color-red-100); /* oklch(93.6% 0.032 17.717) */Aplica accent-color: var(--color-red-100); /* oklch(93.6% 0.032 17.717) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-red-200accent-color: var(--color-red-200); /* oklch(88.5% 0.062 18.334) */Aplica accent-color: var(--color-red-200); /* oklch(88.5% 0.062 18.334) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-red-300accent-color: var(--color-red-300); /* oklch(80.8% 0.114 19.571) */Aplica accent-color: var(--color-red-300); /* oklch(80.8% 0.114 19.571) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-red-400accent-color: var(--color-red-400); /* oklch(70.4% 0.191 22.216) */Aplica accent-color: var(--color-red-400); /* oklch(70.4% 0.191 22.216) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-red-500accent-color: var(--color-red-500); /* oklch(63.7% 0.237 25.331) */Aplica accent-color: var(--color-red-500); /* oklch(63.7% 0.237 25.331) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-red-600accent-color: var(--color-red-600); /* oklch(57.7% 0.245 27.325) */Aplica accent-color: var(--color-red-600); /* oklch(57.7% 0.245 27.325) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-red-700accent-color: var(--color-red-700); /* oklch(50.5% 0.213 27.518) */Aplica accent-color: var(--color-red-700); /* oklch(50.5% 0.213 27.518) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-red-800accent-color: var(--color-red-800); /* oklch(44.4% 0.177 26.899) */Aplica accent-color: var(--color-red-800); /* oklch(44.4% 0.177 26.899) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-red-900accent-color: var(--color-red-900); /* oklch(39.6% 0.141 25.723) */Aplica accent-color: var(--color-red-900); /* oklch(39.6% 0.141 25.723) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-red-950accent-color: var(--color-red-950); /* oklch(25.8% 0.092 26.042) */Aplica accent-color: var(--color-red-950); /* oklch(25.8% 0.092 26.042) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-orange-50accent-color: var(--color-orange-50); /* oklch(98% 0.016 73.684) */Aplica accent-color: var(--color-orange-50); /* oklch(98% 0.016 73.684) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-orange-100accent-color: var(--color-orange-100); /* oklch(95.4% 0.038 75.164) */Aplica accent-color: var(--color-orange-100); /* oklch(95.4% 0.038 75.164) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-orange-200accent-color: var(--color-orange-200); /* oklch(90.1% 0.076 70.697) */Aplica accent-color: var(--color-orange-200); /* oklch(90.1% 0.076 70.697) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-orange-300accent-color: var(--color-orange-300); /* oklch(83.7% 0.128 66.29) */Aplica accent-color: var(--color-orange-300); /* oklch(83.7% 0.128 66.29) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-orange-400accent-color: var(--color-orange-400); /* oklch(75% 0.183 55.934) */Aplica accent-color: var(--color-orange-400); /* oklch(75% 0.183 55.934) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-orange-500accent-color: var(--color-orange-500); /* oklch(70.5% 0.213 47.604) */Aplica accent-color: var(--color-orange-500); /* oklch(70.5% 0.213 47.604) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-orange-600accent-color: var(--color-orange-600); /* oklch(64.6% 0.222 41.116) */Aplica accent-color: var(--color-orange-600); /* oklch(64.6% 0.222 41.116) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-orange-700accent-color: var(--color-orange-700); /* oklch(55.3% 0.195 38.402) */Aplica accent-color: var(--color-orange-700); /* oklch(55.3% 0.195 38.402) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-orange-800accent-color: var(--color-orange-800); /* oklch(47% 0.157 37.304) */Aplica accent-color: var(--color-orange-800); /* oklch(47% 0.157 37.304) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-orange-900accent-color: var(--color-orange-900); /* oklch(40.8% 0.123 38.172) */Aplica accent-color: var(--color-orange-900); /* oklch(40.8% 0.123 38.172) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-orange-950accent-color: var(--color-orange-950); /* oklch(26.6% 0.079 36.259) */Aplica accent-color: var(--color-orange-950); /* oklch(26.6% 0.079 36.259) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-amber-50accent-color: var(--color-amber-50); /* oklch(98.7% 0.022 95.277) */Aplica accent-color: var(--color-amber-50); /* oklch(98.7% 0.022 95.277) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-amber-100accent-color: var(--color-amber-100); /* oklch(96.2% 0.059 95.617) */Aplica accent-color: var(--color-amber-100); /* oklch(96.2% 0.059 95.617) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-amber-200accent-color: var(--color-amber-200); /* oklch(92.4% 0.12 95.746) */Aplica accent-color: var(--color-amber-200); /* oklch(92.4% 0.12 95.746) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-amber-300accent-color: var(--color-amber-300); /* oklch(87.9% 0.169 91.605) */Aplica accent-color: var(--color-amber-300); /* oklch(87.9% 0.169 91.605) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-amber-400accent-color: var(--color-amber-400); /* oklch(82.8% 0.189 84.429) */Aplica accent-color: var(--color-amber-400); /* oklch(82.8% 0.189 84.429) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-amber-500accent-color: var(--color-amber-500); /* oklch(76.9% 0.188 70.08) */Aplica accent-color: var(--color-amber-500); /* oklch(76.9% 0.188 70.08) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-amber-600accent-color: var(--color-amber-600); /* oklch(66.6% 0.179 58.318) */Aplica accent-color: var(--color-amber-600); /* oklch(66.6% 0.179 58.318) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-amber-700accent-color: var(--color-amber-700); /* oklch(55.5% 0.163 48.998) */Aplica accent-color: var(--color-amber-700); /* oklch(55.5% 0.163 48.998) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-amber-800accent-color: var(--color-amber-800); /* oklch(47.3% 0.137 46.201) */Aplica accent-color: var(--color-amber-800); /* oklch(47.3% 0.137 46.201) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-amber-900accent-color: var(--color-amber-900); /* oklch(41.4% 0.112 45.904) */Aplica accent-color: var(--color-amber-900); /* oklch(41.4% 0.112 45.904) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-amber-950accent-color: var(--color-amber-950); /* oklch(27.9% 0.077 45.635) */Aplica accent-color: var(--color-amber-950); /* oklch(27.9% 0.077 45.635) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-yellow-50accent-color: var(--color-yellow-50); /* oklch(98.7% 0.026 102.212) */Aplica accent-color: var(--color-yellow-50); /* oklch(98.7% 0.026 102.212) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-yellow-100accent-color: var(--color-yellow-100); /* oklch(97.3% 0.071 103.193) */Aplica accent-color: var(--color-yellow-100); /* oklch(97.3% 0.071 103.193) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-yellow-200accent-color: var(--color-yellow-200); /* oklch(94.5% 0.129 101.54) */Aplica accent-color: var(--color-yellow-200); /* oklch(94.5% 0.129 101.54) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-yellow-300accent-color: var(--color-yellow-300); /* oklch(90.5% 0.182 98.111) */Aplica accent-color: var(--color-yellow-300); /* oklch(90.5% 0.182 98.111) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-yellow-400accent-color: var(--color-yellow-400); /* oklch(85.2% 0.199 91.936) */Aplica accent-color: var(--color-yellow-400); /* oklch(85.2% 0.199 91.936) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-yellow-500accent-color: var(--color-yellow-500); /* oklch(79.5% 0.184 86.047) */Aplica accent-color: var(--color-yellow-500); /* oklch(79.5% 0.184 86.047) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-yellow-600accent-color: var(--color-yellow-600); /* oklch(68.1% 0.162 75.834) */Aplica accent-color: var(--color-yellow-600); /* oklch(68.1% 0.162 75.834) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-yellow-700accent-color: var(--color-yellow-700); /* oklch(55.4% 0.135 66.442) */Aplica accent-color: var(--color-yellow-700); /* oklch(55.4% 0.135 66.442) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-yellow-800accent-color: var(--color-yellow-800); /* oklch(47.6% 0.114 61.907) */Aplica accent-color: var(--color-yellow-800); /* oklch(47.6% 0.114 61.907) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-yellow-900accent-color: var(--color-yellow-900); /* oklch(42.1% 0.095 57.708) */Aplica accent-color: var(--color-yellow-900); /* oklch(42.1% 0.095 57.708) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-yellow-950accent-color: var(--color-yellow-950); /* oklch(28.6% 0.066 53.813) */Aplica accent-color: var(--color-yellow-950); /* oklch(28.6% 0.066 53.813) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-lime-50accent-color: var(--color-lime-50); /* oklch(98.6% 0.031 120.757) */Aplica accent-color: var(--color-lime-50); /* oklch(98.6% 0.031 120.757) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-lime-100accent-color: var(--color-lime-100); /* oklch(96.7% 0.067 122.328) */Aplica accent-color: var(--color-lime-100); /* oklch(96.7% 0.067 122.328) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-lime-200accent-color: var(--color-lime-200); /* oklch(93.8% 0.127 124.321) */Aplica accent-color: var(--color-lime-200); /* oklch(93.8% 0.127 124.321) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-lime-300accent-color: var(--color-lime-300); /* oklch(89.7% 0.196 126.665) */Aplica accent-color: var(--color-lime-300); /* oklch(89.7% 0.196 126.665) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-lime-400accent-color: var(--color-lime-400); /* oklch(84.1% 0.238 128.85) */Aplica accent-color: var(--color-lime-400); /* oklch(84.1% 0.238 128.85) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-lime-500accent-color: var(--color-lime-500); /* oklch(76.8% 0.233 130.85) */Aplica accent-color: var(--color-lime-500); /* oklch(76.8% 0.233 130.85) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-lime-600accent-color: var(--color-lime-600); /* oklch(64.8% 0.2 131.684) */Aplica accent-color: var(--color-lime-600); /* oklch(64.8% 0.2 131.684) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-lime-700accent-color: var(--color-lime-700); /* oklch(53.2% 0.157 131.589) */Aplica accent-color: var(--color-lime-700); /* oklch(53.2% 0.157 131.589) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-lime-800accent-color: var(--color-lime-800); /* oklch(45.3% 0.124 130.933) */Aplica accent-color: var(--color-lime-800); /* oklch(45.3% 0.124 130.933) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-lime-900accent-color: var(--color-lime-900); /* oklch(40.5% 0.101 131.063) */Aplica accent-color: var(--color-lime-900); /* oklch(40.5% 0.101 131.063) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-lime-950accent-color: var(--color-lime-950); /* oklch(27.4% 0.072 132.109) */Aplica accent-color: var(--color-lime-950); /* oklch(27.4% 0.072 132.109) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-green-50accent-color: var(--color-green-50); /* oklch(98.2% 0.018 155.826) */Aplica accent-color: var(--color-green-50); /* oklch(98.2% 0.018 155.826) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-green-100accent-color: var(--color-green-100); /* oklch(96.2% 0.044 156.743) */Aplica accent-color: var(--color-green-100); /* oklch(96.2% 0.044 156.743) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-green-200accent-color: var(--color-green-200); /* oklch(92.5% 0.084 155.995) */Aplica accent-color: var(--color-green-200); /* oklch(92.5% 0.084 155.995) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-green-300accent-color: var(--color-green-300); /* oklch(87.1% 0.15 154.449) */Aplica accent-color: var(--color-green-300); /* oklch(87.1% 0.15 154.449) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-green-400accent-color: var(--color-green-400); /* oklch(79.2% 0.209 151.711) */Aplica accent-color: var(--color-green-400); /* oklch(79.2% 0.209 151.711) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-green-500accent-color: var(--color-green-500); /* oklch(72.3% 0.219 149.579) */Aplica accent-color: var(--color-green-500); /* oklch(72.3% 0.219 149.579) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-green-600accent-color: var(--color-green-600); /* oklch(62.7% 0.194 149.214) */Aplica accent-color: var(--color-green-600); /* oklch(62.7% 0.194 149.214) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-green-700accent-color: var(--color-green-700); /* oklch(52.7% 0.154 150.069) */Aplica accent-color: var(--color-green-700); /* oklch(52.7% 0.154 150.069) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-green-800accent-color: var(--color-green-800); /* oklch(44.8% 0.119 151.328) */Aplica accent-color: var(--color-green-800); /* oklch(44.8% 0.119 151.328) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-green-900accent-color: var(--color-green-900); /* oklch(39.3% 0.095 152.535) */Aplica accent-color: var(--color-green-900); /* oklch(39.3% 0.095 152.535) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-green-950accent-color: var(--color-green-950); /* oklch(26.6% 0.065 152.934) */Aplica accent-color: var(--color-green-950); /* oklch(26.6% 0.065 152.934) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-emerald-50accent-color: var(--color-emerald-50); /* oklch(97.9% 0.021 166.113) */Aplica accent-color: var(--color-emerald-50); /* oklch(97.9% 0.021 166.113) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-emerald-100accent-color: var(--color-emerald-100); /* oklch(95% 0.052 163.051) */Aplica accent-color: var(--color-emerald-100); /* oklch(95% 0.052 163.051) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-emerald-200accent-color: var(--color-emerald-200); /* oklch(90.5% 0.093 164.15) */Aplica accent-color: var(--color-emerald-200); /* oklch(90.5% 0.093 164.15) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-emerald-300accent-color: var(--color-emerald-300); /* oklch(84.5% 0.143 164.978) */Aplica accent-color: var(--color-emerald-300); /* oklch(84.5% 0.143 164.978) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-emerald-400accent-color: var(--color-emerald-400); /* oklch(76.5% 0.177 163.223) */Aplica accent-color: var(--color-emerald-400); /* oklch(76.5% 0.177 163.223) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-emerald-500accent-color: var(--color-emerald-500); /* oklch(69.6% 0.17 162.48) */Aplica accent-color: var(--color-emerald-500); /* oklch(69.6% 0.17 162.48) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-emerald-600accent-color: var(--color-emerald-600); /* oklch(59.6% 0.145 163.225) */Aplica accent-color: var(--color-emerald-600); /* oklch(59.6% 0.145 163.225) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-emerald-700accent-color: var(--color-emerald-700); /* oklch(50.8% 0.118 165.612) */Aplica accent-color: var(--color-emerald-700); /* oklch(50.8% 0.118 165.612) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-emerald-800accent-color: var(--color-emerald-800); /* oklch(43.2% 0.095 166.913) */Aplica accent-color: var(--color-emerald-800); /* oklch(43.2% 0.095 166.913) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-emerald-900accent-color: var(--color-emerald-900); /* oklch(37.8% 0.077 168.94) */Aplica accent-color: var(--color-emerald-900); /* oklch(37.8% 0.077 168.94) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-emerald-950accent-color: var(--color-emerald-950); /* oklch(26.2% 0.051 172.552) */Aplica accent-color: var(--color-emerald-950); /* oklch(26.2% 0.051 172.552) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-teal-50accent-color: var(--color-teal-50); /* oklch(98.4% 0.014 180.72) */Aplica accent-color: var(--color-teal-50); /* oklch(98.4% 0.014 180.72) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-teal-100accent-color: var(--color-teal-100); /* oklch(95.3% 0.051 180.801) */Aplica accent-color: var(--color-teal-100); /* oklch(95.3% 0.051 180.801) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-teal-200accent-color: var(--color-teal-200); /* oklch(91% 0.096 180.426) */Aplica accent-color: var(--color-teal-200); /* oklch(91% 0.096 180.426) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-teal-300accent-color: var(--color-teal-300); /* oklch(85.5% 0.138 181.071) */Aplica accent-color: var(--color-teal-300); /* oklch(85.5% 0.138 181.071) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-teal-400accent-color: var(--color-teal-400); /* oklch(77.7% 0.152 181.912) */Aplica accent-color: var(--color-teal-400); /* oklch(77.7% 0.152 181.912) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-teal-500accent-color: var(--color-teal-500); /* oklch(70.4% 0.14 182.503) */Aplica accent-color: var(--color-teal-500); /* oklch(70.4% 0.14 182.503) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-teal-600accent-color: var(--color-teal-600); /* oklch(60% 0.118 184.704) */Aplica accent-color: var(--color-teal-600); /* oklch(60% 0.118 184.704) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-teal-700accent-color: var(--color-teal-700); /* oklch(51.1% 0.096 186.391) */Aplica accent-color: var(--color-teal-700); /* oklch(51.1% 0.096 186.391) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-teal-800accent-color: var(--color-teal-800); /* oklch(43.7% 0.078 188.216) */Aplica accent-color: var(--color-teal-800); /* oklch(43.7% 0.078 188.216) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-teal-900accent-color: var(--color-teal-900); /* oklch(38.6% 0.063 188.416) */Aplica accent-color: var(--color-teal-900); /* oklch(38.6% 0.063 188.416) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-teal-950accent-color: var(--color-teal-950); /* oklch(27.7% 0.046 192.524) */Aplica accent-color: var(--color-teal-950); /* oklch(27.7% 0.046 192.524) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-cyan-50accent-color: var(--color-cyan-50); /* oklch(98.4% 0.019 200.873) */Aplica accent-color: var(--color-cyan-50); /* oklch(98.4% 0.019 200.873) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-cyan-100accent-color: var(--color-cyan-100); /* oklch(95.6% 0.045 203.388) */Aplica accent-color: var(--color-cyan-100); /* oklch(95.6% 0.045 203.388) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-cyan-200accent-color: var(--color-cyan-200); /* oklch(91.7% 0.08 205.041) */Aplica accent-color: var(--color-cyan-200); /* oklch(91.7% 0.08 205.041) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-cyan-300accent-color: var(--color-cyan-300); /* oklch(86.5% 0.127 207.078) */Aplica accent-color: var(--color-cyan-300); /* oklch(86.5% 0.127 207.078) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-cyan-400accent-color: var(--color-cyan-400); /* oklch(78.9% 0.154 211.53) */Aplica accent-color: var(--color-cyan-400); /* oklch(78.9% 0.154 211.53) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-cyan-500accent-color: var(--color-cyan-500); /* oklch(71.5% 0.143 215.221) */Aplica accent-color: var(--color-cyan-500); /* oklch(71.5% 0.143 215.221) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-cyan-600accent-color: var(--color-cyan-600); /* oklch(60.9% 0.126 221.723) */Aplica accent-color: var(--color-cyan-600); /* oklch(60.9% 0.126 221.723) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-cyan-700accent-color: var(--color-cyan-700); /* oklch(52% 0.105 223.128) */Aplica accent-color: var(--color-cyan-700); /* oklch(52% 0.105 223.128) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-cyan-800accent-color: var(--color-cyan-800); /* oklch(45% 0.085 224.283) */Aplica accent-color: var(--color-cyan-800); /* oklch(45% 0.085 224.283) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-cyan-900accent-color: var(--color-cyan-900); /* oklch(39.8% 0.07 227.392) */Aplica accent-color: var(--color-cyan-900); /* oklch(39.8% 0.07 227.392) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-cyan-950accent-color: var(--color-cyan-950); /* oklch(30.2% 0.056 229.695) */Aplica accent-color: var(--color-cyan-950); /* oklch(30.2% 0.056 229.695) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-sky-50accent-color: var(--color-sky-50); /* oklch(97.7% 0.013 236.62) */Aplica accent-color: var(--color-sky-50); /* oklch(97.7% 0.013 236.62) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-sky-100accent-color: var(--color-sky-100); /* oklch(95.1% 0.026 236.824) */Aplica accent-color: var(--color-sky-100); /* oklch(95.1% 0.026 236.824) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-sky-200accent-color: var(--color-sky-200); /* oklch(90.1% 0.058 230.902) */Aplica accent-color: var(--color-sky-200); /* oklch(90.1% 0.058 230.902) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-sky-300accent-color: var(--color-sky-300); /* oklch(82.8% 0.111 230.318) */Aplica accent-color: var(--color-sky-300); /* oklch(82.8% 0.111 230.318) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-sky-400accent-color: var(--color-sky-400); /* oklch(74.6% 0.16 232.661) */Aplica accent-color: var(--color-sky-400); /* oklch(74.6% 0.16 232.661) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-sky-500accent-color: var(--color-sky-500); /* oklch(68.5% 0.169 237.323) */Aplica accent-color: var(--color-sky-500); /* oklch(68.5% 0.169 237.323) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-sky-600accent-color: var(--color-sky-600); /* oklch(58.8% 0.158 241.966) */Aplica accent-color: var(--color-sky-600); /* oklch(58.8% 0.158 241.966) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-sky-700accent-color: var(--color-sky-700); /* oklch(50% 0.134 242.749) */Aplica accent-color: var(--color-sky-700); /* oklch(50% 0.134 242.749) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-sky-800accent-color: var(--color-sky-800); /* oklch(44.3% 0.11 240.79) */Aplica accent-color: var(--color-sky-800); /* oklch(44.3% 0.11 240.79) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-sky-900accent-color: var(--color-sky-900); /* oklch(39.1% 0.09 240.876) */Aplica accent-color: var(--color-sky-900); /* oklch(39.1% 0.09 240.876) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-sky-950accent-color: var(--color-sky-950); /* oklch(29.3% 0.066 243.157) */Aplica accent-color: var(--color-sky-950); /* oklch(29.3% 0.066 243.157) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-blue-50accent-color: var(--color-blue-50); /* oklch(97% 0.014 254.604) */Aplica accent-color: var(--color-blue-50); /* oklch(97% 0.014 254.604) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-blue-100accent-color: var(--color-blue-100); /* oklch(93.2% 0.032 255.585) */Aplica accent-color: var(--color-blue-100); /* oklch(93.2% 0.032 255.585) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-blue-200accent-color: var(--color-blue-200); /* oklch(88.2% 0.059 254.128) */Aplica accent-color: var(--color-blue-200); /* oklch(88.2% 0.059 254.128) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-blue-300accent-color: var(--color-blue-300); /* oklch(80.9% 0.105 251.813) */Aplica accent-color: var(--color-blue-300); /* oklch(80.9% 0.105 251.813) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-blue-400accent-color: var(--color-blue-400); /* oklch(70.7% 0.165 254.624) */Aplica accent-color: var(--color-blue-400); /* oklch(70.7% 0.165 254.624) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-blue-500accent-color: var(--color-blue-500); /* oklch(62.3% 0.214 259.815) */Aplica accent-color: var(--color-blue-500); /* oklch(62.3% 0.214 259.815) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-blue-600accent-color: var(--color-blue-600); /* oklch(54.6% 0.245 262.881) */Aplica accent-color: var(--color-blue-600); /* oklch(54.6% 0.245 262.881) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-blue-700accent-color: var(--color-blue-700); /* oklch(48.8% 0.243 264.376) */Aplica accent-color: var(--color-blue-700); /* oklch(48.8% 0.243 264.376) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-blue-800accent-color: var(--color-blue-800); /* oklch(42.4% 0.199 265.638) */Aplica accent-color: var(--color-blue-800); /* oklch(42.4% 0.199 265.638) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-blue-900accent-color: var(--color-blue-900); /* oklch(37.9% 0.146 265.522) */Aplica accent-color: var(--color-blue-900); /* oklch(37.9% 0.146 265.522) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-blue-950accent-color: var(--color-blue-950); /* oklch(28.2% 0.091 267.935) */Aplica accent-color: var(--color-blue-950); /* oklch(28.2% 0.091 267.935) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-indigo-50accent-color: var(--color-indigo-50); /* oklch(96.2% 0.018 272.314) */Aplica accent-color: var(--color-indigo-50); /* oklch(96.2% 0.018 272.314) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-indigo-100accent-color: var(--color-indigo-100); /* oklch(93% 0.034 272.788) */Aplica accent-color: var(--color-indigo-100); /* oklch(93% 0.034 272.788) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-indigo-200accent-color: var(--color-indigo-200); /* oklch(87% 0.065 274.039) */Aplica accent-color: var(--color-indigo-200); /* oklch(87% 0.065 274.039) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-indigo-300accent-color: var(--color-indigo-300); /* oklch(78.5% 0.115 274.713) */Aplica accent-color: var(--color-indigo-300); /* oklch(78.5% 0.115 274.713) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-indigo-400accent-color: var(--color-indigo-400); /* oklch(67.3% 0.182 276.935) */Aplica accent-color: var(--color-indigo-400); /* oklch(67.3% 0.182 276.935) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-indigo-500accent-color: var(--color-indigo-500); /* oklch(58.5% 0.233 277.117) */Aplica accent-color: var(--color-indigo-500); /* oklch(58.5% 0.233 277.117) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-indigo-600accent-color: var(--color-indigo-600); /* oklch(51.1% 0.262 276.966) */Aplica accent-color: var(--color-indigo-600); /* oklch(51.1% 0.262 276.966) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-indigo-700accent-color: var(--color-indigo-700); /* oklch(45.7% 0.24 277.023) */Aplica accent-color: var(--color-indigo-700); /* oklch(45.7% 0.24 277.023) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-indigo-800accent-color: var(--color-indigo-800); /* oklch(39.8% 0.195 277.366) */Aplica accent-color: var(--color-indigo-800); /* oklch(39.8% 0.195 277.366) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-indigo-900accent-color: var(--color-indigo-900); /* oklch(35.9% 0.144 278.697) */Aplica accent-color: var(--color-indigo-900); /* oklch(35.9% 0.144 278.697) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-indigo-950accent-color: var(--color-indigo-950); /* oklch(25.7% 0.09 281.288) */Aplica accent-color: var(--color-indigo-950); /* oklch(25.7% 0.09 281.288) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-violet-50accent-color: var(--color-violet-50); /* oklch(96.9% 0.016 293.756) */Aplica accent-color: var(--color-violet-50); /* oklch(96.9% 0.016 293.756) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-violet-100accent-color: var(--color-violet-100); /* oklch(94.3% 0.029 294.588) */Aplica accent-color: var(--color-violet-100); /* oklch(94.3% 0.029 294.588) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-violet-200accent-color: var(--color-violet-200); /* oklch(89.4% 0.057 293.283) */Aplica accent-color: var(--color-violet-200); /* oklch(89.4% 0.057 293.283) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-violet-300accent-color: var(--color-violet-300); /* oklch(81.1% 0.111 293.571) */Aplica accent-color: var(--color-violet-300); /* oklch(81.1% 0.111 293.571) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-violet-400accent-color: var(--color-violet-400); /* oklch(70.2% 0.183 293.541) */Aplica accent-color: var(--color-violet-400); /* oklch(70.2% 0.183 293.541) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-violet-500accent-color: var(--color-violet-500); /* oklch(60.6% 0.25 292.717) */Aplica accent-color: var(--color-violet-500); /* oklch(60.6% 0.25 292.717) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-violet-600accent-color: var(--color-violet-600); /* oklch(54.1% 0.281 293.009) */Aplica accent-color: var(--color-violet-600); /* oklch(54.1% 0.281 293.009) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-violet-700accent-color: var(--color-violet-700); /* oklch(49.1% 0.27 292.581) */Aplica accent-color: var(--color-violet-700); /* oklch(49.1% 0.27 292.581) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-violet-800accent-color: var(--color-violet-800); /* oklch(43.2% 0.232 292.759) */Aplica accent-color: var(--color-violet-800); /* oklch(43.2% 0.232 292.759) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-violet-900accent-color: var(--color-violet-900); /* oklch(38% 0.189 293.745) */Aplica accent-color: var(--color-violet-900); /* oklch(38% 0.189 293.745) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-violet-950accent-color: var(--color-violet-950); /* oklch(28.3% 0.141 291.089) */Aplica accent-color: var(--color-violet-950); /* oklch(28.3% 0.141 291.089) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-purple-50accent-color: var(--color-purple-50); /* oklch(97.7% 0.014 308.299) */Aplica accent-color: var(--color-purple-50); /* oklch(97.7% 0.014 308.299) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-purple-100accent-color: var(--color-purple-100); /* oklch(94.6% 0.033 307.174) */Aplica accent-color: var(--color-purple-100); /* oklch(94.6% 0.033 307.174) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-purple-200accent-color: var(--color-purple-200); /* oklch(90.2% 0.063 306.703) */Aplica accent-color: var(--color-purple-200); /* oklch(90.2% 0.063 306.703) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-purple-300accent-color: var(--color-purple-300); /* oklch(82.7% 0.119 306.383) */Aplica accent-color: var(--color-purple-300); /* oklch(82.7% 0.119 306.383) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-purple-400accent-color: var(--color-purple-400); /* oklch(71.4% 0.203 305.504) */Aplica accent-color: var(--color-purple-400); /* oklch(71.4% 0.203 305.504) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-purple-500accent-color: var(--color-purple-500); /* oklch(62.7% 0.265 303.9) */Aplica accent-color: var(--color-purple-500); /* oklch(62.7% 0.265 303.9) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-purple-600accent-color: var(--color-purple-600); /* oklch(55.8% 0.288 302.321) */Aplica accent-color: var(--color-purple-600); /* oklch(55.8% 0.288 302.321) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-purple-700accent-color: var(--color-purple-700); /* oklch(49.6% 0.265 301.924) */Aplica accent-color: var(--color-purple-700); /* oklch(49.6% 0.265 301.924) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-purple-800accent-color: var(--color-purple-800); /* oklch(43.8% 0.218 303.724) */Aplica accent-color: var(--color-purple-800); /* oklch(43.8% 0.218 303.724) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-purple-900accent-color: var(--color-purple-900); /* oklch(38.1% 0.176 304.987) */Aplica accent-color: var(--color-purple-900); /* oklch(38.1% 0.176 304.987) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-purple-950accent-color: var(--color-purple-950); /* oklch(29.1% 0.149 302.717) */Aplica accent-color: var(--color-purple-950); /* oklch(29.1% 0.149 302.717) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-fuchsia-50accent-color: var(--color-fuchsia-50); /* oklch(97.7% 0.017 320.058) */Aplica accent-color: var(--color-fuchsia-50); /* oklch(97.7% 0.017 320.058) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-fuchsia-100accent-color: var(--color-fuchsia-100); /* oklch(95.2% 0.037 318.852) */Aplica accent-color: var(--color-fuchsia-100); /* oklch(95.2% 0.037 318.852) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-fuchsia-200accent-color: var(--color-fuchsia-200); /* oklch(90.3% 0.076 319.62) */Aplica accent-color: var(--color-fuchsia-200); /* oklch(90.3% 0.076 319.62) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-fuchsia-300accent-color: var(--color-fuchsia-300); /* oklch(83.3% 0.145 321.434) */Aplica accent-color: var(--color-fuchsia-300); /* oklch(83.3% 0.145 321.434) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-fuchsia-400accent-color: var(--color-fuchsia-400); /* oklch(74% 0.238 322.16) */Aplica accent-color: var(--color-fuchsia-400); /* oklch(74% 0.238 322.16) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-fuchsia-500accent-color: var(--color-fuchsia-500); /* oklch(66.7% 0.295 322.15) */Aplica accent-color: var(--color-fuchsia-500); /* oklch(66.7% 0.295 322.15) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-fuchsia-600accent-color: var(--color-fuchsia-600); /* oklch(59.1% 0.293 322.896) */Aplica accent-color: var(--color-fuchsia-600); /* oklch(59.1% 0.293 322.896) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-fuchsia-700accent-color: var(--color-fuchsia-700); /* oklch(51.8% 0.253 323.949) */Aplica accent-color: var(--color-fuchsia-700); /* oklch(51.8% 0.253 323.949) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-fuchsia-800accent-color: var(--color-fuchsia-800); /* oklch(45.2% 0.211 324.591) */Aplica accent-color: var(--color-fuchsia-800); /* oklch(45.2% 0.211 324.591) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-fuchsia-900accent-color: var(--color-fuchsia-900); /* oklch(40.1% 0.17 325.612) */Aplica accent-color: var(--color-fuchsia-900); /* oklch(40.1% 0.17 325.612) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-fuchsia-950accent-color: var(--color-fuchsia-950); /* oklch(29.3% 0.136 325.661) */Aplica accent-color: var(--color-fuchsia-950); /* oklch(29.3% 0.136 325.661) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-pink-50accent-color: var(--color-pink-50); /* oklch(97.1% 0.014 343.198) */Aplica accent-color: var(--color-pink-50); /* oklch(97.1% 0.014 343.198) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-pink-100accent-color: var(--color-pink-100); /* oklch(94.8% 0.028 342.258) */Aplica accent-color: var(--color-pink-100); /* oklch(94.8% 0.028 342.258) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-pink-200accent-color: var(--color-pink-200); /* oklch(89.9% 0.061 343.231) */Aplica accent-color: var(--color-pink-200); /* oklch(89.9% 0.061 343.231) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-pink-300accent-color: var(--color-pink-300); /* oklch(82.3% 0.12 346.018) */Aplica accent-color: var(--color-pink-300); /* oklch(82.3% 0.12 346.018) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-pink-400accent-color: var(--color-pink-400); /* oklch(71.8% 0.202 349.761) */Aplica accent-color: var(--color-pink-400); /* oklch(71.8% 0.202 349.761) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-pink-500accent-color: var(--color-pink-500); /* oklch(65.6% 0.241 354.308) */Aplica accent-color: var(--color-pink-500); /* oklch(65.6% 0.241 354.308) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-pink-600accent-color: var(--color-pink-600); /* oklch(59.2% 0.249 0.584) */Aplica accent-color: var(--color-pink-600); /* oklch(59.2% 0.249 0.584) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-pink-700accent-color: var(--color-pink-700); /* oklch(52.5% 0.223 3.958) */Aplica accent-color: var(--color-pink-700); /* oklch(52.5% 0.223 3.958) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-pink-800accent-color: var(--color-pink-800); /* oklch(45.9% 0.187 3.815) */Aplica accent-color: var(--color-pink-800); /* oklch(45.9% 0.187 3.815) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-pink-900accent-color: var(--color-pink-900); /* oklch(40.8% 0.153 2.432) */Aplica accent-color: var(--color-pink-900); /* oklch(40.8% 0.153 2.432) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-pink-950accent-color: var(--color-pink-950); /* oklch(28.4% 0.109 3.907) */Aplica accent-color: var(--color-pink-950); /* oklch(28.4% 0.109 3.907) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-rose-50accent-color: var(--color-rose-50); /* oklch(96.9% 0.015 12.422) */Aplica accent-color: var(--color-rose-50); /* oklch(96.9% 0.015 12.422) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-rose-100accent-color: var(--color-rose-100); /* oklch(94.1% 0.03 12.58) */Aplica accent-color: var(--color-rose-100); /* oklch(94.1% 0.03 12.58) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-rose-200accent-color: var(--color-rose-200); /* oklch(89.2% 0.058 10.001) */Aplica accent-color: var(--color-rose-200); /* oklch(89.2% 0.058 10.001) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-rose-300accent-color: var(--color-rose-300); /* oklch(81% 0.117 11.638) */Aplica accent-color: var(--color-rose-300); /* oklch(81% 0.117 11.638) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-rose-400accent-color: var(--color-rose-400); /* oklch(71.2% 0.194 13.428) */Aplica accent-color: var(--color-rose-400); /* oklch(71.2% 0.194 13.428) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-rose-500accent-color: var(--color-rose-500); /* oklch(64.5% 0.246 16.439) */Aplica accent-color: var(--color-rose-500); /* oklch(64.5% 0.246 16.439) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-rose-600accent-color: var(--color-rose-600); /* oklch(58.6% 0.253 17.585) */Aplica accent-color: var(--color-rose-600); /* oklch(58.6% 0.253 17.585) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-rose-700accent-color: var(--color-rose-700); /* oklch(51.4% 0.222 16.935) */Aplica accent-color: var(--color-rose-700); /* oklch(51.4% 0.222 16.935) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-rose-800accent-color: var(--color-rose-800); /* oklch(45.5% 0.188 13.697) */Aplica accent-color: var(--color-rose-800); /* oklch(45.5% 0.188 13.697) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-rose-900accent-color: var(--color-rose-900); /* oklch(41% 0.159 10.272) */Aplica accent-color: var(--color-rose-900); /* oklch(41% 0.159 10.272) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-rose-950accent-color: var(--color-rose-950); /* oklch(27.1% 0.105 12.094) */Aplica accent-color: var(--color-rose-950); /* oklch(27.1% 0.105 12.094) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-slate-50accent-color: var(--color-slate-50); /* oklch(98.4% 0.003 247.858) */Aplica accent-color: var(--color-slate-50); /* oklch(98.4% 0.003 247.858) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-slate-100accent-color: var(--color-slate-100); /* oklch(96.8% 0.007 247.896) */Aplica accent-color: var(--color-slate-100); /* oklch(96.8% 0.007 247.896) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-slate-200accent-color: var(--color-slate-200); /* oklch(92.9% 0.013 255.508) */Aplica accent-color: var(--color-slate-200); /* oklch(92.9% 0.013 255.508) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-slate-300accent-color: var(--color-slate-300); /* oklch(86.9% 0.022 252.894) */Aplica accent-color: var(--color-slate-300); /* oklch(86.9% 0.022 252.894) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-slate-400accent-color: var(--color-slate-400); /* oklch(70.4% 0.04 256.788) */Aplica accent-color: var(--color-slate-400); /* oklch(70.4% 0.04 256.788) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-slate-500accent-color: var(--color-slate-500); /* oklch(55.4% 0.046 257.417) */Aplica accent-color: var(--color-slate-500); /* oklch(55.4% 0.046 257.417) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-slate-600accent-color: var(--color-slate-600); /* oklch(44.6% 0.043 257.281) */Aplica accent-color: var(--color-slate-600); /* oklch(44.6% 0.043 257.281) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-slate-700accent-color: var(--color-slate-700); /* oklch(37.2% 0.044 257.287) */Aplica accent-color: var(--color-slate-700); /* oklch(37.2% 0.044 257.287) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-slate-800accent-color: var(--color-slate-800); /* oklch(27.9% 0.041 260.031) */Aplica accent-color: var(--color-slate-800); /* oklch(27.9% 0.041 260.031) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-slate-900accent-color: var(--color-slate-900); /* oklch(20.8% 0.042 265.755) */Aplica accent-color: var(--color-slate-900); /* oklch(20.8% 0.042 265.755) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-slate-950accent-color: var(--color-slate-950); /* oklch(12.9% 0.042 264.695) */Aplica accent-color: var(--color-slate-950); /* oklch(12.9% 0.042 264.695) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-gray-50accent-color: var(--color-gray-50); /* oklch(98.5% 0.002 247.839) */Aplica accent-color: var(--color-gray-50); /* oklch(98.5% 0.002 247.839) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-gray-100accent-color: var(--color-gray-100); /* oklch(96.7% 0.003 264.542) */Aplica accent-color: var(--color-gray-100); /* oklch(96.7% 0.003 264.542) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-gray-200accent-color: var(--color-gray-200); /* oklch(92.8% 0.006 264.531) */Aplica accent-color: var(--color-gray-200); /* oklch(92.8% 0.006 264.531) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-gray-300accent-color: var(--color-gray-300); /* oklch(87.2% 0.01 258.338) */Aplica accent-color: var(--color-gray-300); /* oklch(87.2% 0.01 258.338) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-gray-400accent-color: var(--color-gray-400); /* oklch(70.7% 0.022 261.325) */Aplica accent-color: var(--color-gray-400); /* oklch(70.7% 0.022 261.325) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-gray-500accent-color: var(--color-gray-500); /* oklch(55.1% 0.027 264.364) */Aplica accent-color: var(--color-gray-500); /* oklch(55.1% 0.027 264.364) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-gray-600accent-color: var(--color-gray-600); /* oklch(44.6% 0.03 256.802) */Aplica accent-color: var(--color-gray-600); /* oklch(44.6% 0.03 256.802) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-gray-700accent-color: var(--color-gray-700); /* oklch(37.3% 0.034 259.733) */Aplica accent-color: var(--color-gray-700); /* oklch(37.3% 0.034 259.733) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-gray-800accent-color: var(--color-gray-800); /* oklch(27.8% 0.033 256.848) */Aplica accent-color: var(--color-gray-800); /* oklch(27.8% 0.033 256.848) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-gray-900accent-color: var(--color-gray-900); /* oklch(21% 0.034 264.665) */Aplica accent-color: var(--color-gray-900); /* oklch(21% 0.034 264.665) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-gray-950accent-color: var(--color-gray-950); /* oklch(13% 0.028 261.692) */Aplica accent-color: var(--color-gray-950); /* oklch(13% 0.028 261.692) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-zinc-50accent-color: var(--color-zinc-50); /* oklch(98.5% 0 0) */Aplica accent-color: var(--color-zinc-50); /* oklch(98.5% 0 0) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-zinc-100accent-color: var(--color-zinc-100); /* oklch(96.7% 0.001 286.375) */Aplica accent-color: var(--color-zinc-100); /* oklch(96.7% 0.001 286.375) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-zinc-200accent-color: var(--color-zinc-200); /* oklch(92% 0.004 286.32) */Aplica accent-color: var(--color-zinc-200); /* oklch(92% 0.004 286.32) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-zinc-300accent-color: var(--color-zinc-300); /* oklch(87.1% 0.006 286.286) */Aplica accent-color: var(--color-zinc-300); /* oklch(87.1% 0.006 286.286) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-zinc-400accent-color: var(--color-zinc-400); /* oklch(70.5% 0.015 286.067) */Aplica accent-color: var(--color-zinc-400); /* oklch(70.5% 0.015 286.067) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-zinc-500accent-color: var(--color-zinc-500); /* oklch(55.2% 0.016 285.938) */Aplica accent-color: var(--color-zinc-500); /* oklch(55.2% 0.016 285.938) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-zinc-600accent-color: var(--color-zinc-600); /* oklch(44.2% 0.017 285.786) */Aplica accent-color: var(--color-zinc-600); /* oklch(44.2% 0.017 285.786) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-zinc-700accent-color: var(--color-zinc-700); /* oklch(37% 0.013 285.805) */Aplica accent-color: var(--color-zinc-700); /* oklch(37% 0.013 285.805) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-zinc-800accent-color: var(--color-zinc-800); /* oklch(27.4% 0.006 286.033) */Aplica accent-color: var(--color-zinc-800); /* oklch(27.4% 0.006 286.033) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-zinc-900accent-color: var(--color-zinc-900); /* oklch(21% 0.006 285.885) */Aplica accent-color: var(--color-zinc-900); /* oklch(21% 0.006 285.885) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-zinc-950accent-color: var(--color-zinc-950); /* oklch(14.1% 0.005 285.823) */Aplica accent-color: var(--color-zinc-950); /* oklch(14.1% 0.005 285.823) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-neutral-50accent-color: var(--color-neutral-50); /* oklch(98.5% 0 0) */Aplica accent-color: var(--color-neutral-50); /* oklch(98.5% 0 0) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-neutral-100accent-color: var(--color-neutral-100); /* oklch(97% 0 0) */Aplica accent-color: var(--color-neutral-100); /* oklch(97% 0 0) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-neutral-200accent-color: var(--color-neutral-200); /* oklch(92.2% 0 0) */Aplica accent-color: var(--color-neutral-200); /* oklch(92.2% 0 0) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-neutral-300accent-color: var(--color-neutral-300); /* oklch(87% 0 0) */Aplica accent-color: var(--color-neutral-300); /* oklch(87% 0 0) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-neutral-400accent-color: var(--color-neutral-400); /* oklch(70.8% 0 0) */Aplica accent-color: var(--color-neutral-400); /* oklch(70.8% 0 0) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-neutral-500accent-color: var(--color-neutral-500); /* oklch(55.6% 0 0) */Aplica accent-color: var(--color-neutral-500); /* oklch(55.6% 0 0) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-neutral-600accent-color: var(--color-neutral-600); /* oklch(43.9% 0 0) */Aplica accent-color: var(--color-neutral-600); /* oklch(43.9% 0 0) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-neutral-700accent-color: var(--color-neutral-700); /* oklch(37.1% 0 0) */Aplica accent-color: var(--color-neutral-700); /* oklch(37.1% 0 0) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-neutral-800accent-color: var(--color-neutral-800); /* oklch(26.9% 0 0) */Aplica accent-color: var(--color-neutral-800); /* oklch(26.9% 0 0) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-neutral-900accent-color: var(--color-neutral-900); /* oklch(20.5% 0 0) */Aplica accent-color: var(--color-neutral-900); /* oklch(20.5% 0 0) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-neutral-950accent-color: var(--color-neutral-950); /* oklch(14.5% 0 0) */Aplica accent-color: var(--color-neutral-950); /* oklch(14.5% 0 0) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-stone-50accent-color: var(--color-stone-50); /* oklch(98.5% 0.001 106.423) */Aplica accent-color: var(--color-stone-50); /* oklch(98.5% 0.001 106.423) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-stone-100accent-color: var(--color-stone-100); /* oklch(97% 0.001 106.424) */Aplica accent-color: var(--color-stone-100); /* oklch(97% 0.001 106.424) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-stone-200accent-color: var(--color-stone-200); /* oklch(92.3% 0.003 48.717) */Aplica accent-color: var(--color-stone-200); /* oklch(92.3% 0.003 48.717) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-stone-300accent-color: var(--color-stone-300); /* oklch(86.9% 0.005 56.366) */Aplica accent-color: var(--color-stone-300); /* oklch(86.9% 0.005 56.366) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-stone-400accent-color: var(--color-stone-400); /* oklch(70.9% 0.01 56.259) */Aplica accent-color: var(--color-stone-400); /* oklch(70.9% 0.01 56.259) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-stone-500accent-color: var(--color-stone-500); /* oklch(55.3% 0.013 58.071) */Aplica accent-color: var(--color-stone-500); /* oklch(55.3% 0.013 58.071) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-stone-600accent-color: var(--color-stone-600); /* oklch(44.4% 0.011 73.639) */Aplica accent-color: var(--color-stone-600); /* oklch(44.4% 0.011 73.639) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-stone-700accent-color: var(--color-stone-700); /* oklch(37.4% 0.01 67.558) */Aplica accent-color: var(--color-stone-700); /* oklch(37.4% 0.01 67.558) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-stone-800accent-color: var(--color-stone-800); /* oklch(26.8% 0.007 34.298) */Aplica accent-color: var(--color-stone-800); /* oklch(26.8% 0.007 34.298) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-stone-900accent-color: var(--color-stone-900); /* oklch(21.6% 0.006 56.043) */Aplica accent-color: var(--color-stone-900); /* oklch(21.6% 0.006 56.043) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-stone-950accent-color: var(--color-stone-950); /* oklch(14.7% 0.004 49.25) */Aplica accent-color: var(--color-stone-950); /* oklch(14.7% 0.004 49.25) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-mauve-50accent-color: var(--color-mauve-50); /* oklch(98.5% 0 0) */Aplica accent-color: var(--color-mauve-50); /* oklch(98.5% 0 0) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-mauve-100accent-color: var(--color-mauve-100); /* oklch(96% 0.003 325.6) */Aplica accent-color: var(--color-mauve-100); /* oklch(96% 0.003 325.6) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-mauve-200accent-color: var(--color-mauve-200); /* oklch(92.2% 0.005 325.62) */Aplica accent-color: var(--color-mauve-200); /* oklch(92.2% 0.005 325.62) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-mauve-300accent-color: var(--color-mauve-300); /* oklch(86.5% 0.012 325.68) */Aplica accent-color: var(--color-mauve-300); /* oklch(86.5% 0.012 325.68) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-mauve-400accent-color: var(--color-mauve-400); /* oklch(71.1% 0.019 323.02) */Aplica accent-color: var(--color-mauve-400); /* oklch(71.1% 0.019 323.02) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-mauve-500accent-color: var(--color-mauve-500); /* oklch(54.2% 0.034 322.5) */Aplica accent-color: var(--color-mauve-500); /* oklch(54.2% 0.034 322.5) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-mauve-600accent-color: var(--color-mauve-600); /* oklch(43.5% 0.029 321.78) */Aplica accent-color: var(--color-mauve-600); /* oklch(43.5% 0.029 321.78) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-mauve-700accent-color: var(--color-mauve-700); /* oklch(36.4% 0.029 323.89) */Aplica accent-color: var(--color-mauve-700); /* oklch(36.4% 0.029 323.89) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-mauve-800accent-color: var(--color-mauve-800); /* oklch(26.3% 0.024 320.12) */Aplica accent-color: var(--color-mauve-800); /* oklch(26.3% 0.024 320.12) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-mauve-900accent-color: var(--color-mauve-900); /* oklch(21.2% 0.019 322.12) */Aplica accent-color: var(--color-mauve-900); /* oklch(21.2% 0.019 322.12) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-mauve-950accent-color: var(--color-mauve-950); /* oklch(14.5% 0.008 326) */Aplica accent-color: var(--color-mauve-950); /* oklch(14.5% 0.008 326) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-olive-50accent-color: var(--color-olive-50); /* oklch(98.8% 0.003 106.5) */Aplica accent-color: var(--color-olive-50); /* oklch(98.8% 0.003 106.5) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-olive-100accent-color: var(--color-olive-100); /* oklch(96.6% 0.005 106.5) */Aplica accent-color: var(--color-olive-100); /* oklch(96.6% 0.005 106.5) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-olive-200accent-color: var(--color-olive-200); /* oklch(93% 0.007 106.5) */Aplica accent-color: var(--color-olive-200); /* oklch(93% 0.007 106.5) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-olive-300accent-color: var(--color-olive-300); /* oklch(88% 0.011 106.6) */Aplica accent-color: var(--color-olive-300); /* oklch(88% 0.011 106.6) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-olive-400accent-color: var(--color-olive-400); /* oklch(73.7% 0.021 106.9) */Aplica accent-color: var(--color-olive-400); /* oklch(73.7% 0.021 106.9) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-olive-500accent-color: var(--color-olive-500); /* oklch(58% 0.031 107.3) */Aplica accent-color: var(--color-olive-500); /* oklch(58% 0.031 107.3) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-olive-600accent-color: var(--color-olive-600); /* oklch(46.6% 0.025 107.3) */Aplica accent-color: var(--color-olive-600); /* oklch(46.6% 0.025 107.3) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-olive-700accent-color: var(--color-olive-700); /* oklch(39.4% 0.023 107.4) */Aplica accent-color: var(--color-olive-700); /* oklch(39.4% 0.023 107.4) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-olive-800accent-color: var(--color-olive-800); /* oklch(28.6% 0.016 107.4) */Aplica accent-color: var(--color-olive-800); /* oklch(28.6% 0.016 107.4) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-olive-900accent-color: var(--color-olive-900); /* oklch(22.8% 0.013 107.4) */Aplica accent-color: var(--color-olive-900); /* oklch(22.8% 0.013 107.4) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-olive-950accent-color: var(--color-olive-950); /* oklch(15.3% 0.006 107.1) */Aplica accent-color: var(--color-olive-950); /* oklch(15.3% 0.006 107.1) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-mist-50accent-color: var(--color-mist-50); /* oklch(98.7% 0.002 197.1) */Aplica accent-color: var(--color-mist-50); /* oklch(98.7% 0.002 197.1) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-mist-100accent-color: var(--color-mist-100); /* oklch(96.3% 0.002 197.1) */Aplica accent-color: var(--color-mist-100); /* oklch(96.3% 0.002 197.1) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-mist-200accent-color: var(--color-mist-200); /* oklch(92.5% 0.005 214.3) */Aplica accent-color: var(--color-mist-200); /* oklch(92.5% 0.005 214.3) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-mist-300accent-color: var(--color-mist-300); /* oklch(87.2% 0.007 219.6) */Aplica accent-color: var(--color-mist-300); /* oklch(87.2% 0.007 219.6) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-mist-400accent-color: var(--color-mist-400); /* oklch(72.3% 0.014 214.4) */Aplica accent-color: var(--color-mist-400); /* oklch(72.3% 0.014 214.4) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-mist-500accent-color: var(--color-mist-500); /* oklch(56% 0.021 213.5) */Aplica accent-color: var(--color-mist-500); /* oklch(56% 0.021 213.5) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-mist-600accent-color: var(--color-mist-600); /* oklch(45% 0.017 213.2) */Aplica accent-color: var(--color-mist-600); /* oklch(45% 0.017 213.2) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-mist-700accent-color: var(--color-mist-700); /* oklch(37.8% 0.015 216) */Aplica accent-color: var(--color-mist-700); /* oklch(37.8% 0.015 216) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-mist-800accent-color: var(--color-mist-800); /* oklch(27.5% 0.011 216.9) */Aplica accent-color: var(--color-mist-800); /* oklch(27.5% 0.011 216.9) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-mist-900accent-color: var(--color-mist-900); /* oklch(21.8% 0.008 223.9) */Aplica accent-color: var(--color-mist-900); /* oklch(21.8% 0.008 223.9) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-mist-950accent-color: var(--color-mist-950); /* oklch(14.8% 0.004 228.8) */Aplica accent-color: var(--color-mist-950); /* oklch(14.8% 0.004 228.8) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-taupe-50accent-color: var(--color-taupe-50); /* oklch(98.6% 0.002 67.8) */Aplica accent-color: var(--color-taupe-50); /* oklch(98.6% 0.002 67.8) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-taupe-100accent-color: var(--color-taupe-100); /* oklch(96% 0.002 17.2) */Aplica accent-color: var(--color-taupe-100); /* oklch(96% 0.002 17.2) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-taupe-200accent-color: var(--color-taupe-200); /* oklch(92.2% 0.005 34.3) */Aplica accent-color: var(--color-taupe-200); /* oklch(92.2% 0.005 34.3) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-taupe-300accent-color: var(--color-taupe-300); /* oklch(86.8% 0.007 39.5) */Aplica accent-color: var(--color-taupe-300); /* oklch(86.8% 0.007 39.5) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-taupe-400accent-color: var(--color-taupe-400); /* oklch(71.4% 0.014 41.2) */Aplica accent-color: var(--color-taupe-400); /* oklch(71.4% 0.014 41.2) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-taupe-500accent-color: var(--color-taupe-500); /* oklch(54.7% 0.021 43.1) */Aplica accent-color: var(--color-taupe-500); /* oklch(54.7% 0.021 43.1) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-taupe-600accent-color: var(--color-taupe-600); /* oklch(43.8% 0.017 39.3) */Aplica accent-color: var(--color-taupe-600); /* oklch(43.8% 0.017 39.3) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-taupe-700accent-color: var(--color-taupe-700); /* oklch(36.7% 0.016 35.7) */Aplica accent-color: var(--color-taupe-700); /* oklch(36.7% 0.016 35.7) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-taupe-800accent-color: var(--color-taupe-800); /* oklch(26.8% 0.011 36.5) */Aplica accent-color: var(--color-taupe-800); /* oklch(26.8% 0.011 36.5) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-taupe-900accent-color: var(--color-taupe-900); /* oklch(21.4% 0.009 43.1) */Aplica accent-color: var(--color-taupe-900); /* oklch(21.4% 0.009 43.1) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-taupe-950accent-color: var(--color-taupe-950); /* oklch(14.7% 0.004 49.3) */Aplica accent-color: var(--color-taupe-950); /* oklch(14.7% 0.004 49.3) */ al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-( <custom-property> )accent-color: var( <custom-property> );Aplica accent-color: var( <custom-property> ); al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.
accent-[ <value> ]accent-color: <value> ;Aplica accent-color: <value> ; al elemento; úsalo cuando necesites ajustar accent-color con esta utilidad.

apariencia

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

Utilidades para suprimir el estilo de control de formulario nativo.

Clase de UtilidadPropiedad CSSExplicación Breve
appearance-noneappearance: none;Aplica appearance: none; al elemento; úsalo cuando necesites ajustar appearance con esta utilidad.
appearance-autoappearance: auto;Aplica appearance: auto; al elemento; úsalo cuando necesites ajustar appearance con esta utilidad.

color de intercalación

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

Utilidades para controlar el color del cursor de entrada de texto.

Clase de UtilidadPropiedad CSSExplicación Breve
caret-inheritcaret-color: inherit;Aplica caret-color: inherit; al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-currentcaret-color: currentColor;Aplica caret-color: currentColor; al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-transparentcaret-color: transparent;Aplica caret-color: transparent; al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-blackcaret-color: var(--color-black); /* #000 */Aplica caret-color: var(--color-black); /* #000 */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-whitecaret-color: var(--color-white); /* #fff */Aplica caret-color: var(--color-white); /* #fff */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-red-50caret-color: var(--color-red-50); /* oklch(97.1% 0.013 17.38) */Aplica caret-color: var(--color-red-50); /* oklch(97.1% 0.013 17.38) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-red-100caret-color: var(--color-red-100); /* oklch(93.6% 0.032 17.717) */Aplica caret-color: var(--color-red-100); /* oklch(93.6% 0.032 17.717) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-red-200caret-color: var(--color-red-200); /* oklch(88.5% 0.062 18.334) */Aplica caret-color: var(--color-red-200); /* oklch(88.5% 0.062 18.334) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-red-300caret-color: var(--color-red-300); /* oklch(80.8% 0.114 19.571) */Aplica caret-color: var(--color-red-300); /* oklch(80.8% 0.114 19.571) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-red-400caret-color: var(--color-red-400); /* oklch(70.4% 0.191 22.216) */Aplica caret-color: var(--color-red-400); /* oklch(70.4% 0.191 22.216) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-red-500caret-color: var(--color-red-500); /* oklch(63.7% 0.237 25.331) */Aplica caret-color: var(--color-red-500); /* oklch(63.7% 0.237 25.331) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-red-600caret-color: var(--color-red-600); /* oklch(57.7% 0.245 27.325) */Aplica caret-color: var(--color-red-600); /* oklch(57.7% 0.245 27.325) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-red-700caret-color: var(--color-red-700); /* oklch(50.5% 0.213 27.518) */Aplica caret-color: var(--color-red-700); /* oklch(50.5% 0.213 27.518) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-red-800caret-color: var(--color-red-800); /* oklch(44.4% 0.177 26.899) */Aplica caret-color: var(--color-red-800); /* oklch(44.4% 0.177 26.899) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-red-900caret-color: var(--color-red-900); /* oklch(39.6% 0.141 25.723) */Aplica caret-color: var(--color-red-900); /* oklch(39.6% 0.141 25.723) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-red-950caret-color: var(--color-red-950); /* oklch(25.8% 0.092 26.042) */Aplica caret-color: var(--color-red-950); /* oklch(25.8% 0.092 26.042) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-orange-50caret-color: var(--color-orange-50); /* oklch(98% 0.016 73.684) */Aplica caret-color: var(--color-orange-50); /* oklch(98% 0.016 73.684) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-orange-100caret-color: var(--color-orange-100); /* oklch(95.4% 0.038 75.164) */Aplica caret-color: var(--color-orange-100); /* oklch(95.4% 0.038 75.164) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-orange-200caret-color: var(--color-orange-200); /* oklch(90.1% 0.076 70.697) */Aplica caret-color: var(--color-orange-200); /* oklch(90.1% 0.076 70.697) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-orange-300caret-color: var(--color-orange-300); /* oklch(83.7% 0.128 66.29) */Aplica caret-color: var(--color-orange-300); /* oklch(83.7% 0.128 66.29) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-orange-400caret-color: var(--color-orange-400); /* oklch(75% 0.183 55.934) */Aplica caret-color: var(--color-orange-400); /* oklch(75% 0.183 55.934) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-orange-500caret-color: var(--color-orange-500); /* oklch(70.5% 0.213 47.604) */Aplica caret-color: var(--color-orange-500); /* oklch(70.5% 0.213 47.604) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-orange-600caret-color: var(--color-orange-600); /* oklch(64.6% 0.222 41.116) */Aplica caret-color: var(--color-orange-600); /* oklch(64.6% 0.222 41.116) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-orange-700caret-color: var(--color-orange-700); /* oklch(55.3% 0.195 38.402) */Aplica caret-color: var(--color-orange-700); /* oklch(55.3% 0.195 38.402) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-orange-800caret-color: var(--color-orange-800); /* oklch(47% 0.157 37.304) */Aplica caret-color: var(--color-orange-800); /* oklch(47% 0.157 37.304) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-orange-900caret-color: var(--color-orange-900); /* oklch(40.8% 0.123 38.172) */Aplica caret-color: var(--color-orange-900); /* oklch(40.8% 0.123 38.172) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-orange-950caret-color: var(--color-orange-950); /* oklch(26.6% 0.079 36.259) */Aplica caret-color: var(--color-orange-950); /* oklch(26.6% 0.079 36.259) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-amber-50caret-color: var(--color-amber-50); /* oklch(98.7% 0.022 95.277) */Aplica caret-color: var(--color-amber-50); /* oklch(98.7% 0.022 95.277) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-amber-100caret-color: var(--color-amber-100); /* oklch(96.2% 0.059 95.617) */Aplica caret-color: var(--color-amber-100); /* oklch(96.2% 0.059 95.617) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-amber-200caret-color: var(--color-amber-200); /* oklch(92.4% 0.12 95.746) */Aplica caret-color: var(--color-amber-200); /* oklch(92.4% 0.12 95.746) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-amber-300caret-color: var(--color-amber-300); /* oklch(87.9% 0.169 91.605) */Aplica caret-color: var(--color-amber-300); /* oklch(87.9% 0.169 91.605) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-amber-400caret-color: var(--color-amber-400); /* oklch(82.8% 0.189 84.429) */Aplica caret-color: var(--color-amber-400); /* oklch(82.8% 0.189 84.429) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-amber-500caret-color: var(--color-amber-500); /* oklch(76.9% 0.188 70.08) */Aplica caret-color: var(--color-amber-500); /* oklch(76.9% 0.188 70.08) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-amber-600caret-color: var(--color-amber-600); /* oklch(66.6% 0.179 58.318) */Aplica caret-color: var(--color-amber-600); /* oklch(66.6% 0.179 58.318) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-amber-700caret-color: var(--color-amber-700); /* oklch(55.5% 0.163 48.998) */Aplica caret-color: var(--color-amber-700); /* oklch(55.5% 0.163 48.998) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-amber-800caret-color: var(--color-amber-800); /* oklch(47.3% 0.137 46.201) */Aplica caret-color: var(--color-amber-800); /* oklch(47.3% 0.137 46.201) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-amber-900caret-color: var(--color-amber-900); /* oklch(41.4% 0.112 45.904) */Aplica caret-color: var(--color-amber-900); /* oklch(41.4% 0.112 45.904) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-amber-950caret-color: var(--color-amber-950); /* oklch(27.9% 0.077 45.635) */Aplica caret-color: var(--color-amber-950); /* oklch(27.9% 0.077 45.635) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-yellow-50caret-color: var(--color-yellow-50); /* oklch(98.7% 0.026 102.212) */Aplica caret-color: var(--color-yellow-50); /* oklch(98.7% 0.026 102.212) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-yellow-100caret-color: var(--color-yellow-100); /* oklch(97.3% 0.071 103.193) */Aplica caret-color: var(--color-yellow-100); /* oklch(97.3% 0.071 103.193) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-yellow-200caret-color: var(--color-yellow-200); /* oklch(94.5% 0.129 101.54) */Aplica caret-color: var(--color-yellow-200); /* oklch(94.5% 0.129 101.54) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-yellow-300caret-color: var(--color-yellow-300); /* oklch(90.5% 0.182 98.111) */Aplica caret-color: var(--color-yellow-300); /* oklch(90.5% 0.182 98.111) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-yellow-400caret-color: var(--color-yellow-400); /* oklch(85.2% 0.199 91.936) */Aplica caret-color: var(--color-yellow-400); /* oklch(85.2% 0.199 91.936) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-yellow-500caret-color: var(--color-yellow-500); /* oklch(79.5% 0.184 86.047) */Aplica caret-color: var(--color-yellow-500); /* oklch(79.5% 0.184 86.047) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-yellow-600caret-color: var(--color-yellow-600); /* oklch(68.1% 0.162 75.834) */Aplica caret-color: var(--color-yellow-600); /* oklch(68.1% 0.162 75.834) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-yellow-700caret-color: var(--color-yellow-700); /* oklch(55.4% 0.135 66.442) */Aplica caret-color: var(--color-yellow-700); /* oklch(55.4% 0.135 66.442) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-yellow-800caret-color: var(--color-yellow-800); /* oklch(47.6% 0.114 61.907) */Aplica caret-color: var(--color-yellow-800); /* oklch(47.6% 0.114 61.907) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-yellow-900caret-color: var(--color-yellow-900); /* oklch(42.1% 0.095 57.708) */Aplica caret-color: var(--color-yellow-900); /* oklch(42.1% 0.095 57.708) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-yellow-950caret-color: var(--color-yellow-950); /* oklch(28.6% 0.066 53.813) */Aplica caret-color: var(--color-yellow-950); /* oklch(28.6% 0.066 53.813) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-lime-50caret-color: var(--color-lime-50); /* oklch(98.6% 0.031 120.757) */Aplica caret-color: var(--color-lime-50); /* oklch(98.6% 0.031 120.757) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-lime-100caret-color: var(--color-lime-100); /* oklch(96.7% 0.067 122.328) */Aplica caret-color: var(--color-lime-100); /* oklch(96.7% 0.067 122.328) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-lime-200caret-color: var(--color-lime-200); /* oklch(93.8% 0.127 124.321) */Aplica caret-color: var(--color-lime-200); /* oklch(93.8% 0.127 124.321) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-lime-300caret-color: var(--color-lime-300); /* oklch(89.7% 0.196 126.665) */Aplica caret-color: var(--color-lime-300); /* oklch(89.7% 0.196 126.665) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-lime-400caret-color: var(--color-lime-400); /* oklch(84.1% 0.238 128.85) */Aplica caret-color: var(--color-lime-400); /* oklch(84.1% 0.238 128.85) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-lime-500caret-color: var(--color-lime-500); /* oklch(76.8% 0.233 130.85) */Aplica caret-color: var(--color-lime-500); /* oklch(76.8% 0.233 130.85) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-lime-600caret-color: var(--color-lime-600); /* oklch(64.8% 0.2 131.684) */Aplica caret-color: var(--color-lime-600); /* oklch(64.8% 0.2 131.684) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-lime-700caret-color: var(--color-lime-700); /* oklch(53.2% 0.157 131.589) */Aplica caret-color: var(--color-lime-700); /* oklch(53.2% 0.157 131.589) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-lime-800caret-color: var(--color-lime-800); /* oklch(45.3% 0.124 130.933) */Aplica caret-color: var(--color-lime-800); /* oklch(45.3% 0.124 130.933) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-lime-900caret-color: var(--color-lime-900); /* oklch(40.5% 0.101 131.063) */Aplica caret-color: var(--color-lime-900); /* oklch(40.5% 0.101 131.063) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-lime-950caret-color: var(--color-lime-950); /* oklch(27.4% 0.072 132.109) */Aplica caret-color: var(--color-lime-950); /* oklch(27.4% 0.072 132.109) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-green-50caret-color: var(--color-green-50); /* oklch(98.2% 0.018 155.826) */Aplica caret-color: var(--color-green-50); /* oklch(98.2% 0.018 155.826) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-green-100caret-color: var(--color-green-100); /* oklch(96.2% 0.044 156.743) */Aplica caret-color: var(--color-green-100); /* oklch(96.2% 0.044 156.743) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-green-200caret-color: var(--color-green-200); /* oklch(92.5% 0.084 155.995) */Aplica caret-color: var(--color-green-200); /* oklch(92.5% 0.084 155.995) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-green-300caret-color: var(--color-green-300); /* oklch(87.1% 0.15 154.449) */Aplica caret-color: var(--color-green-300); /* oklch(87.1% 0.15 154.449) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-green-400caret-color: var(--color-green-400); /* oklch(79.2% 0.209 151.711) */Aplica caret-color: var(--color-green-400); /* oklch(79.2% 0.209 151.711) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-green-500caret-color: var(--color-green-500); /* oklch(72.3% 0.219 149.579) */Aplica caret-color: var(--color-green-500); /* oklch(72.3% 0.219 149.579) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-green-600caret-color: var(--color-green-600); /* oklch(62.7% 0.194 149.214) */Aplica caret-color: var(--color-green-600); /* oklch(62.7% 0.194 149.214) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-green-700caret-color: var(--color-green-700); /* oklch(52.7% 0.154 150.069) */Aplica caret-color: var(--color-green-700); /* oklch(52.7% 0.154 150.069) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-green-800caret-color: var(--color-green-800); /* oklch(44.8% 0.119 151.328) */Aplica caret-color: var(--color-green-800); /* oklch(44.8% 0.119 151.328) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-green-900caret-color: var(--color-green-900); /* oklch(39.3% 0.095 152.535) */Aplica caret-color: var(--color-green-900); /* oklch(39.3% 0.095 152.535) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-green-950caret-color: var(--color-green-950); /* oklch(26.6% 0.065 152.934) */Aplica caret-color: var(--color-green-950); /* oklch(26.6% 0.065 152.934) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-emerald-50caret-color: var(--color-emerald-50); /* oklch(97.9% 0.021 166.113) */Aplica caret-color: var(--color-emerald-50); /* oklch(97.9% 0.021 166.113) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-emerald-100caret-color: var(--color-emerald-100); /* oklch(95% 0.052 163.051) */Aplica caret-color: var(--color-emerald-100); /* oklch(95% 0.052 163.051) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-emerald-200caret-color: var(--color-emerald-200); /* oklch(90.5% 0.093 164.15) */Aplica caret-color: var(--color-emerald-200); /* oklch(90.5% 0.093 164.15) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-emerald-300caret-color: var(--color-emerald-300); /* oklch(84.5% 0.143 164.978) */Aplica caret-color: var(--color-emerald-300); /* oklch(84.5% 0.143 164.978) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-emerald-400caret-color: var(--color-emerald-400); /* oklch(76.5% 0.177 163.223) */Aplica caret-color: var(--color-emerald-400); /* oklch(76.5% 0.177 163.223) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-emerald-500caret-color: var(--color-emerald-500); /* oklch(69.6% 0.17 162.48) */Aplica caret-color: var(--color-emerald-500); /* oklch(69.6% 0.17 162.48) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-emerald-600caret-color: var(--color-emerald-600); /* oklch(59.6% 0.145 163.225) */Aplica caret-color: var(--color-emerald-600); /* oklch(59.6% 0.145 163.225) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-emerald-700caret-color: var(--color-emerald-700); /* oklch(50.8% 0.118 165.612) */Aplica caret-color: var(--color-emerald-700); /* oklch(50.8% 0.118 165.612) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-emerald-800caret-color: var(--color-emerald-800); /* oklch(43.2% 0.095 166.913) */Aplica caret-color: var(--color-emerald-800); /* oklch(43.2% 0.095 166.913) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-emerald-900caret-color: var(--color-emerald-900); /* oklch(37.8% 0.077 168.94) */Aplica caret-color: var(--color-emerald-900); /* oklch(37.8% 0.077 168.94) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-emerald-950caret-color: var(--color-emerald-950); /* oklch(26.2% 0.051 172.552) */Aplica caret-color: var(--color-emerald-950); /* oklch(26.2% 0.051 172.552) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-teal-50caret-color: var(--color-teal-50); /* oklch(98.4% 0.014 180.72) */Aplica caret-color: var(--color-teal-50); /* oklch(98.4% 0.014 180.72) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-teal-100caret-color: var(--color-teal-100); /* oklch(95.3% 0.051 180.801) */Aplica caret-color: var(--color-teal-100); /* oklch(95.3% 0.051 180.801) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-teal-200caret-color: var(--color-teal-200); /* oklch(91% 0.096 180.426) */Aplica caret-color: var(--color-teal-200); /* oklch(91% 0.096 180.426) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-teal-300caret-color: var(--color-teal-300); /* oklch(85.5% 0.138 181.071) */Aplica caret-color: var(--color-teal-300); /* oklch(85.5% 0.138 181.071) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-teal-400caret-color: var(--color-teal-400); /* oklch(77.7% 0.152 181.912) */Aplica caret-color: var(--color-teal-400); /* oklch(77.7% 0.152 181.912) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-teal-500caret-color: var(--color-teal-500); /* oklch(70.4% 0.14 182.503) */Aplica caret-color: var(--color-teal-500); /* oklch(70.4% 0.14 182.503) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-teal-600caret-color: var(--color-teal-600); /* oklch(60% 0.118 184.704) */Aplica caret-color: var(--color-teal-600); /* oklch(60% 0.118 184.704) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-teal-700caret-color: var(--color-teal-700); /* oklch(51.1% 0.096 186.391) */Aplica caret-color: var(--color-teal-700); /* oklch(51.1% 0.096 186.391) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-teal-800caret-color: var(--color-teal-800); /* oklch(43.7% 0.078 188.216) */Aplica caret-color: var(--color-teal-800); /* oklch(43.7% 0.078 188.216) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-teal-900caret-color: var(--color-teal-900); /* oklch(38.6% 0.063 188.416) */Aplica caret-color: var(--color-teal-900); /* oklch(38.6% 0.063 188.416) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-teal-950caret-color: var(--color-teal-950); /* oklch(27.7% 0.046 192.524) */Aplica caret-color: var(--color-teal-950); /* oklch(27.7% 0.046 192.524) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-cyan-50caret-color: var(--color-cyan-50); /* oklch(98.4% 0.019 200.873) */Aplica caret-color: var(--color-cyan-50); /* oklch(98.4% 0.019 200.873) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-cyan-100caret-color: var(--color-cyan-100); /* oklch(95.6% 0.045 203.388) */Aplica caret-color: var(--color-cyan-100); /* oklch(95.6% 0.045 203.388) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-cyan-200caret-color: var(--color-cyan-200); /* oklch(91.7% 0.08 205.041) */Aplica caret-color: var(--color-cyan-200); /* oklch(91.7% 0.08 205.041) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-cyan-300caret-color: var(--color-cyan-300); /* oklch(86.5% 0.127 207.078) */Aplica caret-color: var(--color-cyan-300); /* oklch(86.5% 0.127 207.078) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-cyan-400caret-color: var(--color-cyan-400); /* oklch(78.9% 0.154 211.53) */Aplica caret-color: var(--color-cyan-400); /* oklch(78.9% 0.154 211.53) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-cyan-500caret-color: var(--color-cyan-500); /* oklch(71.5% 0.143 215.221) */Aplica caret-color: var(--color-cyan-500); /* oklch(71.5% 0.143 215.221) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-cyan-600caret-color: var(--color-cyan-600); /* oklch(60.9% 0.126 221.723) */Aplica caret-color: var(--color-cyan-600); /* oklch(60.9% 0.126 221.723) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-cyan-700caret-color: var(--color-cyan-700); /* oklch(52% 0.105 223.128) */Aplica caret-color: var(--color-cyan-700); /* oklch(52% 0.105 223.128) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-cyan-800caret-color: var(--color-cyan-800); /* oklch(45% 0.085 224.283) */Aplica caret-color: var(--color-cyan-800); /* oklch(45% 0.085 224.283) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-cyan-900caret-color: var(--color-cyan-900); /* oklch(39.8% 0.07 227.392) */Aplica caret-color: var(--color-cyan-900); /* oklch(39.8% 0.07 227.392) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-cyan-950caret-color: var(--color-cyan-950); /* oklch(30.2% 0.056 229.695) */Aplica caret-color: var(--color-cyan-950); /* oklch(30.2% 0.056 229.695) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-sky-50caret-color: var(--color-sky-50); /* oklch(97.7% 0.013 236.62) */Aplica caret-color: var(--color-sky-50); /* oklch(97.7% 0.013 236.62) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-sky-100caret-color: var(--color-sky-100); /* oklch(95.1% 0.026 236.824) */Aplica caret-color: var(--color-sky-100); /* oklch(95.1% 0.026 236.824) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-sky-200caret-color: var(--color-sky-200); /* oklch(90.1% 0.058 230.902) */Aplica caret-color: var(--color-sky-200); /* oklch(90.1% 0.058 230.902) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-sky-300caret-color: var(--color-sky-300); /* oklch(82.8% 0.111 230.318) */Aplica caret-color: var(--color-sky-300); /* oklch(82.8% 0.111 230.318) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-sky-400caret-color: var(--color-sky-400); /* oklch(74.6% 0.16 232.661) */Aplica caret-color: var(--color-sky-400); /* oklch(74.6% 0.16 232.661) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-sky-500caret-color: var(--color-sky-500); /* oklch(68.5% 0.169 237.323) */Aplica caret-color: var(--color-sky-500); /* oklch(68.5% 0.169 237.323) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-sky-600caret-color: var(--color-sky-600); /* oklch(58.8% 0.158 241.966) */Aplica caret-color: var(--color-sky-600); /* oklch(58.8% 0.158 241.966) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-sky-700caret-color: var(--color-sky-700); /* oklch(50% 0.134 242.749) */Aplica caret-color: var(--color-sky-700); /* oklch(50% 0.134 242.749) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-sky-800caret-color: var(--color-sky-800); /* oklch(44.3% 0.11 240.79) */Aplica caret-color: var(--color-sky-800); /* oklch(44.3% 0.11 240.79) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-sky-900caret-color: var(--color-sky-900); /* oklch(39.1% 0.09 240.876) */Aplica caret-color: var(--color-sky-900); /* oklch(39.1% 0.09 240.876) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-sky-950caret-color: var(--color-sky-950); /* oklch(29.3% 0.066 243.157) */Aplica caret-color: var(--color-sky-950); /* oklch(29.3% 0.066 243.157) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-blue-50caret-color: var(--color-blue-50); /* oklch(97% 0.014 254.604) */Aplica caret-color: var(--color-blue-50); /* oklch(97% 0.014 254.604) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-blue-100caret-color: var(--color-blue-100); /* oklch(93.2% 0.032 255.585) */Aplica caret-color: var(--color-blue-100); /* oklch(93.2% 0.032 255.585) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-blue-200caret-color: var(--color-blue-200); /* oklch(88.2% 0.059 254.128) */Aplica caret-color: var(--color-blue-200); /* oklch(88.2% 0.059 254.128) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-blue-300caret-color: var(--color-blue-300); /* oklch(80.9% 0.105 251.813) */Aplica caret-color: var(--color-blue-300); /* oklch(80.9% 0.105 251.813) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-blue-400caret-color: var(--color-blue-400); /* oklch(70.7% 0.165 254.624) */Aplica caret-color: var(--color-blue-400); /* oklch(70.7% 0.165 254.624) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-blue-500caret-color: var(--color-blue-500); /* oklch(62.3% 0.214 259.815) */Aplica caret-color: var(--color-blue-500); /* oklch(62.3% 0.214 259.815) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-blue-600caret-color: var(--color-blue-600); /* oklch(54.6% 0.245 262.881) */Aplica caret-color: var(--color-blue-600); /* oklch(54.6% 0.245 262.881) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-blue-700caret-color: var(--color-blue-700); /* oklch(48.8% 0.243 264.376) */Aplica caret-color: var(--color-blue-700); /* oklch(48.8% 0.243 264.376) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-blue-800caret-color: var(--color-blue-800); /* oklch(42.4% 0.199 265.638) */Aplica caret-color: var(--color-blue-800); /* oklch(42.4% 0.199 265.638) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-blue-900caret-color: var(--color-blue-900); /* oklch(37.9% 0.146 265.522) */Aplica caret-color: var(--color-blue-900); /* oklch(37.9% 0.146 265.522) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-blue-950caret-color: var(--color-blue-950); /* oklch(28.2% 0.091 267.935) */Aplica caret-color: var(--color-blue-950); /* oklch(28.2% 0.091 267.935) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-indigo-50caret-color: var(--color-indigo-50); /* oklch(96.2% 0.018 272.314) */Aplica caret-color: var(--color-indigo-50); /* oklch(96.2% 0.018 272.314) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-indigo-100caret-color: var(--color-indigo-100); /* oklch(93% 0.034 272.788) */Aplica caret-color: var(--color-indigo-100); /* oklch(93% 0.034 272.788) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-indigo-200caret-color: var(--color-indigo-200); /* oklch(87% 0.065 274.039) */Aplica caret-color: var(--color-indigo-200); /* oklch(87% 0.065 274.039) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-indigo-300caret-color: var(--color-indigo-300); /* oklch(78.5% 0.115 274.713) */Aplica caret-color: var(--color-indigo-300); /* oklch(78.5% 0.115 274.713) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-indigo-400caret-color: var(--color-indigo-400); /* oklch(67.3% 0.182 276.935) */Aplica caret-color: var(--color-indigo-400); /* oklch(67.3% 0.182 276.935) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-indigo-500caret-color: var(--color-indigo-500); /* oklch(58.5% 0.233 277.117) */Aplica caret-color: var(--color-indigo-500); /* oklch(58.5% 0.233 277.117) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-indigo-600caret-color: var(--color-indigo-600); /* oklch(51.1% 0.262 276.966) */Aplica caret-color: var(--color-indigo-600); /* oklch(51.1% 0.262 276.966) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-indigo-700caret-color: var(--color-indigo-700); /* oklch(45.7% 0.24 277.023) */Aplica caret-color: var(--color-indigo-700); /* oklch(45.7% 0.24 277.023) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-indigo-800caret-color: var(--color-indigo-800); /* oklch(39.8% 0.195 277.366) */Aplica caret-color: var(--color-indigo-800); /* oklch(39.8% 0.195 277.366) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-indigo-900caret-color: var(--color-indigo-900); /* oklch(35.9% 0.144 278.697) */Aplica caret-color: var(--color-indigo-900); /* oklch(35.9% 0.144 278.697) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-indigo-950caret-color: var(--color-indigo-950); /* oklch(25.7% 0.09 281.288) */Aplica caret-color: var(--color-indigo-950); /* oklch(25.7% 0.09 281.288) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-violet-50caret-color: var(--color-violet-50); /* oklch(96.9% 0.016 293.756) */Aplica caret-color: var(--color-violet-50); /* oklch(96.9% 0.016 293.756) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-violet-100caret-color: var(--color-violet-100); /* oklch(94.3% 0.029 294.588) */Aplica caret-color: var(--color-violet-100); /* oklch(94.3% 0.029 294.588) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-violet-200caret-color: var(--color-violet-200); /* oklch(89.4% 0.057 293.283) */Aplica caret-color: var(--color-violet-200); /* oklch(89.4% 0.057 293.283) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-violet-300caret-color: var(--color-violet-300); /* oklch(81.1% 0.111 293.571) */Aplica caret-color: var(--color-violet-300); /* oklch(81.1% 0.111 293.571) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-violet-400caret-color: var(--color-violet-400); /* oklch(70.2% 0.183 293.541) */Aplica caret-color: var(--color-violet-400); /* oklch(70.2% 0.183 293.541) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-violet-500caret-color: var(--color-violet-500); /* oklch(60.6% 0.25 292.717) */Aplica caret-color: var(--color-violet-500); /* oklch(60.6% 0.25 292.717) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-violet-600caret-color: var(--color-violet-600); /* oklch(54.1% 0.281 293.009) */Aplica caret-color: var(--color-violet-600); /* oklch(54.1% 0.281 293.009) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-violet-700caret-color: var(--color-violet-700); /* oklch(49.1% 0.27 292.581) */Aplica caret-color: var(--color-violet-700); /* oklch(49.1% 0.27 292.581) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-violet-800caret-color: var(--color-violet-800); /* oklch(43.2% 0.232 292.759) */Aplica caret-color: var(--color-violet-800); /* oklch(43.2% 0.232 292.759) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-violet-900caret-color: var(--color-violet-900); /* oklch(38% 0.189 293.745) */Aplica caret-color: var(--color-violet-900); /* oklch(38% 0.189 293.745) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-violet-950caret-color: var(--color-violet-950); /* oklch(28.3% 0.141 291.089) */Aplica caret-color: var(--color-violet-950); /* oklch(28.3% 0.141 291.089) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-purple-50caret-color: var(--color-purple-50); /* oklch(97.7% 0.014 308.299) */Aplica caret-color: var(--color-purple-50); /* oklch(97.7% 0.014 308.299) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-purple-100caret-color: var(--color-purple-100); /* oklch(94.6% 0.033 307.174) */Aplica caret-color: var(--color-purple-100); /* oklch(94.6% 0.033 307.174) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-purple-200caret-color: var(--color-purple-200); /* oklch(90.2% 0.063 306.703) */Aplica caret-color: var(--color-purple-200); /* oklch(90.2% 0.063 306.703) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-purple-300caret-color: var(--color-purple-300); /* oklch(82.7% 0.119 306.383) */Aplica caret-color: var(--color-purple-300); /* oklch(82.7% 0.119 306.383) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-purple-400caret-color: var(--color-purple-400); /* oklch(71.4% 0.203 305.504) */Aplica caret-color: var(--color-purple-400); /* oklch(71.4% 0.203 305.504) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-purple-500caret-color: var(--color-purple-500); /* oklch(62.7% 0.265 303.9) */Aplica caret-color: var(--color-purple-500); /* oklch(62.7% 0.265 303.9) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-purple-600caret-color: var(--color-purple-600); /* oklch(55.8% 0.288 302.321) */Aplica caret-color: var(--color-purple-600); /* oklch(55.8% 0.288 302.321) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-purple-700caret-color: var(--color-purple-700); /* oklch(49.6% 0.265 301.924) */Aplica caret-color: var(--color-purple-700); /* oklch(49.6% 0.265 301.924) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-purple-800caret-color: var(--color-purple-800); /* oklch(43.8% 0.218 303.724) */Aplica caret-color: var(--color-purple-800); /* oklch(43.8% 0.218 303.724) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-purple-900caret-color: var(--color-purple-900); /* oklch(38.1% 0.176 304.987) */Aplica caret-color: var(--color-purple-900); /* oklch(38.1% 0.176 304.987) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-purple-950caret-color: var(--color-purple-950); /* oklch(29.1% 0.149 302.717) */Aplica caret-color: var(--color-purple-950); /* oklch(29.1% 0.149 302.717) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-fuchsia-50caret-color: var(--color-fuchsia-50); /* oklch(97.7% 0.017 320.058) */Aplica caret-color: var(--color-fuchsia-50); /* oklch(97.7% 0.017 320.058) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-fuchsia-100caret-color: var(--color-fuchsia-100); /* oklch(95.2% 0.037 318.852) */Aplica caret-color: var(--color-fuchsia-100); /* oklch(95.2% 0.037 318.852) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-fuchsia-200caret-color: var(--color-fuchsia-200); /* oklch(90.3% 0.076 319.62) */Aplica caret-color: var(--color-fuchsia-200); /* oklch(90.3% 0.076 319.62) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-fuchsia-300caret-color: var(--color-fuchsia-300); /* oklch(83.3% 0.145 321.434) */Aplica caret-color: var(--color-fuchsia-300); /* oklch(83.3% 0.145 321.434) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-fuchsia-400caret-color: var(--color-fuchsia-400); /* oklch(74% 0.238 322.16) */Aplica caret-color: var(--color-fuchsia-400); /* oklch(74% 0.238 322.16) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-fuchsia-500caret-color: var(--color-fuchsia-500); /* oklch(66.7% 0.295 322.15) */Aplica caret-color: var(--color-fuchsia-500); /* oklch(66.7% 0.295 322.15) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-fuchsia-600caret-color: var(--color-fuchsia-600); /* oklch(59.1% 0.293 322.896) */Aplica caret-color: var(--color-fuchsia-600); /* oklch(59.1% 0.293 322.896) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-fuchsia-700caret-color: var(--color-fuchsia-700); /* oklch(51.8% 0.253 323.949) */Aplica caret-color: var(--color-fuchsia-700); /* oklch(51.8% 0.253 323.949) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-fuchsia-800caret-color: var(--color-fuchsia-800); /* oklch(45.2% 0.211 324.591) */Aplica caret-color: var(--color-fuchsia-800); /* oklch(45.2% 0.211 324.591) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-fuchsia-900caret-color: var(--color-fuchsia-900); /* oklch(40.1% 0.17 325.612) */Aplica caret-color: var(--color-fuchsia-900); /* oklch(40.1% 0.17 325.612) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-fuchsia-950caret-color: var(--color-fuchsia-950); /* oklch(29.3% 0.136 325.661) */Aplica caret-color: var(--color-fuchsia-950); /* oklch(29.3% 0.136 325.661) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-pink-50caret-color: var(--color-pink-50); /* oklch(97.1% 0.014 343.198) */Aplica caret-color: var(--color-pink-50); /* oklch(97.1% 0.014 343.198) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-pink-100caret-color: var(--color-pink-100); /* oklch(94.8% 0.028 342.258) */Aplica caret-color: var(--color-pink-100); /* oklch(94.8% 0.028 342.258) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-pink-200caret-color: var(--color-pink-200); /* oklch(89.9% 0.061 343.231) */Aplica caret-color: var(--color-pink-200); /* oklch(89.9% 0.061 343.231) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-pink-300caret-color: var(--color-pink-300); /* oklch(82.3% 0.12 346.018) */Aplica caret-color: var(--color-pink-300); /* oklch(82.3% 0.12 346.018) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-pink-400caret-color: var(--color-pink-400); /* oklch(71.8% 0.202 349.761) */Aplica caret-color: var(--color-pink-400); /* oklch(71.8% 0.202 349.761) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-pink-500caret-color: var(--color-pink-500); /* oklch(65.6% 0.241 354.308) */Aplica caret-color: var(--color-pink-500); /* oklch(65.6% 0.241 354.308) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-pink-600caret-color: var(--color-pink-600); /* oklch(59.2% 0.249 0.584) */Aplica caret-color: var(--color-pink-600); /* oklch(59.2% 0.249 0.584) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-pink-700caret-color: var(--color-pink-700); /* oklch(52.5% 0.223 3.958) */Aplica caret-color: var(--color-pink-700); /* oklch(52.5% 0.223 3.958) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-pink-800caret-color: var(--color-pink-800); /* oklch(45.9% 0.187 3.815) */Aplica caret-color: var(--color-pink-800); /* oklch(45.9% 0.187 3.815) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-pink-900caret-color: var(--color-pink-900); /* oklch(40.8% 0.153 2.432) */Aplica caret-color: var(--color-pink-900); /* oklch(40.8% 0.153 2.432) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-pink-950caret-color: var(--color-pink-950); /* oklch(28.4% 0.109 3.907) */Aplica caret-color: var(--color-pink-950); /* oklch(28.4% 0.109 3.907) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-rose-50caret-color: var(--color-rose-50); /* oklch(96.9% 0.015 12.422) */Aplica caret-color: var(--color-rose-50); /* oklch(96.9% 0.015 12.422) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-rose-100caret-color: var(--color-rose-100); /* oklch(94.1% 0.03 12.58) */Aplica caret-color: var(--color-rose-100); /* oklch(94.1% 0.03 12.58) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-rose-200caret-color: var(--color-rose-200); /* oklch(89.2% 0.058 10.001) */Aplica caret-color: var(--color-rose-200); /* oklch(89.2% 0.058 10.001) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-rose-300caret-color: var(--color-rose-300); /* oklch(81% 0.117 11.638) */Aplica caret-color: var(--color-rose-300); /* oklch(81% 0.117 11.638) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-rose-400caret-color: var(--color-rose-400); /* oklch(71.2% 0.194 13.428) */Aplica caret-color: var(--color-rose-400); /* oklch(71.2% 0.194 13.428) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-rose-500caret-color: var(--color-rose-500); /* oklch(64.5% 0.246 16.439) */Aplica caret-color: var(--color-rose-500); /* oklch(64.5% 0.246 16.439) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-rose-600caret-color: var(--color-rose-600); /* oklch(58.6% 0.253 17.585) */Aplica caret-color: var(--color-rose-600); /* oklch(58.6% 0.253 17.585) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-rose-700caret-color: var(--color-rose-700); /* oklch(51.4% 0.222 16.935) */Aplica caret-color: var(--color-rose-700); /* oklch(51.4% 0.222 16.935) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-rose-800caret-color: var(--color-rose-800); /* oklch(45.5% 0.188 13.697) */Aplica caret-color: var(--color-rose-800); /* oklch(45.5% 0.188 13.697) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-rose-900caret-color: var(--color-rose-900); /* oklch(41% 0.159 10.272) */Aplica caret-color: var(--color-rose-900); /* oklch(41% 0.159 10.272) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-rose-950caret-color: var(--color-rose-950); /* oklch(27.1% 0.105 12.094) */Aplica caret-color: var(--color-rose-950); /* oklch(27.1% 0.105 12.094) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-slate-50caret-color: var(--color-slate-50); /* oklch(98.4% 0.003 247.858) */Aplica caret-color: var(--color-slate-50); /* oklch(98.4% 0.003 247.858) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-slate-100caret-color: var(--color-slate-100); /* oklch(96.8% 0.007 247.896) */Aplica caret-color: var(--color-slate-100); /* oklch(96.8% 0.007 247.896) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-slate-200caret-color: var(--color-slate-200); /* oklch(92.9% 0.013 255.508) */Aplica caret-color: var(--color-slate-200); /* oklch(92.9% 0.013 255.508) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-slate-300caret-color: var(--color-slate-300); /* oklch(86.9% 0.022 252.894) */Aplica caret-color: var(--color-slate-300); /* oklch(86.9% 0.022 252.894) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-slate-400caret-color: var(--color-slate-400); /* oklch(70.4% 0.04 256.788) */Aplica caret-color: var(--color-slate-400); /* oklch(70.4% 0.04 256.788) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-slate-500caret-color: var(--color-slate-500); /* oklch(55.4% 0.046 257.417) */Aplica caret-color: var(--color-slate-500); /* oklch(55.4% 0.046 257.417) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-slate-600caret-color: var(--color-slate-600); /* oklch(44.6% 0.043 257.281) */Aplica caret-color: var(--color-slate-600); /* oklch(44.6% 0.043 257.281) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-slate-700caret-color: var(--color-slate-700); /* oklch(37.2% 0.044 257.287) */Aplica caret-color: var(--color-slate-700); /* oklch(37.2% 0.044 257.287) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-slate-800caret-color: var(--color-slate-800); /* oklch(27.9% 0.041 260.031) */Aplica caret-color: var(--color-slate-800); /* oklch(27.9% 0.041 260.031) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-slate-900caret-color: var(--color-slate-900); /* oklch(20.8% 0.042 265.755) */Aplica caret-color: var(--color-slate-900); /* oklch(20.8% 0.042 265.755) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-slate-950caret-color: var(--color-slate-950); /* oklch(12.9% 0.042 264.695) */Aplica caret-color: var(--color-slate-950); /* oklch(12.9% 0.042 264.695) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-gray-50caret-color: var(--color-gray-50); /* oklch(98.5% 0.002 247.839) */Aplica caret-color: var(--color-gray-50); /* oklch(98.5% 0.002 247.839) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-gray-100caret-color: var(--color-gray-100); /* oklch(96.7% 0.003 264.542) */Aplica caret-color: var(--color-gray-100); /* oklch(96.7% 0.003 264.542) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-gray-200caret-color: var(--color-gray-200); /* oklch(92.8% 0.006 264.531) */Aplica caret-color: var(--color-gray-200); /* oklch(92.8% 0.006 264.531) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-gray-300caret-color: var(--color-gray-300); /* oklch(87.2% 0.01 258.338) */Aplica caret-color: var(--color-gray-300); /* oklch(87.2% 0.01 258.338) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-gray-400caret-color: var(--color-gray-400); /* oklch(70.7% 0.022 261.325) */Aplica caret-color: var(--color-gray-400); /* oklch(70.7% 0.022 261.325) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-gray-500caret-color: var(--color-gray-500); /* oklch(55.1% 0.027 264.364) */Aplica caret-color: var(--color-gray-500); /* oklch(55.1% 0.027 264.364) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-gray-600caret-color: var(--color-gray-600); /* oklch(44.6% 0.03 256.802) */Aplica caret-color: var(--color-gray-600); /* oklch(44.6% 0.03 256.802) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-gray-700caret-color: var(--color-gray-700); /* oklch(37.3% 0.034 259.733) */Aplica caret-color: var(--color-gray-700); /* oklch(37.3% 0.034 259.733) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-gray-800caret-color: var(--color-gray-800); /* oklch(27.8% 0.033 256.848) */Aplica caret-color: var(--color-gray-800); /* oklch(27.8% 0.033 256.848) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-gray-900caret-color: var(--color-gray-900); /* oklch(21% 0.034 264.665) */Aplica caret-color: var(--color-gray-900); /* oklch(21% 0.034 264.665) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-gray-950caret-color: var(--color-gray-950); /* oklch(13% 0.028 261.692) */Aplica caret-color: var(--color-gray-950); /* oklch(13% 0.028 261.692) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-zinc-50caret-color: var(--color-zinc-50); /* oklch(98.5% 0 0) */Aplica caret-color: var(--color-zinc-50); /* oklch(98.5% 0 0) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-zinc-100caret-color: var(--color-zinc-100); /* oklch(96.7% 0.001 286.375) */Aplica caret-color: var(--color-zinc-100); /* oklch(96.7% 0.001 286.375) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-zinc-200caret-color: var(--color-zinc-200); /* oklch(92% 0.004 286.32) */Aplica caret-color: var(--color-zinc-200); /* oklch(92% 0.004 286.32) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-zinc-300caret-color: var(--color-zinc-300); /* oklch(87.1% 0.006 286.286) */Aplica caret-color: var(--color-zinc-300); /* oklch(87.1% 0.006 286.286) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-zinc-400caret-color: var(--color-zinc-400); /* oklch(70.5% 0.015 286.067) */Aplica caret-color: var(--color-zinc-400); /* oklch(70.5% 0.015 286.067) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-zinc-500caret-color: var(--color-zinc-500); /* oklch(55.2% 0.016 285.938) */Aplica caret-color: var(--color-zinc-500); /* oklch(55.2% 0.016 285.938) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-zinc-600caret-color: var(--color-zinc-600); /* oklch(44.2% 0.017 285.786) */Aplica caret-color: var(--color-zinc-600); /* oklch(44.2% 0.017 285.786) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-zinc-700caret-color: var(--color-zinc-700); /* oklch(37% 0.013 285.805) */Aplica caret-color: var(--color-zinc-700); /* oklch(37% 0.013 285.805) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-zinc-800caret-color: var(--color-zinc-800); /* oklch(27.4% 0.006 286.033) */Aplica caret-color: var(--color-zinc-800); /* oklch(27.4% 0.006 286.033) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-zinc-900caret-color: var(--color-zinc-900); /* oklch(21% 0.006 285.885) */Aplica caret-color: var(--color-zinc-900); /* oklch(21% 0.006 285.885) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-zinc-950caret-color: var(--color-zinc-950); /* oklch(14.1% 0.005 285.823) */Aplica caret-color: var(--color-zinc-950); /* oklch(14.1% 0.005 285.823) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-neutral-50caret-color: var(--color-neutral-50); /* oklch(98.5% 0 0) */Aplica caret-color: var(--color-neutral-50); /* oklch(98.5% 0 0) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-neutral-100caret-color: var(--color-neutral-100); /* oklch(97% 0 0) */Aplica caret-color: var(--color-neutral-100); /* oklch(97% 0 0) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-neutral-200caret-color: var(--color-neutral-200); /* oklch(92.2% 0 0) */Aplica caret-color: var(--color-neutral-200); /* oklch(92.2% 0 0) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-neutral-300caret-color: var(--color-neutral-300); /* oklch(87% 0 0) */Aplica caret-color: var(--color-neutral-300); /* oklch(87% 0 0) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-neutral-400caret-color: var(--color-neutral-400); /* oklch(70.8% 0 0) */Aplica caret-color: var(--color-neutral-400); /* oklch(70.8% 0 0) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-neutral-500caret-color: var(--color-neutral-500); /* oklch(55.6% 0 0) */Aplica caret-color: var(--color-neutral-500); /* oklch(55.6% 0 0) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-neutral-600caret-color: var(--color-neutral-600); /* oklch(43.9% 0 0) */Aplica caret-color: var(--color-neutral-600); /* oklch(43.9% 0 0) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-neutral-700caret-color: var(--color-neutral-700); /* oklch(37.1% 0 0) */Aplica caret-color: var(--color-neutral-700); /* oklch(37.1% 0 0) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-neutral-800caret-color: var(--color-neutral-800); /* oklch(26.9% 0 0) */Aplica caret-color: var(--color-neutral-800); /* oklch(26.9% 0 0) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-neutral-900caret-color: var(--color-neutral-900); /* oklch(20.5% 0 0) */Aplica caret-color: var(--color-neutral-900); /* oklch(20.5% 0 0) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-neutral-950caret-color: var(--color-neutral-950); /* oklch(14.5% 0 0) */Aplica caret-color: var(--color-neutral-950); /* oklch(14.5% 0 0) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-stone-50caret-color: var(--color-stone-50); /* oklch(98.5% 0.001 106.423) */Aplica caret-color: var(--color-stone-50); /* oklch(98.5% 0.001 106.423) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-stone-100caret-color: var(--color-stone-100); /* oklch(97% 0.001 106.424) */Aplica caret-color: var(--color-stone-100); /* oklch(97% 0.001 106.424) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-stone-200caret-color: var(--color-stone-200); /* oklch(92.3% 0.003 48.717) */Aplica caret-color: var(--color-stone-200); /* oklch(92.3% 0.003 48.717) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-stone-300caret-color: var(--color-stone-300); /* oklch(86.9% 0.005 56.366) */Aplica caret-color: var(--color-stone-300); /* oklch(86.9% 0.005 56.366) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-stone-400caret-color: var(--color-stone-400); /* oklch(70.9% 0.01 56.259) */Aplica caret-color: var(--color-stone-400); /* oklch(70.9% 0.01 56.259) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-stone-500caret-color: var(--color-stone-500); /* oklch(55.3% 0.013 58.071) */Aplica caret-color: var(--color-stone-500); /* oklch(55.3% 0.013 58.071) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-stone-600caret-color: var(--color-stone-600); /* oklch(44.4% 0.011 73.639) */Aplica caret-color: var(--color-stone-600); /* oklch(44.4% 0.011 73.639) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-stone-700caret-color: var(--color-stone-700); /* oklch(37.4% 0.01 67.558) */Aplica caret-color: var(--color-stone-700); /* oklch(37.4% 0.01 67.558) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-stone-800caret-color: var(--color-stone-800); /* oklch(26.8% 0.007 34.298) */Aplica caret-color: var(--color-stone-800); /* oklch(26.8% 0.007 34.298) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-stone-900caret-color: var(--color-stone-900); /* oklch(21.6% 0.006 56.043) */Aplica caret-color: var(--color-stone-900); /* oklch(21.6% 0.006 56.043) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-stone-950caret-color: var(--color-stone-950); /* oklch(14.7% 0.004 49.25) */Aplica caret-color: var(--color-stone-950); /* oklch(14.7% 0.004 49.25) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-mauve-50caret-color: var(--color-mauve-50); /* oklch(98.5% 0 0) */Aplica caret-color: var(--color-mauve-50); /* oklch(98.5% 0 0) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-mauve-100caret-color: var(--color-mauve-100); /* oklch(96% 0.003 325.6) */Aplica caret-color: var(--color-mauve-100); /* oklch(96% 0.003 325.6) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-mauve-200caret-color: var(--color-mauve-200); /* oklch(92.2% 0.005 325.62) */Aplica caret-color: var(--color-mauve-200); /* oklch(92.2% 0.005 325.62) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-mauve-300caret-color: var(--color-mauve-300); /* oklch(86.5% 0.012 325.68) */Aplica caret-color: var(--color-mauve-300); /* oklch(86.5% 0.012 325.68) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-mauve-400caret-color: var(--color-mauve-400); /* oklch(71.1% 0.019 323.02) */Aplica caret-color: var(--color-mauve-400); /* oklch(71.1% 0.019 323.02) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-mauve-500caret-color: var(--color-mauve-500); /* oklch(54.2% 0.034 322.5) */Aplica caret-color: var(--color-mauve-500); /* oklch(54.2% 0.034 322.5) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-mauve-600caret-color: var(--color-mauve-600); /* oklch(43.5% 0.029 321.78) */Aplica caret-color: var(--color-mauve-600); /* oklch(43.5% 0.029 321.78) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-mauve-700caret-color: var(--color-mauve-700); /* oklch(36.4% 0.029 323.89) */Aplica caret-color: var(--color-mauve-700); /* oklch(36.4% 0.029 323.89) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-mauve-800caret-color: var(--color-mauve-800); /* oklch(26.3% 0.024 320.12) */Aplica caret-color: var(--color-mauve-800); /* oklch(26.3% 0.024 320.12) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-mauve-900caret-color: var(--color-mauve-900); /* oklch(21.2% 0.019 322.12) */Aplica caret-color: var(--color-mauve-900); /* oklch(21.2% 0.019 322.12) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-mauve-950caret-color: var(--color-mauve-950); /* oklch(14.5% 0.008 326) */Aplica caret-color: var(--color-mauve-950); /* oklch(14.5% 0.008 326) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-olive-50caret-color: var(--color-olive-50); /* oklch(98.8% 0.003 106.5) */Aplica caret-color: var(--color-olive-50); /* oklch(98.8% 0.003 106.5) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-olive-100caret-color: var(--color-olive-100); /* oklch(96.6% 0.005 106.5) */Aplica caret-color: var(--color-olive-100); /* oklch(96.6% 0.005 106.5) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-olive-200caret-color: var(--color-olive-200); /* oklch(93% 0.007 106.5) */Aplica caret-color: var(--color-olive-200); /* oklch(93% 0.007 106.5) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-olive-300caret-color: var(--color-olive-300); /* oklch(88% 0.011 106.6) */Aplica caret-color: var(--color-olive-300); /* oklch(88% 0.011 106.6) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-olive-400caret-color: var(--color-olive-400); /* oklch(73.7% 0.021 106.9) */Aplica caret-color: var(--color-olive-400); /* oklch(73.7% 0.021 106.9) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-olive-500caret-color: var(--color-olive-500); /* oklch(58% 0.031 107.3) */Aplica caret-color: var(--color-olive-500); /* oklch(58% 0.031 107.3) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-olive-600caret-color: var(--color-olive-600); /* oklch(46.6% 0.025 107.3) */Aplica caret-color: var(--color-olive-600); /* oklch(46.6% 0.025 107.3) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-olive-700caret-color: var(--color-olive-700); /* oklch(39.4% 0.023 107.4) */Aplica caret-color: var(--color-olive-700); /* oklch(39.4% 0.023 107.4) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-olive-800caret-color: var(--color-olive-800); /* oklch(28.6% 0.016 107.4) */Aplica caret-color: var(--color-olive-800); /* oklch(28.6% 0.016 107.4) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-olive-900caret-color: var(--color-olive-900); /* oklch(22.8% 0.013 107.4) */Aplica caret-color: var(--color-olive-900); /* oklch(22.8% 0.013 107.4) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-olive-950caret-color: var(--color-olive-950); /* oklch(15.3% 0.006 107.1) */Aplica caret-color: var(--color-olive-950); /* oklch(15.3% 0.006 107.1) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-mist-50caret-color: var(--color-mist-50); /* oklch(98.7% 0.002 197.1) */Aplica caret-color: var(--color-mist-50); /* oklch(98.7% 0.002 197.1) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-mist-100caret-color: var(--color-mist-100); /* oklch(96.3% 0.002 197.1) */Aplica caret-color: var(--color-mist-100); /* oklch(96.3% 0.002 197.1) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-mist-200caret-color: var(--color-mist-200); /* oklch(92.5% 0.005 214.3) */Aplica caret-color: var(--color-mist-200); /* oklch(92.5% 0.005 214.3) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-mist-300caret-color: var(--color-mist-300); /* oklch(87.2% 0.007 219.6) */Aplica caret-color: var(--color-mist-300); /* oklch(87.2% 0.007 219.6) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-mist-400caret-color: var(--color-mist-400); /* oklch(72.3% 0.014 214.4) */Aplica caret-color: var(--color-mist-400); /* oklch(72.3% 0.014 214.4) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-mist-500caret-color: var(--color-mist-500); /* oklch(56% 0.021 213.5) */Aplica caret-color: var(--color-mist-500); /* oklch(56% 0.021 213.5) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-mist-600caret-color: var(--color-mist-600); /* oklch(45% 0.017 213.2) */Aplica caret-color: var(--color-mist-600); /* oklch(45% 0.017 213.2) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-mist-700caret-color: var(--color-mist-700); /* oklch(37.8% 0.015 216) */Aplica caret-color: var(--color-mist-700); /* oklch(37.8% 0.015 216) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-mist-800caret-color: var(--color-mist-800); /* oklch(27.5% 0.011 216.9) */Aplica caret-color: var(--color-mist-800); /* oklch(27.5% 0.011 216.9) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-mist-900caret-color: var(--color-mist-900); /* oklch(21.8% 0.008 223.9) */Aplica caret-color: var(--color-mist-900); /* oklch(21.8% 0.008 223.9) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-mist-950caret-color: var(--color-mist-950); /* oklch(14.8% 0.004 228.8) */Aplica caret-color: var(--color-mist-950); /* oklch(14.8% 0.004 228.8) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-taupe-50caret-color: var(--color-taupe-50); /* oklch(98.6% 0.002 67.8) */Aplica caret-color: var(--color-taupe-50); /* oklch(98.6% 0.002 67.8) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-taupe-100caret-color: var(--color-taupe-100); /* oklch(96% 0.002 17.2) */Aplica caret-color: var(--color-taupe-100); /* oklch(96% 0.002 17.2) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-taupe-200caret-color: var(--color-taupe-200); /* oklch(92.2% 0.005 34.3) */Aplica caret-color: var(--color-taupe-200); /* oklch(92.2% 0.005 34.3) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-taupe-300caret-color: var(--color-taupe-300); /* oklch(86.8% 0.007 39.5) */Aplica caret-color: var(--color-taupe-300); /* oklch(86.8% 0.007 39.5) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-taupe-400caret-color: var(--color-taupe-400); /* oklch(71.4% 0.014 41.2) */Aplica caret-color: var(--color-taupe-400); /* oklch(71.4% 0.014 41.2) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-taupe-500caret-color: var(--color-taupe-500); /* oklch(54.7% 0.021 43.1) */Aplica caret-color: var(--color-taupe-500); /* oklch(54.7% 0.021 43.1) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-taupe-600caret-color: var(--color-taupe-600); /* oklch(43.8% 0.017 39.3) */Aplica caret-color: var(--color-taupe-600); /* oklch(43.8% 0.017 39.3) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-taupe-700caret-color: var(--color-taupe-700); /* oklch(36.7% 0.016 35.7) */Aplica caret-color: var(--color-taupe-700); /* oklch(36.7% 0.016 35.7) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-taupe-800caret-color: var(--color-taupe-800); /* oklch(26.8% 0.011 36.5) */Aplica caret-color: var(--color-taupe-800); /* oklch(26.8% 0.011 36.5) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-taupe-900caret-color: var(--color-taupe-900); /* oklch(21.4% 0.009 43.1) */Aplica caret-color: var(--color-taupe-900); /* oklch(21.4% 0.009 43.1) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-taupe-950caret-color: var(--color-taupe-950); /* oklch(14.7% 0.004 49.3) */Aplica caret-color: var(--color-taupe-950); /* oklch(14.7% 0.004 49.3) */ al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret- <custom-property>caret-color: var( <custom-property> );Aplica caret-color: var( <custom-property> ); al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.
caret-[ <value> ]caret-color: <value> ;Aplica caret-color: <value> ; al elemento; úsalo cuando necesites ajustar caret-color con esta utilidad.

esquema de color

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

Utilidades para controlar la combinación de colores de un elemento.

Clase de UtilidadPropiedad CSSExplicación Breve
scheme-normalcolor-scheme: normal;Aplica color-scheme: normal; al elemento; úsalo cuando necesites ajustar color-scheme con esta utilidad.
scheme-darkcolor-scheme: dark;Aplica color-scheme: dark; al elemento; úsalo cuando necesites ajustar color-scheme con esta utilidad.
scheme-lightcolor-scheme: light;Aplica color-scheme: light; al elemento; úsalo cuando necesites ajustar color-scheme con esta utilidad.
scheme-light-darkcolor-scheme: light dark;Aplica color-scheme: light dark; al elemento; úsalo cuando necesites ajustar color-scheme con esta utilidad.
scheme-only-darkcolor-scheme: only dark;Aplica color-scheme: only dark; al elemento; úsalo cuando necesites ajustar color-scheme con esta utilidad.
scheme-only-lightcolor-scheme: only light;Aplica color-scheme: only light; al elemento; úsalo cuando necesites ajustar color-scheme con esta utilidad.

cursor

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

Utilidades para controlar el estilo del cursor al pasar el cursor sobre un elemento.

Clase de UtilidadPropiedad CSSExplicación Breve
cursor-autocursor: auto;Aplica cursor: auto; al elemento; úsalo cuando necesites ajustar cursor con esta utilidad.
cursor-defaultcursor: default;Aplica cursor: default; al elemento; úsalo cuando necesites ajustar cursor con esta utilidad.
cursor-pointercursor: pointer;Aplica cursor: pointer; al elemento; úsalo cuando necesites ajustar cursor con esta utilidad.
cursor-waitcursor: wait;Aplica cursor: wait; al elemento; úsalo cuando necesites ajustar cursor con esta utilidad.
cursor-textcursor: text;Aplica cursor: text; al elemento; úsalo cuando necesites ajustar cursor con esta utilidad.
cursor-movecursor: move;Aplica cursor: move; al elemento; úsalo cuando necesites ajustar cursor con esta utilidad.
cursor-helpcursor: help;Aplica cursor: help; al elemento; úsalo cuando necesites ajustar cursor con esta utilidad.
cursor-not-allowedcursor: not-allowed;Aplica cursor: not-allowed; al elemento; úsalo cuando necesites ajustar cursor con esta utilidad.
cursor-nonecursor: none;Aplica cursor: none; al elemento; úsalo cuando necesites ajustar cursor con esta utilidad.
cursor-context-menucursor: context-menu;Aplica cursor: context-menu; al elemento; úsalo cuando necesites ajustar cursor con esta utilidad.
cursor-progresscursor: progress;Aplica cursor: progress; al elemento; úsalo cuando necesites ajustar cursor con esta utilidad.
cursor-cellcursor: cell;Aplica cursor: cell; al elemento; úsalo cuando necesites ajustar cursor con esta utilidad.
cursor-crosshaircursor: crosshair;Aplica cursor: crosshair; al elemento; úsalo cuando necesites ajustar cursor con esta utilidad.
cursor-vertical-textcursor: vertical-text;Aplica cursor: vertical-text; al elemento; úsalo cuando necesites ajustar cursor con esta utilidad.
cursor-aliascursor: alias;Aplica cursor: alias; al elemento; úsalo cuando necesites ajustar cursor con esta utilidad.
cursor-copycursor: copy;Aplica cursor: copy; al elemento; úsalo cuando necesites ajustar cursor con esta utilidad.
cursor-no-dropcursor: no-drop;Aplica cursor: no-drop; al elemento; úsalo cuando necesites ajustar cursor con esta utilidad.
cursor-grabcursor: grab;Aplica cursor: grab; al elemento; úsalo cuando necesites ajustar cursor con esta utilidad.
cursor-grabbingcursor: grabbing;Aplica cursor: grabbing; al elemento; úsalo cuando necesites ajustar cursor con esta utilidad.
cursor-all-scrollcursor: all-scroll;Aplica cursor: all-scroll; al elemento; úsalo cuando necesites ajustar cursor con esta utilidad.
cursor-col-resizecursor: col-resize;Aplica cursor: col-resize; al elemento; úsalo cuando necesites ajustar cursor con esta utilidad.
cursor-row-resizecursor: row-resize;Aplica cursor: row-resize; al elemento; úsalo cuando necesites ajustar cursor con esta utilidad.
cursor-n-resizecursor: n-resize;Aplica cursor: n-resize; al elemento; úsalo cuando necesites ajustar cursor con esta utilidad.
cursor-e-resizecursor: e-resize;Aplica cursor: e-resize; al elemento; úsalo cuando necesites ajustar cursor con esta utilidad.
cursor-s-resizecursor: s-resize;Aplica cursor: s-resize; al elemento; úsalo cuando necesites ajustar cursor con esta utilidad.
cursor-w-resizecursor: w-resize;Aplica cursor: w-resize; al elemento; úsalo cuando necesites ajustar cursor con esta utilidad.
cursor-ne-resizecursor: ne-resize;Aplica cursor: ne-resize; al elemento; úsalo cuando necesites ajustar cursor con esta utilidad.
cursor-nw-resizecursor: nw-resize;Aplica cursor: nw-resize; al elemento; úsalo cuando necesites ajustar cursor con esta utilidad.
cursor-se-resizecursor: se-resize;Aplica cursor: se-resize; al elemento; úsalo cuando necesites ajustar cursor con esta utilidad.
cursor-sw-resizecursor: sw-resize;Aplica cursor: sw-resize; al elemento; úsalo cuando necesites ajustar cursor con esta utilidad.
cursor-ew-resizecursor: ew-resize;Aplica cursor: ew-resize; al elemento; úsalo cuando necesites ajustar cursor con esta utilidad.
cursor-ns-resizecursor: ns-resize;Aplica cursor: ns-resize; al elemento; úsalo cuando necesites ajustar cursor con esta utilidad.
cursor-nesw-resizecursor: nesw-resize;Aplica cursor: nesw-resize; al elemento; úsalo cuando necesites ajustar cursor con esta utilidad.
cursor-nwse-resizecursor: nwse-resize;Aplica cursor: nwse-resize; al elemento; úsalo cuando necesites ajustar cursor con esta utilidad.
cursor-zoom-incursor: zoom-in;Aplica cursor: zoom-in; al elemento; úsalo cuando necesites ajustar cursor con esta utilidad.
cursor-zoom-outcursor: zoom-out;Aplica cursor: zoom-out; al elemento; úsalo cuando necesites ajustar cursor con esta utilidad.
cursor-( <custom-property> )cursor: var( <custom-property> );Aplica cursor: var( <custom-property> ); al elemento; úsalo cuando necesites ajustar cursor con esta utilidad.
cursor-[ <value> ]cursor: <value> ;Aplica cursor: <value> ; al elemento; úsalo cuando necesites ajustar cursor con esta utilidad.

dimensionamiento de campo

Fuente oficial: https://tailwindcss.com/docs/field-sizing

Utilidades para controlar el tamaño de los controles de formulario.

Clase de UtilidadPropiedad CSSExplicación Breve
field-sizing-fixedfield-sizing: fixed;Aplica field-sizing: fixed; al elemento; úsalo cuando necesites ajustar field-sizing con esta utilidad.
field-sizing-contentfield-sizing: content;Aplica field-sizing: content; al elemento; úsalo cuando necesites ajustar field-sizing con esta utilidad.

eventos de puntero

Fuente oficial: https://tailwindcss.com/docs/pointer-events

Utilidades para controlar si un elemento responde a eventos de puntero.

Clase de UtilidadPropiedad CSSExplicación Breve
pointer-events-autopointer-events: auto;Aplica pointer-events: auto; al elemento; úsalo cuando necesites ajustar pointer-events con esta utilidad.
pointer-events-nonepointer-events: none;Aplica pointer-events: none; al elemento; úsalo cuando necesites ajustar pointer-events con esta utilidad.

cambiar el tamaño

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

Utilidades para controlar cómo se puede cambiar el tamaño de un elemento.

Clase de UtilidadPropiedad CSSExplicación Breve
resize-noneresize: none;Aplica resize: none; al elemento; úsalo cuando necesites ajustar resize con esta utilidad.
resizeresize: both;Aplica resize: both; al elemento; úsalo cuando necesites ajustar resize con esta utilidad.
resize-yresize: vertical;Aplica resize: vertical; al elemento; úsalo cuando necesites ajustar resize con esta utilidad.
resize-xresize: horizontal;Aplica resize: horizontal; al elemento; úsalo cuando necesites ajustar resize con esta utilidad.

comportamiento de desplazamiento

Fuente oficial: https://tailwindcss.com/docs/scroll-behavior

Utilidades para controlar el comportamiento de desplazamiento de un elemento.

Clase de UtilidadPropiedad CSSExplicación Breve
scroll-autoscroll-behavior: auto;Aplica scroll-behavior: auto; al elemento; úsalo cuando necesites ajustar scroll-behavior con esta utilidad.
scroll-smoothscroll-behavior: smooth;Aplica scroll-behavior: smooth; al elemento; úsalo cuando necesites ajustar scroll-behavior con esta utilidad.

margen de desplazamiento

Fuente oficial: https://tailwindcss.com/docs/scroll-margin

Utilidades para controlar el desplazamiento del desplazamiento alrededor de los elementos en un contenedor instantáneo.

Clase de UtilidadPropiedad CSSExplicación Breve
scroll-m- <number>scroll-margin: calc(var(--spacing) * <number> );Aplica scroll-margin: calc(var(--spacing) * <number> ); al elemento; úsalo cuando necesites ajustar scroll-margin con esta utilidad.
-scroll-m- <number>scroll-margin: calc(var(--spacing) * - <number> );Aplica scroll-margin: calc(var(--spacing) * - <number> ); al elemento; úsalo cuando necesites ajustar scroll-margin con esta utilidad.
scroll-m-( <custom-property> )scroll-margin: var( <custom-property> );Aplica scroll-margin: var( <custom-property> ); al elemento; úsalo cuando necesites ajustar scroll-margin con esta utilidad.
scroll-m-[ <value> ]scroll-margin: <value> ;Aplica scroll-margin: <value> ; al elemento; úsalo cuando necesites ajustar scroll-margin con esta utilidad.
scroll-mx- <number>scroll-margin-inline: calc(var(--spacing) * <number> );Aplica scroll-margin-inline: calc(var(--spacing) * <number> ); al elemento; úsalo cuando necesites ajustar scroll-margin con esta utilidad.
-scroll-mx- <number>scroll-margin-inline: calc(var(--spacing) * - <number> );Aplica scroll-margin-inline: calc(var(--spacing) * - <number> ); al elemento; úsalo cuando necesites ajustar scroll-margin con esta utilidad.
scroll-mx-( <custom-property> )scroll-margin-inline: var( <custom-property> );Aplica scroll-margin-inline: var( <custom-property> ); al elemento; úsalo cuando necesites ajustar scroll-margin con esta utilidad.
scroll-mx-[ <value> ]scroll-margin-inline: <value> ;Aplica scroll-margin-inline: <value> ; al elemento; úsalo cuando necesites ajustar scroll-margin con esta utilidad.
scroll-my- <number>scroll-margin-block: calc(var(--spacing) * <number> );Aplica scroll-margin-block: calc(var(--spacing) * <number> ); al elemento; úsalo cuando necesites ajustar scroll-margin con esta utilidad.
-scroll-my- <number>scroll-margin-block: calc(var(--spacing) * - <number> );Aplica scroll-margin-block: calc(var(--spacing) * - <number> ); al elemento; úsalo cuando necesites ajustar scroll-margin con esta utilidad.
scroll-my-( <custom-property> )scroll-margin-block: var( <custom-property> );Aplica scroll-margin-block: var( <custom-property> ); al elemento; úsalo cuando necesites ajustar scroll-margin con esta utilidad.
scroll-my-[ <value> ]scroll-margin-block: <value> ;Aplica scroll-margin-block: <value> ; al elemento; úsalo cuando necesites ajustar scroll-margin con esta utilidad.
scroll-ms- <number>scroll-margin-inline-start: calc(var(--spacing) * <number> );Aplica scroll-margin-inline-start: calc(var(--spacing) * <number> ); al elemento; úsalo cuando necesites ajustar scroll-margin con esta utilidad.
-scroll-ms- <number>scroll-margin-inline-start: calc(var(--spacing) * - <number> );Aplica scroll-margin-inline-start: calc(var(--spacing) * - <number> ); al elemento; úsalo cuando necesites ajustar scroll-margin con esta utilidad.
scroll-ms-( <custom-property> )scroll-margin-inline-start: var( <custom-property> );Aplica scroll-margin-inline-start: var( <custom-property> ); al elemento; úsalo cuando necesites ajustar scroll-margin con esta utilidad.
scroll-ms-[ <value> ]scroll-margin-inline-start: <value> ;Aplica scroll-margin-inline-start: <value> ; al elemento; úsalo cuando necesites ajustar scroll-margin con esta utilidad.
scroll-me- <number>scroll-margin-inline-end: calc(var(--spacing) * <number> );Aplica scroll-margin-inline-end: calc(var(--spacing) * <number> ); al elemento; úsalo cuando necesites ajustar scroll-margin con esta utilidad.
-scroll-me- <number>scroll-margin-inline-end: calc(var(--spacing) * - <number> );Aplica scroll-margin-inline-end: calc(var(--spacing) * - <number> ); al elemento; úsalo cuando necesites ajustar scroll-margin con esta utilidad.
scroll-me-( <custom-property> )scroll-margin-inline-end: var( <custom-property> );Aplica scroll-margin-inline-end: var( <custom-property> ); al elemento; úsalo cuando necesites ajustar scroll-margin con esta utilidad.
scroll-me-[ <value> ]scroll-margin-inline-end: <value> ;Aplica scroll-margin-inline-end: <value> ; al elemento; úsalo cuando necesites ajustar scroll-margin con esta utilidad.
scroll-mbs- <number>scroll-margin-block-start: calc(var(--spacing) * <number> );Aplica scroll-margin-block-start: calc(var(--spacing) * <number> ); al elemento; úsalo cuando necesites ajustar scroll-margin con esta utilidad.
-scroll-mbs- <number>scroll-margin-block-start: calc(var(--spacing) * - <number> );Aplica scroll-margin-block-start: calc(var(--spacing) * - <number> ); al elemento; úsalo cuando necesites ajustar scroll-margin con esta utilidad.
scroll-mbs-( <custom-property> )scroll-margin-block-start: var( <custom-property> );Aplica scroll-margin-block-start: var( <custom-property> ); al elemento; úsalo cuando necesites ajustar scroll-margin con esta utilidad.
scroll-mbs-[ <value> ]scroll-margin-block-start: <value> ;Aplica scroll-margin-block-start: <value> ; al elemento; úsalo cuando necesites ajustar scroll-margin con esta utilidad.
scroll-mbe- <number>scroll-margin-block-end: calc(var(--spacing) * <number> );Aplica scroll-margin-block-end: calc(var(--spacing) * <number> ); al elemento; úsalo cuando necesites ajustar scroll-margin con esta utilidad.
-scroll-mbe- <number>scroll-margin-block-end: calc(var(--spacing) * - <number> );Aplica scroll-margin-block-end: calc(var(--spacing) * - <number> ); al elemento; úsalo cuando necesites ajustar scroll-margin con esta utilidad.
scroll-mbe-( <custom-property> )scroll-margin-block-end: var( <custom-property> );Aplica scroll-margin-block-end: var( <custom-property> ); al elemento; úsalo cuando necesites ajustar scroll-margin con esta utilidad.
scroll-mbe-[ <value> ]scroll-margin-block-end: <value> ;Aplica scroll-margin-block-end: <value> ; al elemento; úsalo cuando necesites ajustar scroll-margin con esta utilidad.
scroll-mt- <number>scroll-margin-top: calc(var(--spacing) * <number> );Aplica scroll-margin-top: calc(var(--spacing) * <number> ); al elemento; úsalo cuando necesites ajustar scroll-margin con esta utilidad.
-scroll-mt- <number>scroll-margin-top: calc(var(--spacing) * - <number> );Aplica scroll-margin-top: calc(var(--spacing) * - <number> ); al elemento; úsalo cuando necesites ajustar scroll-margin con esta utilidad.
scroll-mt-( <custom-property> )scroll-margin-top: var( <custom-property> );Aplica scroll-margin-top: var( <custom-property> ); al elemento; úsalo cuando necesites ajustar scroll-margin con esta utilidad.
scroll-mt-[ <value> ]scroll-margin-top: <value> ;Aplica scroll-margin-top: <value> ; al elemento; úsalo cuando necesites ajustar scroll-margin con esta utilidad.
scroll-mr- <number>scroll-margin-right: calc(var(--spacing) * <number> );Aplica scroll-margin-right: calc(var(--spacing) * <number> ); al elemento; úsalo cuando necesites ajustar scroll-margin con esta utilidad.
-scroll-mr- <number>scroll-margin-right: calc(var(--spacing) * - <number> );Aplica scroll-margin-right: calc(var(--spacing) * - <number> ); al elemento; úsalo cuando necesites ajustar scroll-margin con esta utilidad.
scroll-mr-( <custom-property> )scroll-margin-right: var( <custom-property> );Aplica scroll-margin-right: var( <custom-property> ); al elemento; úsalo cuando necesites ajustar scroll-margin con esta utilidad.
scroll-mr-[ <value> ]scroll-margin-right: <value> ;Aplica scroll-margin-right: <value> ; al elemento; úsalo cuando necesites ajustar scroll-margin con esta utilidad.
scroll-mb- <number>scroll-margin-bottom: calc(var(--spacing) * <number> );Aplica scroll-margin-bottom: calc(var(--spacing) * <number> ); al elemento; úsalo cuando necesites ajustar scroll-margin con esta utilidad.
-scroll-mb- <number>scroll-margin-bottom: calc(var(--spacing) * - <number> );Aplica scroll-margin-bottom: calc(var(--spacing) * - <number> ); al elemento; úsalo cuando necesites ajustar scroll-margin con esta utilidad.
scroll-mb-( <custom-property> )scroll-margin-bottom: var( <custom-property> );Aplica scroll-margin-bottom: var( <custom-property> ); al elemento; úsalo cuando necesites ajustar scroll-margin con esta utilidad.
scroll-mb-[ <value> ]scroll-margin-bottom: <value> ;Aplica scroll-margin-bottom: <value> ; al elemento; úsalo cuando necesites ajustar scroll-margin con esta utilidad.
scroll-ml- <number>scroll-margin-left: calc(var(--spacing) * <number> );Aplica scroll-margin-left: calc(var(--spacing) * <number> ); al elemento; úsalo cuando necesites ajustar scroll-margin con esta utilidad.
-scroll-ml- <number>scroll-margin-left: calc(var(--spacing) * - <number> );Aplica scroll-margin-left: calc(var(--spacing) * - <number> ); al elemento; úsalo cuando necesites ajustar scroll-margin con esta utilidad.
scroll-ml-( <custom-property> )scroll-margin-left: var( <custom-property> );Aplica scroll-margin-left: var( <custom-property> ); al elemento; úsalo cuando necesites ajustar scroll-margin con esta utilidad.
scroll-ml-[ <value> ]scroll-margin-left: <value> ;Aplica scroll-margin-left: <value> ; al elemento; úsalo cuando necesites ajustar scroll-margin con esta utilidad.

relleno de desplazamiento

Fuente oficial: https://tailwindcss.com/docs/scroll-padding

Utilidades para controlar el desplazamiento de un elemento dentro de un contenedor instantáneo.

Clase de UtilidadPropiedad CSSExplicación Breve
scroll-p- <number>scroll-padding: calc(var(--spacing) * <number> );Aplica scroll-padding: calc(var(--spacing) * <number> ); al elemento; úsalo cuando necesites ajustar scroll-padding con esta utilidad.
-scroll-p- <number>scroll-padding: calc(var(--spacing) * - <number> );Aplica scroll-padding: calc(var(--spacing) * - <number> ); al elemento; úsalo cuando necesites ajustar scroll-padding con esta utilidad.
scroll-p-( <custom-property> )scroll-padding: var( <custom-property> );Aplica scroll-padding: var( <custom-property> ); al elemento; úsalo cuando necesites ajustar scroll-padding con esta utilidad.
scroll-p-[ <value> ]scroll-padding: <value> ;Aplica scroll-padding: <value> ; al elemento; úsalo cuando necesites ajustar scroll-padding con esta utilidad.
scroll-px- <number>scroll-padding-inline: calc(var(--spacing) * <number> );Aplica scroll-padding-inline: calc(var(--spacing) * <number> ); al elemento; úsalo cuando necesites ajustar scroll-padding con esta utilidad.
-scroll-px- <number>scroll-padding-inline: calc(var(--spacing) * - <number> );Aplica scroll-padding-inline: calc(var(--spacing) * - <number> ); al elemento; úsalo cuando necesites ajustar scroll-padding con esta utilidad.
scroll-px-( <custom-property> )scroll-padding-inline: var( <custom-property> );Aplica scroll-padding-inline: var( <custom-property> ); al elemento; úsalo cuando necesites ajustar scroll-padding con esta utilidad.
scroll-px-[ <value> ]scroll-padding-inline: <value> ;Aplica scroll-padding-inline: <value> ; al elemento; úsalo cuando necesites ajustar scroll-padding con esta utilidad.
scroll-py- <number>scroll-padding-block: calc(var(--spacing) * <number> );Aplica scroll-padding-block: calc(var(--spacing) * <number> ); al elemento; úsalo cuando necesites ajustar scroll-padding con esta utilidad.
-scroll-py- <number>scroll-padding-block: calc(var(--spacing) * - <number> );Aplica scroll-padding-block: calc(var(--spacing) * - <number> ); al elemento; úsalo cuando necesites ajustar scroll-padding con esta utilidad.
scroll-py-( <custom-property> )scroll-padding-block: var( <custom-property> );Aplica scroll-padding-block: var( <custom-property> ); al elemento; úsalo cuando necesites ajustar scroll-padding con esta utilidad.
scroll-py-[ <value> ]scroll-padding-block: <value> ;Aplica scroll-padding-block: <value> ; al elemento; úsalo cuando necesites ajustar scroll-padding con esta utilidad.
scroll-ps- <number>scroll-padding-inline-start: calc(var(--spacing) * <number> );Aplica scroll-padding-inline-start: calc(var(--spacing) * <number> ); al elemento; úsalo cuando necesites ajustar scroll-padding con esta utilidad.
-scroll-ps- <number>scroll-padding-inline-start: calc(var(--spacing) * - <number> );Aplica scroll-padding-inline-start: calc(var(--spacing) * - <number> ); al elemento; úsalo cuando necesites ajustar scroll-padding con esta utilidad.
scroll-ps-( <custom-property> )scroll-padding-inline-start: var( <custom-property> );Aplica scroll-padding-inline-start: var( <custom-property> ); al elemento; úsalo cuando necesites ajustar scroll-padding con esta utilidad.
scroll-ps-[ <value> ]scroll-padding-inline-start: <value> ;Aplica scroll-padding-inline-start: <value> ; al elemento; úsalo cuando necesites ajustar scroll-padding con esta utilidad.
scroll-pe- <number>scroll-padding-inline-end: calc(var(--spacing) * <number> );Aplica scroll-padding-inline-end: calc(var(--spacing) * <number> ); al elemento; úsalo cuando necesites ajustar scroll-padding con esta utilidad.
-scroll-pe- <number>scroll-padding-inline-end: calc(var(--spacing) * - <number> );Aplica scroll-padding-inline-end: calc(var(--spacing) * - <number> ); al elemento; úsalo cuando necesites ajustar scroll-padding con esta utilidad.
scroll-pe-( <custom-property> )scroll-padding-inline-end: var( <custom-property> );Aplica scroll-padding-inline-end: var( <custom-property> ); al elemento; úsalo cuando necesites ajustar scroll-padding con esta utilidad.
scroll-pe-[ <value> ]scroll-padding-inline-end: <value> ;Aplica scroll-padding-inline-end: <value> ; al elemento; úsalo cuando necesites ajustar scroll-padding con esta utilidad.
scroll-pbs- <number>scroll-padding-block-start: calc(var(--spacing) * <number> );Aplica scroll-padding-block-start: calc(var(--spacing) * <number> ); al elemento; úsalo cuando necesites ajustar scroll-padding con esta utilidad.
-scroll-pbs- <number>scroll-padding-block-start: calc(var(--spacing) * - <number> );Aplica scroll-padding-block-start: calc(var(--spacing) * - <number> ); al elemento; úsalo cuando necesites ajustar scroll-padding con esta utilidad.
scroll-pbs-( <custom-property> )scroll-padding-block-start: var( <custom-property> );Aplica scroll-padding-block-start: var( <custom-property> ); al elemento; úsalo cuando necesites ajustar scroll-padding con esta utilidad.
scroll-pbs-[ <value> ]scroll-padding-block-start: <value> ;Aplica scroll-padding-block-start: <value> ; al elemento; úsalo cuando necesites ajustar scroll-padding con esta utilidad.
scroll-pbe- <number>scroll-padding-block-end: calc(var(--spacing) * <number> );Aplica scroll-padding-block-end: calc(var(--spacing) * <number> ); al elemento; úsalo cuando necesites ajustar scroll-padding con esta utilidad.
-scroll-pbe- <number>scroll-padding-block-end: calc(var(--spacing) * - <number> );Aplica scroll-padding-block-end: calc(var(--spacing) * - <number> ); al elemento; úsalo cuando necesites ajustar scroll-padding con esta utilidad.
scroll-pbe-( <custom-property> )scroll-padding-block-end: var( <custom-property> );Aplica scroll-padding-block-end: var( <custom-property> ); al elemento; úsalo cuando necesites ajustar scroll-padding con esta utilidad.
scroll-pbe-[ <value> ]scroll-padding-block-end: <value> ;Aplica scroll-padding-block-end: <value> ; al elemento; úsalo cuando necesites ajustar scroll-padding con esta utilidad.
scroll-pt- <number>scroll-padding-top: calc(var(--spacing) * <number> );Aplica scroll-padding-top: calc(var(--spacing) * <number> ); al elemento; úsalo cuando necesites ajustar scroll-padding con esta utilidad.
-scroll-pt- <number>scroll-padding-top: calc(var(--spacing) * - <number> );Aplica scroll-padding-top: calc(var(--spacing) * - <number> ); al elemento; úsalo cuando necesites ajustar scroll-padding con esta utilidad.
scroll-pt-( <custom-property> )scroll-padding-top: var( <custom-property> );Aplica scroll-padding-top: var( <custom-property> ); al elemento; úsalo cuando necesites ajustar scroll-padding con esta utilidad.
scroll-pt-[ <value> ]scroll-padding-top: <value> ;Aplica scroll-padding-top: <value> ; al elemento; úsalo cuando necesites ajustar scroll-padding con esta utilidad.
scroll-pr- <number>scroll-padding-right: calc(var(--spacing) * <number> );Aplica scroll-padding-right: calc(var(--spacing) * <number> ); al elemento; úsalo cuando necesites ajustar scroll-padding con esta utilidad.
-scroll-pr- <number>scroll-padding-right: calc(var(--spacing) * - <number> );Aplica scroll-padding-right: calc(var(--spacing) * - <number> ); al elemento; úsalo cuando necesites ajustar scroll-padding con esta utilidad.
scroll-pr-( <custom-property> )scroll-padding-right: var( <custom-property> );Aplica scroll-padding-right: var( <custom-property> ); al elemento; úsalo cuando necesites ajustar scroll-padding con esta utilidad.
scroll-pr-[ <value> ]scroll-padding-right: <value> ;Aplica scroll-padding-right: <value> ; al elemento; úsalo cuando necesites ajustar scroll-padding con esta utilidad.
scroll-pb- <number>scroll-padding-bottom: calc(var(--spacing) * <number> );Aplica scroll-padding-bottom: calc(var(--spacing) * <number> ); al elemento; úsalo cuando necesites ajustar scroll-padding con esta utilidad.
-scroll-pb- <number>scroll-padding-bottom: calc(var(--spacing) * - <number> );Aplica scroll-padding-bottom: calc(var(--spacing) * - <number> ); al elemento; úsalo cuando necesites ajustar scroll-padding con esta utilidad.
scroll-pb-( <custom-property> )scroll-padding-bottom: var( <custom-property> );Aplica scroll-padding-bottom: var( <custom-property> ); al elemento; úsalo cuando necesites ajustar scroll-padding con esta utilidad.
scroll-pb-[ <value> ]scroll-padding-bottom: <value> ;Aplica scroll-padding-bottom: <value> ; al elemento; úsalo cuando necesites ajustar scroll-padding con esta utilidad.
scroll-pl- <number>scroll-padding-left: calc(var(--spacing) * <number> );Aplica scroll-padding-left: calc(var(--spacing) * <number> ); al elemento; úsalo cuando necesites ajustar scroll-padding con esta utilidad.
-scroll-pl- <number>scroll-padding-left: calc(var(--spacing) * - <number> );Aplica scroll-padding-left: calc(var(--spacing) * - <number> ); al elemento; úsalo cuando necesites ajustar scroll-padding con esta utilidad.
scroll-pl-( <custom-property> )scroll-padding-left: var( <custom-property> );Aplica scroll-padding-left: var( <custom-property> ); al elemento; úsalo cuando necesites ajustar scroll-padding con esta utilidad.
scroll-pl-[ <value> ]scroll-padding-left: <value> ;Aplica scroll-padding-left: <value> ; al elemento; úsalo cuando necesites ajustar scroll-padding con esta utilidad.

desplazamiento-alineación-alineación

Fuente oficial: https://tailwindcss.com/docs/scroll-snap-align

Utilidades para controlar la alineación de desplazamiento de un elemento.

Clase de UtilidadPropiedad CSSExplicación Breve
snap-startscroll-snap-align: start;Aplica scroll-snap-align: start; al elemento; úsalo cuando necesites ajustar scroll-snap-align con esta utilidad.
snap-endscroll-snap-align: end;Aplica scroll-snap-align: end; al elemento; úsalo cuando necesites ajustar scroll-snap-align con esta utilidad.
snap-centerscroll-snap-align: center;Aplica scroll-snap-align: center; al elemento; úsalo cuando necesites ajustar scroll-snap-align con esta utilidad.
snap-align-nonescroll-snap-align: none;Aplica scroll-snap-align: none; al elemento; úsalo cuando necesites ajustar scroll-snap-align con esta utilidad.

parada-desplazamiento-snap

Fuente oficial: https://tailwindcss.com/docs/scroll-snap-stop

Utilidades para controlar si puede omitir posibles posiciones de ajuste.

Clase de UtilidadPropiedad CSSExplicación Breve
snap-normalscroll-snap-stop: normal;Aplica scroll-snap-stop: normal; al elemento; úsalo cuando necesites ajustar scroll-snap-stop con esta utilidad.
snap-alwaysscroll-snap-stop: always;Aplica scroll-snap-stop: always; al elemento; úsalo cuando necesites ajustar scroll-snap-stop con esta utilidad.

tipo de desplazamiento

Fuente oficial: https://tailwindcss.com/docs/scroll-snap-type

Utilidades para controlar cuán estrictamente se aplican los puntos de ajuste en un contenedor de ajuste.

Clase de UtilidadPropiedad CSSExplicación Breve
snap-nonescroll-snap-type: none;Aplica scroll-snap-type: none; al elemento; úsalo cuando necesites ajustar scroll-snap-type con esta utilidad.
snap-xscroll-snap-type: x var(--tw-scroll-snap-strictness);Aplica scroll-snap-type: x var(--tw-scroll-snap-strictness); al elemento; úsalo cuando necesites ajustar scroll-snap-type con esta utilidad.
snap-yscroll-snap-type: y var(--tw-scroll-snap-strictness);Aplica scroll-snap-type: y var(--tw-scroll-snap-strictness); al elemento; úsalo cuando necesites ajustar scroll-snap-type con esta utilidad.
snap-bothscroll-snap-type: both var(--tw-scroll-snap-strictness);Aplica scroll-snap-type: both var(--tw-scroll-snap-strictness); al elemento; úsalo cuando necesites ajustar scroll-snap-type con esta utilidad.
snap-mandatory--tw-scroll-snap-strictness: mandatory;Aplica --tw-scroll-snap-strictness: mandatory; al elemento; úsalo cuando necesites ajustar scroll-snap-type con esta utilidad.
snap-proximity--tw-scroll-snap-strictness: proximity;Aplica --tw-scroll-snap-strictness: proximity; al elemento; úsalo cuando necesites ajustar scroll-snap-type con esta utilidad.

acción táctil

Fuente oficial: https://tailwindcss.com/docs/touch-action

Utilidades para controlar cómo se puede desplazar y hacer zoom un elemento en pantallas táctiles.

Clase de UtilidadPropiedad CSSExplicación Breve
touch-autotouch-action: auto;Aplica touch-action: auto; al elemento; úsalo cuando necesites ajustar touch-action con esta utilidad.
touch-nonetouch-action: none;Aplica touch-action: none; al elemento; úsalo cuando necesites ajustar touch-action con esta utilidad.
touch-pan-xtouch-action: pan-x;Aplica touch-action: pan-x; al elemento; úsalo cuando necesites ajustar touch-action con esta utilidad.
touch-pan-lefttouch-action: pan-left;Aplica touch-action: pan-left; al elemento; úsalo cuando necesites ajustar touch-action con esta utilidad.
touch-pan-righttouch-action: pan-right;Aplica touch-action: pan-right; al elemento; úsalo cuando necesites ajustar touch-action con esta utilidad.
touch-pan-ytouch-action: pan-y;Aplica touch-action: pan-y; al elemento; úsalo cuando necesites ajustar touch-action con esta utilidad.
touch-pan-uptouch-action: pan-up;Aplica touch-action: pan-up; al elemento; úsalo cuando necesites ajustar touch-action con esta utilidad.
touch-pan-downtouch-action: pan-down;Aplica touch-action: pan-down; al elemento; úsalo cuando necesites ajustar touch-action con esta utilidad.
touch-pinch-zoomtouch-action: pinch-zoom;Aplica touch-action: pinch-zoom; al elemento; úsalo cuando necesites ajustar touch-action con esta utilidad.
touch-manipulationtouch-action: manipulation;Aplica touch-action: manipulation; al elemento; úsalo cuando necesites ajustar touch-action con esta utilidad.

selección de usuario

Fuente oficial: https://tailwindcss.com/docs/user-select

Utilidades para controlar si el usuario puede seleccionar texto en un elemento.

Clase de UtilidadPropiedad CSSExplicación Breve
select-noneuser-select: none;Aplica user-select: none; al elemento; úsalo cuando necesites ajustar user-select con esta utilidad.
select-textuser-select: text;Aplica user-select: text; al elemento; úsalo cuando necesites ajustar user-select con esta utilidad.
select-alluser-select: all;Aplica user-select: all; al elemento; úsalo cuando necesites ajustar user-select con esta utilidad.
select-autouser-select: auto;Aplica user-select: auto; al elemento; úsalo cuando necesites ajustar user-select con esta utilidad.

cambiará

Fuente oficial: https://tailwindcss.com/docs/will-change

Utilidades para optimizar próximas animaciones de elementos que se espera que cambien.

Clase de UtilidadPropiedad CSSExplicación Breve
will-change-autowill-change: auto;Aplica will-change: auto; al elemento; úsalo cuando necesites ajustar will-change con esta utilidad.
will-change-scrollwill-change: scroll-position;Aplica will-change: scroll-position; al elemento; úsalo cuando necesites ajustar will-change con esta utilidad.
will-change-contentswill-change: contents;Aplica will-change: contents; al elemento; úsalo cuando necesites ajustar will-change con esta utilidad.
will-change-transformwill-change: transform;Aplica will-change: transform; al elemento; úsalo cuando necesites ajustar will-change con esta utilidad.
will-change- <custom-property>will-change: var( <custom-property> );Aplica will-change: var( <custom-property> ); al elemento; úsalo cuando necesites ajustar will-change con esta utilidad.
will-change-[ <value> ]will-change: <value> ;Aplica will-change: <value> ; al elemento; úsalo cuando necesites ajustar will-change con esta utilidad.

llenar

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

Utilidades para diseñar el relleno de elementos SVG.

Clase de UtilidadPropiedad CSSExplicación Breve
fill-nonefill: none;Aplica fill: none; al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-inheritfill: inherit;Aplica fill: inherit; al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-currentfill: currentColor;Aplica fill: currentColor; al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-transparentfill: transparent;Aplica fill: transparent; al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-blackfill: var(--color-black); /* #000 */Aplica fill: var(--color-black); /* #000 */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-whitefill: var(--color-white); /* #fff */Aplica fill: var(--color-white); /* #fff */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-red-50fill: var(--color-red-50); /* oklch(97.1% 0.013 17.38) */Aplica fill: var(--color-red-50); /* oklch(97.1% 0.013 17.38) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-red-100fill: var(--color-red-100); /* oklch(93.6% 0.032 17.717) */Aplica fill: var(--color-red-100); /* oklch(93.6% 0.032 17.717) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-red-200fill: var(--color-red-200); /* oklch(88.5% 0.062 18.334) */Aplica fill: var(--color-red-200); /* oklch(88.5% 0.062 18.334) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-red-300fill: var(--color-red-300); /* oklch(80.8% 0.114 19.571) */Aplica fill: var(--color-red-300); /* oklch(80.8% 0.114 19.571) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-red-400fill: var(--color-red-400); /* oklch(70.4% 0.191 22.216) */Aplica fill: var(--color-red-400); /* oklch(70.4% 0.191 22.216) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-red-500fill: var(--color-red-500); /* oklch(63.7% 0.237 25.331) */Aplica fill: var(--color-red-500); /* oklch(63.7% 0.237 25.331) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-red-600fill: var(--color-red-600); /* oklch(57.7% 0.245 27.325) */Aplica fill: var(--color-red-600); /* oklch(57.7% 0.245 27.325) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-red-700fill: var(--color-red-700); /* oklch(50.5% 0.213 27.518) */Aplica fill: var(--color-red-700); /* oklch(50.5% 0.213 27.518) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-red-800fill: var(--color-red-800); /* oklch(44.4% 0.177 26.899) */Aplica fill: var(--color-red-800); /* oklch(44.4% 0.177 26.899) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-red-900fill: var(--color-red-900); /* oklch(39.6% 0.141 25.723) */Aplica fill: var(--color-red-900); /* oklch(39.6% 0.141 25.723) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-red-950fill: var(--color-red-950); /* oklch(25.8% 0.092 26.042) */Aplica fill: var(--color-red-950); /* oklch(25.8% 0.092 26.042) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-orange-50fill: var(--color-orange-50); /* oklch(98% 0.016 73.684) */Aplica fill: var(--color-orange-50); /* oklch(98% 0.016 73.684) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-orange-100fill: var(--color-orange-100); /* oklch(95.4% 0.038 75.164) */Aplica fill: var(--color-orange-100); /* oklch(95.4% 0.038 75.164) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-orange-200fill: var(--color-orange-200); /* oklch(90.1% 0.076 70.697) */Aplica fill: var(--color-orange-200); /* oklch(90.1% 0.076 70.697) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-orange-300fill: var(--color-orange-300); /* oklch(83.7% 0.128 66.29) */Aplica fill: var(--color-orange-300); /* oklch(83.7% 0.128 66.29) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-orange-400fill: var(--color-orange-400); /* oklch(75% 0.183 55.934) */Aplica fill: var(--color-orange-400); /* oklch(75% 0.183 55.934) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-orange-500fill: var(--color-orange-500); /* oklch(70.5% 0.213 47.604) */Aplica fill: var(--color-orange-500); /* oklch(70.5% 0.213 47.604) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-orange-600fill: var(--color-orange-600); /* oklch(64.6% 0.222 41.116) */Aplica fill: var(--color-orange-600); /* oklch(64.6% 0.222 41.116) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-orange-700fill: var(--color-orange-700); /* oklch(55.3% 0.195 38.402) */Aplica fill: var(--color-orange-700); /* oklch(55.3% 0.195 38.402) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-orange-800fill: var(--color-orange-800); /* oklch(47% 0.157 37.304) */Aplica fill: var(--color-orange-800); /* oklch(47% 0.157 37.304) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-orange-900fill: var(--color-orange-900); /* oklch(40.8% 0.123 38.172) */Aplica fill: var(--color-orange-900); /* oklch(40.8% 0.123 38.172) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-orange-950fill: var(--color-orange-950); /* oklch(26.6% 0.079 36.259) */Aplica fill: var(--color-orange-950); /* oklch(26.6% 0.079 36.259) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-amber-50fill: var(--color-amber-50); /* oklch(98.7% 0.022 95.277) */Aplica fill: var(--color-amber-50); /* oklch(98.7% 0.022 95.277) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-amber-100fill: var(--color-amber-100); /* oklch(96.2% 0.059 95.617) */Aplica fill: var(--color-amber-100); /* oklch(96.2% 0.059 95.617) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-amber-200fill: var(--color-amber-200); /* oklch(92.4% 0.12 95.746) */Aplica fill: var(--color-amber-200); /* oklch(92.4% 0.12 95.746) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-amber-300fill: var(--color-amber-300); /* oklch(87.9% 0.169 91.605) */Aplica fill: var(--color-amber-300); /* oklch(87.9% 0.169 91.605) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-amber-400fill: var(--color-amber-400); /* oklch(82.8% 0.189 84.429) */Aplica fill: var(--color-amber-400); /* oklch(82.8% 0.189 84.429) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-amber-500fill: var(--color-amber-500); /* oklch(76.9% 0.188 70.08) */Aplica fill: var(--color-amber-500); /* oklch(76.9% 0.188 70.08) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-amber-600fill: var(--color-amber-600); /* oklch(66.6% 0.179 58.318) */Aplica fill: var(--color-amber-600); /* oklch(66.6% 0.179 58.318) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-amber-700fill: var(--color-amber-700); /* oklch(55.5% 0.163 48.998) */Aplica fill: var(--color-amber-700); /* oklch(55.5% 0.163 48.998) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-amber-800fill: var(--color-amber-800); /* oklch(47.3% 0.137 46.201) */Aplica fill: var(--color-amber-800); /* oklch(47.3% 0.137 46.201) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-amber-900fill: var(--color-amber-900); /* oklch(41.4% 0.112 45.904) */Aplica fill: var(--color-amber-900); /* oklch(41.4% 0.112 45.904) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-amber-950fill: var(--color-amber-950); /* oklch(27.9% 0.077 45.635) */Aplica fill: var(--color-amber-950); /* oklch(27.9% 0.077 45.635) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-yellow-50fill: var(--color-yellow-50); /* oklch(98.7% 0.026 102.212) */Aplica fill: var(--color-yellow-50); /* oklch(98.7% 0.026 102.212) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-yellow-100fill: var(--color-yellow-100); /* oklch(97.3% 0.071 103.193) */Aplica fill: var(--color-yellow-100); /* oklch(97.3% 0.071 103.193) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-yellow-200fill: var(--color-yellow-200); /* oklch(94.5% 0.129 101.54) */Aplica fill: var(--color-yellow-200); /* oklch(94.5% 0.129 101.54) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-yellow-300fill: var(--color-yellow-300); /* oklch(90.5% 0.182 98.111) */Aplica fill: var(--color-yellow-300); /* oklch(90.5% 0.182 98.111) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-yellow-400fill: var(--color-yellow-400); /* oklch(85.2% 0.199 91.936) */Aplica fill: var(--color-yellow-400); /* oklch(85.2% 0.199 91.936) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-yellow-500fill: var(--color-yellow-500); /* oklch(79.5% 0.184 86.047) */Aplica fill: var(--color-yellow-500); /* oklch(79.5% 0.184 86.047) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-yellow-600fill: var(--color-yellow-600); /* oklch(68.1% 0.162 75.834) */Aplica fill: var(--color-yellow-600); /* oklch(68.1% 0.162 75.834) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-yellow-700fill: var(--color-yellow-700); /* oklch(55.4% 0.135 66.442) */Aplica fill: var(--color-yellow-700); /* oklch(55.4% 0.135 66.442) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-yellow-800fill: var(--color-yellow-800); /* oklch(47.6% 0.114 61.907) */Aplica fill: var(--color-yellow-800); /* oklch(47.6% 0.114 61.907) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-yellow-900fill: var(--color-yellow-900); /* oklch(42.1% 0.095 57.708) */Aplica fill: var(--color-yellow-900); /* oklch(42.1% 0.095 57.708) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-yellow-950fill: var(--color-yellow-950); /* oklch(28.6% 0.066 53.813) */Aplica fill: var(--color-yellow-950); /* oklch(28.6% 0.066 53.813) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-lime-50fill: var(--color-lime-50); /* oklch(98.6% 0.031 120.757) */Aplica fill: var(--color-lime-50); /* oklch(98.6% 0.031 120.757) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-lime-100fill: var(--color-lime-100); /* oklch(96.7% 0.067 122.328) */Aplica fill: var(--color-lime-100); /* oklch(96.7% 0.067 122.328) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-lime-200fill: var(--color-lime-200); /* oklch(93.8% 0.127 124.321) */Aplica fill: var(--color-lime-200); /* oklch(93.8% 0.127 124.321) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-lime-300fill: var(--color-lime-300); /* oklch(89.7% 0.196 126.665) */Aplica fill: var(--color-lime-300); /* oklch(89.7% 0.196 126.665) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-lime-400fill: var(--color-lime-400); /* oklch(84.1% 0.238 128.85) */Aplica fill: var(--color-lime-400); /* oklch(84.1% 0.238 128.85) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-lime-500fill: var(--color-lime-500); /* oklch(76.8% 0.233 130.85) */Aplica fill: var(--color-lime-500); /* oklch(76.8% 0.233 130.85) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-lime-600fill: var(--color-lime-600); /* oklch(64.8% 0.2 131.684) */Aplica fill: var(--color-lime-600); /* oklch(64.8% 0.2 131.684) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-lime-700fill: var(--color-lime-700); /* oklch(53.2% 0.157 131.589) */Aplica fill: var(--color-lime-700); /* oklch(53.2% 0.157 131.589) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-lime-800fill: var(--color-lime-800); /* oklch(45.3% 0.124 130.933) */Aplica fill: var(--color-lime-800); /* oklch(45.3% 0.124 130.933) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-lime-900fill: var(--color-lime-900); /* oklch(40.5% 0.101 131.063) */Aplica fill: var(--color-lime-900); /* oklch(40.5% 0.101 131.063) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-lime-950fill: var(--color-lime-950); /* oklch(27.4% 0.072 132.109) */Aplica fill: var(--color-lime-950); /* oklch(27.4% 0.072 132.109) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-green-50fill: var(--color-green-50); /* oklch(98.2% 0.018 155.826) */Aplica fill: var(--color-green-50); /* oklch(98.2% 0.018 155.826) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-green-100fill: var(--color-green-100); /* oklch(96.2% 0.044 156.743) */Aplica fill: var(--color-green-100); /* oklch(96.2% 0.044 156.743) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-green-200fill: var(--color-green-200); /* oklch(92.5% 0.084 155.995) */Aplica fill: var(--color-green-200); /* oklch(92.5% 0.084 155.995) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-green-300fill: var(--color-green-300); /* oklch(87.1% 0.15 154.449) */Aplica fill: var(--color-green-300); /* oklch(87.1% 0.15 154.449) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-green-400fill: var(--color-green-400); /* oklch(79.2% 0.209 151.711) */Aplica fill: var(--color-green-400); /* oklch(79.2% 0.209 151.711) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-green-500fill: var(--color-green-500); /* oklch(72.3% 0.219 149.579) */Aplica fill: var(--color-green-500); /* oklch(72.3% 0.219 149.579) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-green-600fill: var(--color-green-600); /* oklch(62.7% 0.194 149.214) */Aplica fill: var(--color-green-600); /* oklch(62.7% 0.194 149.214) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-green-700fill: var(--color-green-700); /* oklch(52.7% 0.154 150.069) */Aplica fill: var(--color-green-700); /* oklch(52.7% 0.154 150.069) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-green-800fill: var(--color-green-800); /* oklch(44.8% 0.119 151.328) */Aplica fill: var(--color-green-800); /* oklch(44.8% 0.119 151.328) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-green-900fill: var(--color-green-900); /* oklch(39.3% 0.095 152.535) */Aplica fill: var(--color-green-900); /* oklch(39.3% 0.095 152.535) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-green-950fill: var(--color-green-950); /* oklch(26.6% 0.065 152.934) */Aplica fill: var(--color-green-950); /* oklch(26.6% 0.065 152.934) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-emerald-50fill: var(--color-emerald-50); /* oklch(97.9% 0.021 166.113) */Aplica fill: var(--color-emerald-50); /* oklch(97.9% 0.021 166.113) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-emerald-100fill: var(--color-emerald-100); /* oklch(95% 0.052 163.051) */Aplica fill: var(--color-emerald-100); /* oklch(95% 0.052 163.051) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-emerald-200fill: var(--color-emerald-200); /* oklch(90.5% 0.093 164.15) */Aplica fill: var(--color-emerald-200); /* oklch(90.5% 0.093 164.15) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-emerald-300fill: var(--color-emerald-300); /* oklch(84.5% 0.143 164.978) */Aplica fill: var(--color-emerald-300); /* oklch(84.5% 0.143 164.978) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-emerald-400fill: var(--color-emerald-400); /* oklch(76.5% 0.177 163.223) */Aplica fill: var(--color-emerald-400); /* oklch(76.5% 0.177 163.223) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-emerald-500fill: var(--color-emerald-500); /* oklch(69.6% 0.17 162.48) */Aplica fill: var(--color-emerald-500); /* oklch(69.6% 0.17 162.48) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-emerald-600fill: var(--color-emerald-600); /* oklch(59.6% 0.145 163.225) */Aplica fill: var(--color-emerald-600); /* oklch(59.6% 0.145 163.225) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-emerald-700fill: var(--color-emerald-700); /* oklch(50.8% 0.118 165.612) */Aplica fill: var(--color-emerald-700); /* oklch(50.8% 0.118 165.612) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-emerald-800fill: var(--color-emerald-800); /* oklch(43.2% 0.095 166.913) */Aplica fill: var(--color-emerald-800); /* oklch(43.2% 0.095 166.913) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-emerald-900fill: var(--color-emerald-900); /* oklch(37.8% 0.077 168.94) */Aplica fill: var(--color-emerald-900); /* oklch(37.8% 0.077 168.94) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-emerald-950fill: var(--color-emerald-950); /* oklch(26.2% 0.051 172.552) */Aplica fill: var(--color-emerald-950); /* oklch(26.2% 0.051 172.552) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-teal-50fill: var(--color-teal-50); /* oklch(98.4% 0.014 180.72) */Aplica fill: var(--color-teal-50); /* oklch(98.4% 0.014 180.72) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-teal-100fill: var(--color-teal-100); /* oklch(95.3% 0.051 180.801) */Aplica fill: var(--color-teal-100); /* oklch(95.3% 0.051 180.801) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-teal-200fill: var(--color-teal-200); /* oklch(91% 0.096 180.426) */Aplica fill: var(--color-teal-200); /* oklch(91% 0.096 180.426) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-teal-300fill: var(--color-teal-300); /* oklch(85.5% 0.138 181.071) */Aplica fill: var(--color-teal-300); /* oklch(85.5% 0.138 181.071) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-teal-400fill: var(--color-teal-400); /* oklch(77.7% 0.152 181.912) */Aplica fill: var(--color-teal-400); /* oklch(77.7% 0.152 181.912) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-teal-500fill: var(--color-teal-500); /* oklch(70.4% 0.14 182.503) */Aplica fill: var(--color-teal-500); /* oklch(70.4% 0.14 182.503) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-teal-600fill: var(--color-teal-600); /* oklch(60% 0.118 184.704) */Aplica fill: var(--color-teal-600); /* oklch(60% 0.118 184.704) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-teal-700fill: var(--color-teal-700); /* oklch(51.1% 0.096 186.391) */Aplica fill: var(--color-teal-700); /* oklch(51.1% 0.096 186.391) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-teal-800fill: var(--color-teal-800); /* oklch(43.7% 0.078 188.216) */Aplica fill: var(--color-teal-800); /* oklch(43.7% 0.078 188.216) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-teal-900fill: var(--color-teal-900); /* oklch(38.6% 0.063 188.416) */Aplica fill: var(--color-teal-900); /* oklch(38.6% 0.063 188.416) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-teal-950fill: var(--color-teal-950); /* oklch(27.7% 0.046 192.524) */Aplica fill: var(--color-teal-950); /* oklch(27.7% 0.046 192.524) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-cyan-50fill: var(--color-cyan-50); /* oklch(98.4% 0.019 200.873) */Aplica fill: var(--color-cyan-50); /* oklch(98.4% 0.019 200.873) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-cyan-100fill: var(--color-cyan-100); /* oklch(95.6% 0.045 203.388) */Aplica fill: var(--color-cyan-100); /* oklch(95.6% 0.045 203.388) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-cyan-200fill: var(--color-cyan-200); /* oklch(91.7% 0.08 205.041) */Aplica fill: var(--color-cyan-200); /* oklch(91.7% 0.08 205.041) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-cyan-300fill: var(--color-cyan-300); /* oklch(86.5% 0.127 207.078) */Aplica fill: var(--color-cyan-300); /* oklch(86.5% 0.127 207.078) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-cyan-400fill: var(--color-cyan-400); /* oklch(78.9% 0.154 211.53) */Aplica fill: var(--color-cyan-400); /* oklch(78.9% 0.154 211.53) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-cyan-500fill: var(--color-cyan-500); /* oklch(71.5% 0.143 215.221) */Aplica fill: var(--color-cyan-500); /* oklch(71.5% 0.143 215.221) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-cyan-600fill: var(--color-cyan-600); /* oklch(60.9% 0.126 221.723) */Aplica fill: var(--color-cyan-600); /* oklch(60.9% 0.126 221.723) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-cyan-700fill: var(--color-cyan-700); /* oklch(52% 0.105 223.128) */Aplica fill: var(--color-cyan-700); /* oklch(52% 0.105 223.128) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-cyan-800fill: var(--color-cyan-800); /* oklch(45% 0.085 224.283) */Aplica fill: var(--color-cyan-800); /* oklch(45% 0.085 224.283) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-cyan-900fill: var(--color-cyan-900); /* oklch(39.8% 0.07 227.392) */Aplica fill: var(--color-cyan-900); /* oklch(39.8% 0.07 227.392) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-cyan-950fill: var(--color-cyan-950); /* oklch(30.2% 0.056 229.695) */Aplica fill: var(--color-cyan-950); /* oklch(30.2% 0.056 229.695) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-sky-50fill: var(--color-sky-50); /* oklch(97.7% 0.013 236.62) */Aplica fill: var(--color-sky-50); /* oklch(97.7% 0.013 236.62) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-sky-100fill: var(--color-sky-100); /* oklch(95.1% 0.026 236.824) */Aplica fill: var(--color-sky-100); /* oklch(95.1% 0.026 236.824) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-sky-200fill: var(--color-sky-200); /* oklch(90.1% 0.058 230.902) */Aplica fill: var(--color-sky-200); /* oklch(90.1% 0.058 230.902) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-sky-300fill: var(--color-sky-300); /* oklch(82.8% 0.111 230.318) */Aplica fill: var(--color-sky-300); /* oklch(82.8% 0.111 230.318) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-sky-400fill: var(--color-sky-400); /* oklch(74.6% 0.16 232.661) */Aplica fill: var(--color-sky-400); /* oklch(74.6% 0.16 232.661) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-sky-500fill: var(--color-sky-500); /* oklch(68.5% 0.169 237.323) */Aplica fill: var(--color-sky-500); /* oklch(68.5% 0.169 237.323) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-sky-600fill: var(--color-sky-600); /* oklch(58.8% 0.158 241.966) */Aplica fill: var(--color-sky-600); /* oklch(58.8% 0.158 241.966) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-sky-700fill: var(--color-sky-700); /* oklch(50% 0.134 242.749) */Aplica fill: var(--color-sky-700); /* oklch(50% 0.134 242.749) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-sky-800fill: var(--color-sky-800); /* oklch(44.3% 0.11 240.79) */Aplica fill: var(--color-sky-800); /* oklch(44.3% 0.11 240.79) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-sky-900fill: var(--color-sky-900); /* oklch(39.1% 0.09 240.876) */Aplica fill: var(--color-sky-900); /* oklch(39.1% 0.09 240.876) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-sky-950fill: var(--color-sky-950); /* oklch(29.3% 0.066 243.157) */Aplica fill: var(--color-sky-950); /* oklch(29.3% 0.066 243.157) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-blue-50fill: var(--color-blue-50); /* oklch(97% 0.014 254.604) */Aplica fill: var(--color-blue-50); /* oklch(97% 0.014 254.604) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-blue-100fill: var(--color-blue-100); /* oklch(93.2% 0.032 255.585) */Aplica fill: var(--color-blue-100); /* oklch(93.2% 0.032 255.585) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-blue-200fill: var(--color-blue-200); /* oklch(88.2% 0.059 254.128) */Aplica fill: var(--color-blue-200); /* oklch(88.2% 0.059 254.128) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-blue-300fill: var(--color-blue-300); /* oklch(80.9% 0.105 251.813) */Aplica fill: var(--color-blue-300); /* oklch(80.9% 0.105 251.813) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-blue-400fill: var(--color-blue-400); /* oklch(70.7% 0.165 254.624) */Aplica fill: var(--color-blue-400); /* oklch(70.7% 0.165 254.624) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-blue-500fill: var(--color-blue-500); /* oklch(62.3% 0.214 259.815) */Aplica fill: var(--color-blue-500); /* oklch(62.3% 0.214 259.815) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-blue-600fill: var(--color-blue-600); /* oklch(54.6% 0.245 262.881) */Aplica fill: var(--color-blue-600); /* oklch(54.6% 0.245 262.881) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-blue-700fill: var(--color-blue-700); /* oklch(48.8% 0.243 264.376) */Aplica fill: var(--color-blue-700); /* oklch(48.8% 0.243 264.376) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-blue-800fill: var(--color-blue-800); /* oklch(42.4% 0.199 265.638) */Aplica fill: var(--color-blue-800); /* oklch(42.4% 0.199 265.638) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-blue-900fill: var(--color-blue-900); /* oklch(37.9% 0.146 265.522) */Aplica fill: var(--color-blue-900); /* oklch(37.9% 0.146 265.522) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-blue-950fill: var(--color-blue-950); /* oklch(28.2% 0.091 267.935) */Aplica fill: var(--color-blue-950); /* oklch(28.2% 0.091 267.935) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-indigo-50fill: var(--color-indigo-50); /* oklch(96.2% 0.018 272.314) */Aplica fill: var(--color-indigo-50); /* oklch(96.2% 0.018 272.314) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-indigo-100fill: var(--color-indigo-100); /* oklch(93% 0.034 272.788) */Aplica fill: var(--color-indigo-100); /* oklch(93% 0.034 272.788) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-indigo-200fill: var(--color-indigo-200); /* oklch(87% 0.065 274.039) */Aplica fill: var(--color-indigo-200); /* oklch(87% 0.065 274.039) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-indigo-300fill: var(--color-indigo-300); /* oklch(78.5% 0.115 274.713) */Aplica fill: var(--color-indigo-300); /* oklch(78.5% 0.115 274.713) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-indigo-400fill: var(--color-indigo-400); /* oklch(67.3% 0.182 276.935) */Aplica fill: var(--color-indigo-400); /* oklch(67.3% 0.182 276.935) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-indigo-500fill: var(--color-indigo-500); /* oklch(58.5% 0.233 277.117) */Aplica fill: var(--color-indigo-500); /* oklch(58.5% 0.233 277.117) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-indigo-600fill: var(--color-indigo-600); /* oklch(51.1% 0.262 276.966) */Aplica fill: var(--color-indigo-600); /* oklch(51.1% 0.262 276.966) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-indigo-700fill: var(--color-indigo-700); /* oklch(45.7% 0.24 277.023) */Aplica fill: var(--color-indigo-700); /* oklch(45.7% 0.24 277.023) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-indigo-800fill: var(--color-indigo-800); /* oklch(39.8% 0.195 277.366) */Aplica fill: var(--color-indigo-800); /* oklch(39.8% 0.195 277.366) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-indigo-900fill: var(--color-indigo-900); /* oklch(35.9% 0.144 278.697) */Aplica fill: var(--color-indigo-900); /* oklch(35.9% 0.144 278.697) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-indigo-950fill: var(--color-indigo-950); /* oklch(25.7% 0.09 281.288) */Aplica fill: var(--color-indigo-950); /* oklch(25.7% 0.09 281.288) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-violet-50fill: var(--color-violet-50); /* oklch(96.9% 0.016 293.756) */Aplica fill: var(--color-violet-50); /* oklch(96.9% 0.016 293.756) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-violet-100fill: var(--color-violet-100); /* oklch(94.3% 0.029 294.588) */Aplica fill: var(--color-violet-100); /* oklch(94.3% 0.029 294.588) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-violet-200fill: var(--color-violet-200); /* oklch(89.4% 0.057 293.283) */Aplica fill: var(--color-violet-200); /* oklch(89.4% 0.057 293.283) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-violet-300fill: var(--color-violet-300); /* oklch(81.1% 0.111 293.571) */Aplica fill: var(--color-violet-300); /* oklch(81.1% 0.111 293.571) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-violet-400fill: var(--color-violet-400); /* oklch(70.2% 0.183 293.541) */Aplica fill: var(--color-violet-400); /* oklch(70.2% 0.183 293.541) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-violet-500fill: var(--color-violet-500); /* oklch(60.6% 0.25 292.717) */Aplica fill: var(--color-violet-500); /* oklch(60.6% 0.25 292.717) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-violet-600fill: var(--color-violet-600); /* oklch(54.1% 0.281 293.009) */Aplica fill: var(--color-violet-600); /* oklch(54.1% 0.281 293.009) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-violet-700fill: var(--color-violet-700); /* oklch(49.1% 0.27 292.581) */Aplica fill: var(--color-violet-700); /* oklch(49.1% 0.27 292.581) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-violet-800fill: var(--color-violet-800); /* oklch(43.2% 0.232 292.759) */Aplica fill: var(--color-violet-800); /* oklch(43.2% 0.232 292.759) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-violet-900fill: var(--color-violet-900); /* oklch(38% 0.189 293.745) */Aplica fill: var(--color-violet-900); /* oklch(38% 0.189 293.745) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-violet-950fill: var(--color-violet-950); /* oklch(28.3% 0.141 291.089) */Aplica fill: var(--color-violet-950); /* oklch(28.3% 0.141 291.089) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-purple-50fill: var(--color-purple-50); /* oklch(97.7% 0.014 308.299) */Aplica fill: var(--color-purple-50); /* oklch(97.7% 0.014 308.299) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-purple-100fill: var(--color-purple-100); /* oklch(94.6% 0.033 307.174) */Aplica fill: var(--color-purple-100); /* oklch(94.6% 0.033 307.174) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-purple-200fill: var(--color-purple-200); /* oklch(90.2% 0.063 306.703) */Aplica fill: var(--color-purple-200); /* oklch(90.2% 0.063 306.703) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-purple-300fill: var(--color-purple-300); /* oklch(82.7% 0.119 306.383) */Aplica fill: var(--color-purple-300); /* oklch(82.7% 0.119 306.383) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-purple-400fill: var(--color-purple-400); /* oklch(71.4% 0.203 305.504) */Aplica fill: var(--color-purple-400); /* oklch(71.4% 0.203 305.504) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-purple-500fill: var(--color-purple-500); /* oklch(62.7% 0.265 303.9) */Aplica fill: var(--color-purple-500); /* oklch(62.7% 0.265 303.9) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-purple-600fill: var(--color-purple-600); /* oklch(55.8% 0.288 302.321) */Aplica fill: var(--color-purple-600); /* oklch(55.8% 0.288 302.321) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-purple-700fill: var(--color-purple-700); /* oklch(49.6% 0.265 301.924) */Aplica fill: var(--color-purple-700); /* oklch(49.6% 0.265 301.924) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-purple-800fill: var(--color-purple-800); /* oklch(43.8% 0.218 303.724) */Aplica fill: var(--color-purple-800); /* oklch(43.8% 0.218 303.724) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-purple-900fill: var(--color-purple-900); /* oklch(38.1% 0.176 304.987) */Aplica fill: var(--color-purple-900); /* oklch(38.1% 0.176 304.987) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-purple-950fill: var(--color-purple-950); /* oklch(29.1% 0.149 302.717) */Aplica fill: var(--color-purple-950); /* oklch(29.1% 0.149 302.717) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-fuchsia-50fill: var(--color-fuchsia-50); /* oklch(97.7% 0.017 320.058) */Aplica fill: var(--color-fuchsia-50); /* oklch(97.7% 0.017 320.058) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-fuchsia-100fill: var(--color-fuchsia-100); /* oklch(95.2% 0.037 318.852) */Aplica fill: var(--color-fuchsia-100); /* oklch(95.2% 0.037 318.852) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-fuchsia-200fill: var(--color-fuchsia-200); /* oklch(90.3% 0.076 319.62) */Aplica fill: var(--color-fuchsia-200); /* oklch(90.3% 0.076 319.62) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-fuchsia-300fill: var(--color-fuchsia-300); /* oklch(83.3% 0.145 321.434) */Aplica fill: var(--color-fuchsia-300); /* oklch(83.3% 0.145 321.434) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-fuchsia-400fill: var(--color-fuchsia-400); /* oklch(74% 0.238 322.16) */Aplica fill: var(--color-fuchsia-400); /* oklch(74% 0.238 322.16) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-fuchsia-500fill: var(--color-fuchsia-500); /* oklch(66.7% 0.295 322.15) */Aplica fill: var(--color-fuchsia-500); /* oklch(66.7% 0.295 322.15) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-fuchsia-600fill: var(--color-fuchsia-600); /* oklch(59.1% 0.293 322.896) */Aplica fill: var(--color-fuchsia-600); /* oklch(59.1% 0.293 322.896) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-fuchsia-700fill: var(--color-fuchsia-700); /* oklch(51.8% 0.253 323.949) */Aplica fill: var(--color-fuchsia-700); /* oklch(51.8% 0.253 323.949) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-fuchsia-800fill: var(--color-fuchsia-800); /* oklch(45.2% 0.211 324.591) */Aplica fill: var(--color-fuchsia-800); /* oklch(45.2% 0.211 324.591) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-fuchsia-900fill: var(--color-fuchsia-900); /* oklch(40.1% 0.17 325.612) */Aplica fill: var(--color-fuchsia-900); /* oklch(40.1% 0.17 325.612) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-fuchsia-950fill: var(--color-fuchsia-950); /* oklch(29.3% 0.136 325.661) */Aplica fill: var(--color-fuchsia-950); /* oklch(29.3% 0.136 325.661) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-pink-50fill: var(--color-pink-50); /* oklch(97.1% 0.014 343.198) */Aplica fill: var(--color-pink-50); /* oklch(97.1% 0.014 343.198) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-pink-100fill: var(--color-pink-100); /* oklch(94.8% 0.028 342.258) */Aplica fill: var(--color-pink-100); /* oklch(94.8% 0.028 342.258) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-pink-200fill: var(--color-pink-200); /* oklch(89.9% 0.061 343.231) */Aplica fill: var(--color-pink-200); /* oklch(89.9% 0.061 343.231) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-pink-300fill: var(--color-pink-300); /* oklch(82.3% 0.12 346.018) */Aplica fill: var(--color-pink-300); /* oklch(82.3% 0.12 346.018) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-pink-400fill: var(--color-pink-400); /* oklch(71.8% 0.202 349.761) */Aplica fill: var(--color-pink-400); /* oklch(71.8% 0.202 349.761) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-pink-500fill: var(--color-pink-500); /* oklch(65.6% 0.241 354.308) */Aplica fill: var(--color-pink-500); /* oklch(65.6% 0.241 354.308) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-pink-600fill: var(--color-pink-600); /* oklch(59.2% 0.249 0.584) */Aplica fill: var(--color-pink-600); /* oklch(59.2% 0.249 0.584) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-pink-700fill: var(--color-pink-700); /* oklch(52.5% 0.223 3.958) */Aplica fill: var(--color-pink-700); /* oklch(52.5% 0.223 3.958) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-pink-800fill: var(--color-pink-800); /* oklch(45.9% 0.187 3.815) */Aplica fill: var(--color-pink-800); /* oklch(45.9% 0.187 3.815) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-pink-900fill: var(--color-pink-900); /* oklch(40.8% 0.153 2.432) */Aplica fill: var(--color-pink-900); /* oklch(40.8% 0.153 2.432) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-pink-950fill: var(--color-pink-950); /* oklch(28.4% 0.109 3.907) */Aplica fill: var(--color-pink-950); /* oklch(28.4% 0.109 3.907) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-rose-50fill: var(--color-rose-50); /* oklch(96.9% 0.015 12.422) */Aplica fill: var(--color-rose-50); /* oklch(96.9% 0.015 12.422) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-rose-100fill: var(--color-rose-100); /* oklch(94.1% 0.03 12.58) */Aplica fill: var(--color-rose-100); /* oklch(94.1% 0.03 12.58) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-rose-200fill: var(--color-rose-200); /* oklch(89.2% 0.058 10.001) */Aplica fill: var(--color-rose-200); /* oklch(89.2% 0.058 10.001) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-rose-300fill: var(--color-rose-300); /* oklch(81% 0.117 11.638) */Aplica fill: var(--color-rose-300); /* oklch(81% 0.117 11.638) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-rose-400fill: var(--color-rose-400); /* oklch(71.2% 0.194 13.428) */Aplica fill: var(--color-rose-400); /* oklch(71.2% 0.194 13.428) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-rose-500fill: var(--color-rose-500); /* oklch(64.5% 0.246 16.439) */Aplica fill: var(--color-rose-500); /* oklch(64.5% 0.246 16.439) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-rose-600fill: var(--color-rose-600); /* oklch(58.6% 0.253 17.585) */Aplica fill: var(--color-rose-600); /* oklch(58.6% 0.253 17.585) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-rose-700fill: var(--color-rose-700); /* oklch(51.4% 0.222 16.935) */Aplica fill: var(--color-rose-700); /* oklch(51.4% 0.222 16.935) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-rose-800fill: var(--color-rose-800); /* oklch(45.5% 0.188 13.697) */Aplica fill: var(--color-rose-800); /* oklch(45.5% 0.188 13.697) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-rose-900fill: var(--color-rose-900); /* oklch(41% 0.159 10.272) */Aplica fill: var(--color-rose-900); /* oklch(41% 0.159 10.272) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-rose-950fill: var(--color-rose-950); /* oklch(27.1% 0.105 12.094) */Aplica fill: var(--color-rose-950); /* oklch(27.1% 0.105 12.094) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-slate-50fill: var(--color-slate-50); /* oklch(98.4% 0.003 247.858) */Aplica fill: var(--color-slate-50); /* oklch(98.4% 0.003 247.858) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-slate-100fill: var(--color-slate-100); /* oklch(96.8% 0.007 247.896) */Aplica fill: var(--color-slate-100); /* oklch(96.8% 0.007 247.896) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-slate-200fill: var(--color-slate-200); /* oklch(92.9% 0.013 255.508) */Aplica fill: var(--color-slate-200); /* oklch(92.9% 0.013 255.508) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-slate-300fill: var(--color-slate-300); /* oklch(86.9% 0.022 252.894) */Aplica fill: var(--color-slate-300); /* oklch(86.9% 0.022 252.894) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-slate-400fill: var(--color-slate-400); /* oklch(70.4% 0.04 256.788) */Aplica fill: var(--color-slate-400); /* oklch(70.4% 0.04 256.788) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-slate-500fill: var(--color-slate-500); /* oklch(55.4% 0.046 257.417) */Aplica fill: var(--color-slate-500); /* oklch(55.4% 0.046 257.417) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-slate-600fill: var(--color-slate-600); /* oklch(44.6% 0.043 257.281) */Aplica fill: var(--color-slate-600); /* oklch(44.6% 0.043 257.281) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-slate-700fill: var(--color-slate-700); /* oklch(37.2% 0.044 257.287) */Aplica fill: var(--color-slate-700); /* oklch(37.2% 0.044 257.287) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-slate-800fill: var(--color-slate-800); /* oklch(27.9% 0.041 260.031) */Aplica fill: var(--color-slate-800); /* oklch(27.9% 0.041 260.031) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-slate-900fill: var(--color-slate-900); /* oklch(20.8% 0.042 265.755) */Aplica fill: var(--color-slate-900); /* oklch(20.8% 0.042 265.755) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-slate-950fill: var(--color-slate-950); /* oklch(12.9% 0.042 264.695) */Aplica fill: var(--color-slate-950); /* oklch(12.9% 0.042 264.695) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-gray-50fill: var(--color-gray-50); /* oklch(98.5% 0.002 247.839) */Aplica fill: var(--color-gray-50); /* oklch(98.5% 0.002 247.839) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-gray-100fill: var(--color-gray-100); /* oklch(96.7% 0.003 264.542) */Aplica fill: var(--color-gray-100); /* oklch(96.7% 0.003 264.542) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-gray-200fill: var(--color-gray-200); /* oklch(92.8% 0.006 264.531) */Aplica fill: var(--color-gray-200); /* oklch(92.8% 0.006 264.531) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-gray-300fill: var(--color-gray-300); /* oklch(87.2% 0.01 258.338) */Aplica fill: var(--color-gray-300); /* oklch(87.2% 0.01 258.338) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-gray-400fill: var(--color-gray-400); /* oklch(70.7% 0.022 261.325) */Aplica fill: var(--color-gray-400); /* oklch(70.7% 0.022 261.325) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-gray-500fill: var(--color-gray-500); /* oklch(55.1% 0.027 264.364) */Aplica fill: var(--color-gray-500); /* oklch(55.1% 0.027 264.364) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-gray-600fill: var(--color-gray-600); /* oklch(44.6% 0.03 256.802) */Aplica fill: var(--color-gray-600); /* oklch(44.6% 0.03 256.802) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-gray-700fill: var(--color-gray-700); /* oklch(37.3% 0.034 259.733) */Aplica fill: var(--color-gray-700); /* oklch(37.3% 0.034 259.733) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-gray-800fill: var(--color-gray-800); /* oklch(27.8% 0.033 256.848) */Aplica fill: var(--color-gray-800); /* oklch(27.8% 0.033 256.848) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-gray-900fill: var(--color-gray-900); /* oklch(21% 0.034 264.665) */Aplica fill: var(--color-gray-900); /* oklch(21% 0.034 264.665) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-gray-950fill: var(--color-gray-950); /* oklch(13% 0.028 261.692) */Aplica fill: var(--color-gray-950); /* oklch(13% 0.028 261.692) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-zinc-50fill: var(--color-zinc-50); /* oklch(98.5% 0 0) */Aplica fill: var(--color-zinc-50); /* oklch(98.5% 0 0) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-zinc-100fill: var(--color-zinc-100); /* oklch(96.7% 0.001 286.375) */Aplica fill: var(--color-zinc-100); /* oklch(96.7% 0.001 286.375) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-zinc-200fill: var(--color-zinc-200); /* oklch(92% 0.004 286.32) */Aplica fill: var(--color-zinc-200); /* oklch(92% 0.004 286.32) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-zinc-300fill: var(--color-zinc-300); /* oklch(87.1% 0.006 286.286) */Aplica fill: var(--color-zinc-300); /* oklch(87.1% 0.006 286.286) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-zinc-400fill: var(--color-zinc-400); /* oklch(70.5% 0.015 286.067) */Aplica fill: var(--color-zinc-400); /* oklch(70.5% 0.015 286.067) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-zinc-500fill: var(--color-zinc-500); /* oklch(55.2% 0.016 285.938) */Aplica fill: var(--color-zinc-500); /* oklch(55.2% 0.016 285.938) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-zinc-600fill: var(--color-zinc-600); /* oklch(44.2% 0.017 285.786) */Aplica fill: var(--color-zinc-600); /* oklch(44.2% 0.017 285.786) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-zinc-700fill: var(--color-zinc-700); /* oklch(37% 0.013 285.805) */Aplica fill: var(--color-zinc-700); /* oklch(37% 0.013 285.805) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-zinc-800fill: var(--color-zinc-800); /* oklch(27.4% 0.006 286.033) */Aplica fill: var(--color-zinc-800); /* oklch(27.4% 0.006 286.033) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-zinc-900fill: var(--color-zinc-900); /* oklch(21% 0.006 285.885) */Aplica fill: var(--color-zinc-900); /* oklch(21% 0.006 285.885) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-zinc-950fill: var(--color-zinc-950); /* oklch(14.1% 0.005 285.823) */Aplica fill: var(--color-zinc-950); /* oklch(14.1% 0.005 285.823) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-neutral-50fill: var(--color-neutral-50); /* oklch(98.5% 0 0) */Aplica fill: var(--color-neutral-50); /* oklch(98.5% 0 0) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-neutral-100fill: var(--color-neutral-100); /* oklch(97% 0 0) */Aplica fill: var(--color-neutral-100); /* oklch(97% 0 0) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-neutral-200fill: var(--color-neutral-200); /* oklch(92.2% 0 0) */Aplica fill: var(--color-neutral-200); /* oklch(92.2% 0 0) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-neutral-300fill: var(--color-neutral-300); /* oklch(87% 0 0) */Aplica fill: var(--color-neutral-300); /* oklch(87% 0 0) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-neutral-400fill: var(--color-neutral-400); /* oklch(70.8% 0 0) */Aplica fill: var(--color-neutral-400); /* oklch(70.8% 0 0) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-neutral-500fill: var(--color-neutral-500); /* oklch(55.6% 0 0) */Aplica fill: var(--color-neutral-500); /* oklch(55.6% 0 0) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-neutral-600fill: var(--color-neutral-600); /* oklch(43.9% 0 0) */Aplica fill: var(--color-neutral-600); /* oklch(43.9% 0 0) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-neutral-700fill: var(--color-neutral-700); /* oklch(37.1% 0 0) */Aplica fill: var(--color-neutral-700); /* oklch(37.1% 0 0) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-neutral-800fill: var(--color-neutral-800); /* oklch(26.9% 0 0) */Aplica fill: var(--color-neutral-800); /* oklch(26.9% 0 0) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-neutral-900fill: var(--color-neutral-900); /* oklch(20.5% 0 0) */Aplica fill: var(--color-neutral-900); /* oklch(20.5% 0 0) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-neutral-950fill: var(--color-neutral-950); /* oklch(14.5% 0 0) */Aplica fill: var(--color-neutral-950); /* oklch(14.5% 0 0) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-stone-50fill: var(--color-stone-50); /* oklch(98.5% 0.001 106.423) */Aplica fill: var(--color-stone-50); /* oklch(98.5% 0.001 106.423) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-stone-100fill: var(--color-stone-100); /* oklch(97% 0.001 106.424) */Aplica fill: var(--color-stone-100); /* oklch(97% 0.001 106.424) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-stone-200fill: var(--color-stone-200); /* oklch(92.3% 0.003 48.717) */Aplica fill: var(--color-stone-200); /* oklch(92.3% 0.003 48.717) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-stone-300fill: var(--color-stone-300); /* oklch(86.9% 0.005 56.366) */Aplica fill: var(--color-stone-300); /* oklch(86.9% 0.005 56.366) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-stone-400fill: var(--color-stone-400); /* oklch(70.9% 0.01 56.259) */Aplica fill: var(--color-stone-400); /* oklch(70.9% 0.01 56.259) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-stone-500fill: var(--color-stone-500); /* oklch(55.3% 0.013 58.071) */Aplica fill: var(--color-stone-500); /* oklch(55.3% 0.013 58.071) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-stone-600fill: var(--color-stone-600); /* oklch(44.4% 0.011 73.639) */Aplica fill: var(--color-stone-600); /* oklch(44.4% 0.011 73.639) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-stone-700fill: var(--color-stone-700); /* oklch(37.4% 0.01 67.558) */Aplica fill: var(--color-stone-700); /* oklch(37.4% 0.01 67.558) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-stone-800fill: var(--color-stone-800); /* oklch(26.8% 0.007 34.298) */Aplica fill: var(--color-stone-800); /* oklch(26.8% 0.007 34.298) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-stone-900fill: var(--color-stone-900); /* oklch(21.6% 0.006 56.043) */Aplica fill: var(--color-stone-900); /* oklch(21.6% 0.006 56.043) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-stone-950fill: var(--color-stone-950); /* oklch(14.7% 0.004 49.25) */Aplica fill: var(--color-stone-950); /* oklch(14.7% 0.004 49.25) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-mauve-50fill: var(--color-mauve-50); /* oklch(98.5% 0 0) */Aplica fill: var(--color-mauve-50); /* oklch(98.5% 0 0) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-mauve-100fill: var(--color-mauve-100); /* oklch(96% 0.003 325.6) */Aplica fill: var(--color-mauve-100); /* oklch(96% 0.003 325.6) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-mauve-200fill: var(--color-mauve-200); /* oklch(92.2% 0.005 325.62) */Aplica fill: var(--color-mauve-200); /* oklch(92.2% 0.005 325.62) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-mauve-300fill: var(--color-mauve-300); /* oklch(86.5% 0.012 325.68) */Aplica fill: var(--color-mauve-300); /* oklch(86.5% 0.012 325.68) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-mauve-400fill: var(--color-mauve-400); /* oklch(71.1% 0.019 323.02) */Aplica fill: var(--color-mauve-400); /* oklch(71.1% 0.019 323.02) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-mauve-500fill: var(--color-mauve-500); /* oklch(54.2% 0.034 322.5) */Aplica fill: var(--color-mauve-500); /* oklch(54.2% 0.034 322.5) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-mauve-600fill: var(--color-mauve-600); /* oklch(43.5% 0.029 321.78) */Aplica fill: var(--color-mauve-600); /* oklch(43.5% 0.029 321.78) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-mauve-700fill: var(--color-mauve-700); /* oklch(36.4% 0.029 323.89) */Aplica fill: var(--color-mauve-700); /* oklch(36.4% 0.029 323.89) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-mauve-800fill: var(--color-mauve-800); /* oklch(26.3% 0.024 320.12) */Aplica fill: var(--color-mauve-800); /* oklch(26.3% 0.024 320.12) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-mauve-900fill: var(--color-mauve-900); /* oklch(21.2% 0.019 322.12) */Aplica fill: var(--color-mauve-900); /* oklch(21.2% 0.019 322.12) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-mauve-950fill: var(--color-mauve-950); /* oklch(14.5% 0.008 326) */Aplica fill: var(--color-mauve-950); /* oklch(14.5% 0.008 326) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-olive-50fill: var(--color-olive-50); /* oklch(98.8% 0.003 106.5) */Aplica fill: var(--color-olive-50); /* oklch(98.8% 0.003 106.5) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-olive-100fill: var(--color-olive-100); /* oklch(96.6% 0.005 106.5) */Aplica fill: var(--color-olive-100); /* oklch(96.6% 0.005 106.5) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-olive-200fill: var(--color-olive-200); /* oklch(93% 0.007 106.5) */Aplica fill: var(--color-olive-200); /* oklch(93% 0.007 106.5) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-olive-300fill: var(--color-olive-300); /* oklch(88% 0.011 106.6) */Aplica fill: var(--color-olive-300); /* oklch(88% 0.011 106.6) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-olive-400fill: var(--color-olive-400); /* oklch(73.7% 0.021 106.9) */Aplica fill: var(--color-olive-400); /* oklch(73.7% 0.021 106.9) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-olive-500fill: var(--color-olive-500); /* oklch(58% 0.031 107.3) */Aplica fill: var(--color-olive-500); /* oklch(58% 0.031 107.3) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-olive-600fill: var(--color-olive-600); /* oklch(46.6% 0.025 107.3) */Aplica fill: var(--color-olive-600); /* oklch(46.6% 0.025 107.3) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-olive-700fill: var(--color-olive-700); /* oklch(39.4% 0.023 107.4) */Aplica fill: var(--color-olive-700); /* oklch(39.4% 0.023 107.4) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-olive-800fill: var(--color-olive-800); /* oklch(28.6% 0.016 107.4) */Aplica fill: var(--color-olive-800); /* oklch(28.6% 0.016 107.4) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-olive-900fill: var(--color-olive-900); /* oklch(22.8% 0.013 107.4) */Aplica fill: var(--color-olive-900); /* oklch(22.8% 0.013 107.4) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-olive-950fill: var(--color-olive-950); /* oklch(15.3% 0.006 107.1) */Aplica fill: var(--color-olive-950); /* oklch(15.3% 0.006 107.1) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-mist-50fill: var(--color-mist-50); /* oklch(98.7% 0.002 197.1) */Aplica fill: var(--color-mist-50); /* oklch(98.7% 0.002 197.1) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-mist-100fill: var(--color-mist-100); /* oklch(96.3% 0.002 197.1) */Aplica fill: var(--color-mist-100); /* oklch(96.3% 0.002 197.1) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-mist-200fill: var(--color-mist-200); /* oklch(92.5% 0.005 214.3) */Aplica fill: var(--color-mist-200); /* oklch(92.5% 0.005 214.3) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-mist-300fill: var(--color-mist-300); /* oklch(87.2% 0.007 219.6) */Aplica fill: var(--color-mist-300); /* oklch(87.2% 0.007 219.6) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-mist-400fill: var(--color-mist-400); /* oklch(72.3% 0.014 214.4) */Aplica fill: var(--color-mist-400); /* oklch(72.3% 0.014 214.4) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-mist-500fill: var(--color-mist-500); /* oklch(56% 0.021 213.5) */Aplica fill: var(--color-mist-500); /* oklch(56% 0.021 213.5) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-mist-600fill: var(--color-mist-600); /* oklch(45% 0.017 213.2) */Aplica fill: var(--color-mist-600); /* oklch(45% 0.017 213.2) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-mist-700fill: var(--color-mist-700); /* oklch(37.8% 0.015 216) */Aplica fill: var(--color-mist-700); /* oklch(37.8% 0.015 216) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-mist-800fill: var(--color-mist-800); /* oklch(27.5% 0.011 216.9) */Aplica fill: var(--color-mist-800); /* oklch(27.5% 0.011 216.9) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-mist-900fill: var(--color-mist-900); /* oklch(21.8% 0.008 223.9) */Aplica fill: var(--color-mist-900); /* oklch(21.8% 0.008 223.9) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-mist-950fill: var(--color-mist-950); /* oklch(14.8% 0.004 228.8) */Aplica fill: var(--color-mist-950); /* oklch(14.8% 0.004 228.8) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-taupe-50fill: var(--color-taupe-50); /* oklch(98.6% 0.002 67.8) */Aplica fill: var(--color-taupe-50); /* oklch(98.6% 0.002 67.8) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-taupe-100fill: var(--color-taupe-100); /* oklch(96% 0.002 17.2) */Aplica fill: var(--color-taupe-100); /* oklch(96% 0.002 17.2) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-taupe-200fill: var(--color-taupe-200); /* oklch(92.2% 0.005 34.3) */Aplica fill: var(--color-taupe-200); /* oklch(92.2% 0.005 34.3) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-taupe-300fill: var(--color-taupe-300); /* oklch(86.8% 0.007 39.5) */Aplica fill: var(--color-taupe-300); /* oklch(86.8% 0.007 39.5) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-taupe-400fill: var(--color-taupe-400); /* oklch(71.4% 0.014 41.2) */Aplica fill: var(--color-taupe-400); /* oklch(71.4% 0.014 41.2) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-taupe-500fill: var(--color-taupe-500); /* oklch(54.7% 0.021 43.1) */Aplica fill: var(--color-taupe-500); /* oklch(54.7% 0.021 43.1) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-taupe-600fill: var(--color-taupe-600); /* oklch(43.8% 0.017 39.3) */Aplica fill: var(--color-taupe-600); /* oklch(43.8% 0.017 39.3) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-taupe-700fill: var(--color-taupe-700); /* oklch(36.7% 0.016 35.7) */Aplica fill: var(--color-taupe-700); /* oklch(36.7% 0.016 35.7) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-taupe-800fill: var(--color-taupe-800); /* oklch(26.8% 0.011 36.5) */Aplica fill: var(--color-taupe-800); /* oklch(26.8% 0.011 36.5) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-taupe-900fill: var(--color-taupe-900); /* oklch(21.4% 0.009 43.1) */Aplica fill: var(--color-taupe-900); /* oklch(21.4% 0.009 43.1) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-taupe-950fill: var(--color-taupe-950); /* oklch(14.7% 0.004 49.3) */Aplica fill: var(--color-taupe-950); /* oklch(14.7% 0.004 49.3) */ al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-( <custom-property> )fill: var( <custom-property> );Aplica fill: var( <custom-property> ); al elemento; úsalo cuando necesites ajustar fill con esta utilidad.
fill-[ <color> ]fill: <color> ;Aplica fill: <color> ; al elemento; úsalo cuando necesites ajustar fill con esta utilidad.

ataque

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

Utilidades para diseñar el trazo de elementos SVG.

Clase de UtilidadPropiedad CSSExplicación Breve
stroke-nonestroke: none;Aplica stroke: none; al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-inheritstroke: inherit;Aplica stroke: inherit; al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-currentstroke: currentColor;Aplica stroke: currentColor; al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-transparentstroke: transparent;Aplica stroke: transparent; al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-blackstroke: var(--color-black); /* #000 */Aplica stroke: var(--color-black); /* #000 */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-whitestroke: var(--color-white); /* #fff */Aplica stroke: var(--color-white); /* #fff */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-red-50stroke: var(--color-red-50); /* oklch(97.1% 0.013 17.38) */Aplica stroke: var(--color-red-50); /* oklch(97.1% 0.013 17.38) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-red-100stroke: var(--color-red-100); /* oklch(93.6% 0.032 17.717) */Aplica stroke: var(--color-red-100); /* oklch(93.6% 0.032 17.717) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-red-200stroke: var(--color-red-200); /* oklch(88.5% 0.062 18.334) */Aplica stroke: var(--color-red-200); /* oklch(88.5% 0.062 18.334) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-red-300stroke: var(--color-red-300); /* oklch(80.8% 0.114 19.571) */Aplica stroke: var(--color-red-300); /* oklch(80.8% 0.114 19.571) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-red-400stroke: var(--color-red-400); /* oklch(70.4% 0.191 22.216) */Aplica stroke: var(--color-red-400); /* oklch(70.4% 0.191 22.216) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-red-500stroke: var(--color-red-500); /* oklch(63.7% 0.237 25.331) */Aplica stroke: var(--color-red-500); /* oklch(63.7% 0.237 25.331) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-red-600stroke: var(--color-red-600); /* oklch(57.7% 0.245 27.325) */Aplica stroke: var(--color-red-600); /* oklch(57.7% 0.245 27.325) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-red-700stroke: var(--color-red-700); /* oklch(50.5% 0.213 27.518) */Aplica stroke: var(--color-red-700); /* oklch(50.5% 0.213 27.518) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-red-800stroke: var(--color-red-800); /* oklch(44.4% 0.177 26.899) */Aplica stroke: var(--color-red-800); /* oklch(44.4% 0.177 26.899) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-red-900stroke: var(--color-red-900); /* oklch(39.6% 0.141 25.723) */Aplica stroke: var(--color-red-900); /* oklch(39.6% 0.141 25.723) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-red-950stroke: var(--color-red-950); /* oklch(25.8% 0.092 26.042) */Aplica stroke: var(--color-red-950); /* oklch(25.8% 0.092 26.042) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-orange-50stroke: var(--color-orange-50); /* oklch(98% 0.016 73.684) */Aplica stroke: var(--color-orange-50); /* oklch(98% 0.016 73.684) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-orange-100stroke: var(--color-orange-100); /* oklch(95.4% 0.038 75.164) */Aplica stroke: var(--color-orange-100); /* oklch(95.4% 0.038 75.164) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-orange-200stroke: var(--color-orange-200); /* oklch(90.1% 0.076 70.697) */Aplica stroke: var(--color-orange-200); /* oklch(90.1% 0.076 70.697) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-orange-300stroke: var(--color-orange-300); /* oklch(83.7% 0.128 66.29) */Aplica stroke: var(--color-orange-300); /* oklch(83.7% 0.128 66.29) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-orange-400stroke: var(--color-orange-400); /* oklch(75% 0.183 55.934) */Aplica stroke: var(--color-orange-400); /* oklch(75% 0.183 55.934) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-orange-500stroke: var(--color-orange-500); /* oklch(70.5% 0.213 47.604) */Aplica stroke: var(--color-orange-500); /* oklch(70.5% 0.213 47.604) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-orange-600stroke: var(--color-orange-600); /* oklch(64.6% 0.222 41.116) */Aplica stroke: var(--color-orange-600); /* oklch(64.6% 0.222 41.116) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-orange-700stroke: var(--color-orange-700); /* oklch(55.3% 0.195 38.402) */Aplica stroke: var(--color-orange-700); /* oklch(55.3% 0.195 38.402) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-orange-800stroke: var(--color-orange-800); /* oklch(47% 0.157 37.304) */Aplica stroke: var(--color-orange-800); /* oklch(47% 0.157 37.304) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-orange-900stroke: var(--color-orange-900); /* oklch(40.8% 0.123 38.172) */Aplica stroke: var(--color-orange-900); /* oklch(40.8% 0.123 38.172) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-orange-950stroke: var(--color-orange-950); /* oklch(26.6% 0.079 36.259) */Aplica stroke: var(--color-orange-950); /* oklch(26.6% 0.079 36.259) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-amber-50stroke: var(--color-amber-50); /* oklch(98.7% 0.022 95.277) */Aplica stroke: var(--color-amber-50); /* oklch(98.7% 0.022 95.277) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-amber-100stroke: var(--color-amber-100); /* oklch(96.2% 0.059 95.617) */Aplica stroke: var(--color-amber-100); /* oklch(96.2% 0.059 95.617) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-amber-200stroke: var(--color-amber-200); /* oklch(92.4% 0.12 95.746) */Aplica stroke: var(--color-amber-200); /* oklch(92.4% 0.12 95.746) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-amber-300stroke: var(--color-amber-300); /* oklch(87.9% 0.169 91.605) */Aplica stroke: var(--color-amber-300); /* oklch(87.9% 0.169 91.605) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-amber-400stroke: var(--color-amber-400); /* oklch(82.8% 0.189 84.429) */Aplica stroke: var(--color-amber-400); /* oklch(82.8% 0.189 84.429) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-amber-500stroke: var(--color-amber-500); /* oklch(76.9% 0.188 70.08) */Aplica stroke: var(--color-amber-500); /* oklch(76.9% 0.188 70.08) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-amber-600stroke: var(--color-amber-600); /* oklch(66.6% 0.179 58.318) */Aplica stroke: var(--color-amber-600); /* oklch(66.6% 0.179 58.318) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-amber-700stroke: var(--color-amber-700); /* oklch(55.5% 0.163 48.998) */Aplica stroke: var(--color-amber-700); /* oklch(55.5% 0.163 48.998) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-amber-800stroke: var(--color-amber-800); /* oklch(47.3% 0.137 46.201) */Aplica stroke: var(--color-amber-800); /* oklch(47.3% 0.137 46.201) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-amber-900stroke: var(--color-amber-900); /* oklch(41.4% 0.112 45.904) */Aplica stroke: var(--color-amber-900); /* oklch(41.4% 0.112 45.904) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-amber-950stroke: var(--color-amber-950); /* oklch(27.9% 0.077 45.635) */Aplica stroke: var(--color-amber-950); /* oklch(27.9% 0.077 45.635) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-yellow-50stroke: var(--color-yellow-50); /* oklch(98.7% 0.026 102.212) */Aplica stroke: var(--color-yellow-50); /* oklch(98.7% 0.026 102.212) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-yellow-100stroke: var(--color-yellow-100); /* oklch(97.3% 0.071 103.193) */Aplica stroke: var(--color-yellow-100); /* oklch(97.3% 0.071 103.193) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-yellow-200stroke: var(--color-yellow-200); /* oklch(94.5% 0.129 101.54) */Aplica stroke: var(--color-yellow-200); /* oklch(94.5% 0.129 101.54) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-yellow-300stroke: var(--color-yellow-300); /* oklch(90.5% 0.182 98.111) */Aplica stroke: var(--color-yellow-300); /* oklch(90.5% 0.182 98.111) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-yellow-400stroke: var(--color-yellow-400); /* oklch(85.2% 0.199 91.936) */Aplica stroke: var(--color-yellow-400); /* oklch(85.2% 0.199 91.936) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-yellow-500stroke: var(--color-yellow-500); /* oklch(79.5% 0.184 86.047) */Aplica stroke: var(--color-yellow-500); /* oklch(79.5% 0.184 86.047) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-yellow-600stroke: var(--color-yellow-600); /* oklch(68.1% 0.162 75.834) */Aplica stroke: var(--color-yellow-600); /* oklch(68.1% 0.162 75.834) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-yellow-700stroke: var(--color-yellow-700); /* oklch(55.4% 0.135 66.442) */Aplica stroke: var(--color-yellow-700); /* oklch(55.4% 0.135 66.442) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-yellow-800stroke: var(--color-yellow-800); /* oklch(47.6% 0.114 61.907) */Aplica stroke: var(--color-yellow-800); /* oklch(47.6% 0.114 61.907) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-yellow-900stroke: var(--color-yellow-900); /* oklch(42.1% 0.095 57.708) */Aplica stroke: var(--color-yellow-900); /* oklch(42.1% 0.095 57.708) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-yellow-950stroke: var(--color-yellow-950); /* oklch(28.6% 0.066 53.813) */Aplica stroke: var(--color-yellow-950); /* oklch(28.6% 0.066 53.813) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-lime-50stroke: var(--color-lime-50); /* oklch(98.6% 0.031 120.757) */Aplica stroke: var(--color-lime-50); /* oklch(98.6% 0.031 120.757) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-lime-100stroke: var(--color-lime-100); /* oklch(96.7% 0.067 122.328) */Aplica stroke: var(--color-lime-100); /* oklch(96.7% 0.067 122.328) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-lime-200stroke: var(--color-lime-200); /* oklch(93.8% 0.127 124.321) */Aplica stroke: var(--color-lime-200); /* oklch(93.8% 0.127 124.321) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-lime-300stroke: var(--color-lime-300); /* oklch(89.7% 0.196 126.665) */Aplica stroke: var(--color-lime-300); /* oklch(89.7% 0.196 126.665) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-lime-400stroke: var(--color-lime-400); /* oklch(84.1% 0.238 128.85) */Aplica stroke: var(--color-lime-400); /* oklch(84.1% 0.238 128.85) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-lime-500stroke: var(--color-lime-500); /* oklch(76.8% 0.233 130.85) */Aplica stroke: var(--color-lime-500); /* oklch(76.8% 0.233 130.85) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-lime-600stroke: var(--color-lime-600); /* oklch(64.8% 0.2 131.684) */Aplica stroke: var(--color-lime-600); /* oklch(64.8% 0.2 131.684) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-lime-700stroke: var(--color-lime-700); /* oklch(53.2% 0.157 131.589) */Aplica stroke: var(--color-lime-700); /* oklch(53.2% 0.157 131.589) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-lime-800stroke: var(--color-lime-800); /* oklch(45.3% 0.124 130.933) */Aplica stroke: var(--color-lime-800); /* oklch(45.3% 0.124 130.933) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-lime-900stroke: var(--color-lime-900); /* oklch(40.5% 0.101 131.063) */Aplica stroke: var(--color-lime-900); /* oklch(40.5% 0.101 131.063) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-lime-950stroke: var(--color-lime-950); /* oklch(27.4% 0.072 132.109) */Aplica stroke: var(--color-lime-950); /* oklch(27.4% 0.072 132.109) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-green-50stroke: var(--color-green-50); /* oklch(98.2% 0.018 155.826) */Aplica stroke: var(--color-green-50); /* oklch(98.2% 0.018 155.826) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-green-100stroke: var(--color-green-100); /* oklch(96.2% 0.044 156.743) */Aplica stroke: var(--color-green-100); /* oklch(96.2% 0.044 156.743) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-green-200stroke: var(--color-green-200); /* oklch(92.5% 0.084 155.995) */Aplica stroke: var(--color-green-200); /* oklch(92.5% 0.084 155.995) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-green-300stroke: var(--color-green-300); /* oklch(87.1% 0.15 154.449) */Aplica stroke: var(--color-green-300); /* oklch(87.1% 0.15 154.449) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-green-400stroke: var(--color-green-400); /* oklch(79.2% 0.209 151.711) */Aplica stroke: var(--color-green-400); /* oklch(79.2% 0.209 151.711) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-green-500stroke: var(--color-green-500); /* oklch(72.3% 0.219 149.579) */Aplica stroke: var(--color-green-500); /* oklch(72.3% 0.219 149.579) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-green-600stroke: var(--color-green-600); /* oklch(62.7% 0.194 149.214) */Aplica stroke: var(--color-green-600); /* oklch(62.7% 0.194 149.214) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-green-700stroke: var(--color-green-700); /* oklch(52.7% 0.154 150.069) */Aplica stroke: var(--color-green-700); /* oklch(52.7% 0.154 150.069) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-green-800stroke: var(--color-green-800); /* oklch(44.8% 0.119 151.328) */Aplica stroke: var(--color-green-800); /* oklch(44.8% 0.119 151.328) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-green-900stroke: var(--color-green-900); /* oklch(39.3% 0.095 152.535) */Aplica stroke: var(--color-green-900); /* oklch(39.3% 0.095 152.535) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-green-950stroke: var(--color-green-950); /* oklch(26.6% 0.065 152.934) */Aplica stroke: var(--color-green-950); /* oklch(26.6% 0.065 152.934) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-emerald-50stroke: var(--color-emerald-50); /* oklch(97.9% 0.021 166.113) */Aplica stroke: var(--color-emerald-50); /* oklch(97.9% 0.021 166.113) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-emerald-100stroke: var(--color-emerald-100); /* oklch(95% 0.052 163.051) */Aplica stroke: var(--color-emerald-100); /* oklch(95% 0.052 163.051) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-emerald-200stroke: var(--color-emerald-200); /* oklch(90.5% 0.093 164.15) */Aplica stroke: var(--color-emerald-200); /* oklch(90.5% 0.093 164.15) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-emerald-300stroke: var(--color-emerald-300); /* oklch(84.5% 0.143 164.978) */Aplica stroke: var(--color-emerald-300); /* oklch(84.5% 0.143 164.978) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-emerald-400stroke: var(--color-emerald-400); /* oklch(76.5% 0.177 163.223) */Aplica stroke: var(--color-emerald-400); /* oklch(76.5% 0.177 163.223) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-emerald-500stroke: var(--color-emerald-500); /* oklch(69.6% 0.17 162.48) */Aplica stroke: var(--color-emerald-500); /* oklch(69.6% 0.17 162.48) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-emerald-600stroke: var(--color-emerald-600); /* oklch(59.6% 0.145 163.225) */Aplica stroke: var(--color-emerald-600); /* oklch(59.6% 0.145 163.225) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-emerald-700stroke: var(--color-emerald-700); /* oklch(50.8% 0.118 165.612) */Aplica stroke: var(--color-emerald-700); /* oklch(50.8% 0.118 165.612) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-emerald-800stroke: var(--color-emerald-800); /* oklch(43.2% 0.095 166.913) */Aplica stroke: var(--color-emerald-800); /* oklch(43.2% 0.095 166.913) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-emerald-900stroke: var(--color-emerald-900); /* oklch(37.8% 0.077 168.94) */Aplica stroke: var(--color-emerald-900); /* oklch(37.8% 0.077 168.94) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-emerald-950stroke: var(--color-emerald-950); /* oklch(26.2% 0.051 172.552) */Aplica stroke: var(--color-emerald-950); /* oklch(26.2% 0.051 172.552) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-teal-50stroke: var(--color-teal-50); /* oklch(98.4% 0.014 180.72) */Aplica stroke: var(--color-teal-50); /* oklch(98.4% 0.014 180.72) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-teal-100stroke: var(--color-teal-100); /* oklch(95.3% 0.051 180.801) */Aplica stroke: var(--color-teal-100); /* oklch(95.3% 0.051 180.801) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-teal-200stroke: var(--color-teal-200); /* oklch(91% 0.096 180.426) */Aplica stroke: var(--color-teal-200); /* oklch(91% 0.096 180.426) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-teal-300stroke: var(--color-teal-300); /* oklch(85.5% 0.138 181.071) */Aplica stroke: var(--color-teal-300); /* oklch(85.5% 0.138 181.071) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-teal-400stroke: var(--color-teal-400); /* oklch(77.7% 0.152 181.912) */Aplica stroke: var(--color-teal-400); /* oklch(77.7% 0.152 181.912) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-teal-500stroke: var(--color-teal-500); /* oklch(70.4% 0.14 182.503) */Aplica stroke: var(--color-teal-500); /* oklch(70.4% 0.14 182.503) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-teal-600stroke: var(--color-teal-600); /* oklch(60% 0.118 184.704) */Aplica stroke: var(--color-teal-600); /* oklch(60% 0.118 184.704) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-teal-700stroke: var(--color-teal-700); /* oklch(51.1% 0.096 186.391) */Aplica stroke: var(--color-teal-700); /* oklch(51.1% 0.096 186.391) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-teal-800stroke: var(--color-teal-800); /* oklch(43.7% 0.078 188.216) */Aplica stroke: var(--color-teal-800); /* oklch(43.7% 0.078 188.216) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-teal-900stroke: var(--color-teal-900); /* oklch(38.6% 0.063 188.416) */Aplica stroke: var(--color-teal-900); /* oklch(38.6% 0.063 188.416) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-teal-950stroke: var(--color-teal-950); /* oklch(27.7% 0.046 192.524) */Aplica stroke: var(--color-teal-950); /* oklch(27.7% 0.046 192.524) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-cyan-50stroke: var(--color-cyan-50); /* oklch(98.4% 0.019 200.873) */Aplica stroke: var(--color-cyan-50); /* oklch(98.4% 0.019 200.873) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-cyan-100stroke: var(--color-cyan-100); /* oklch(95.6% 0.045 203.388) */Aplica stroke: var(--color-cyan-100); /* oklch(95.6% 0.045 203.388) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-cyan-200stroke: var(--color-cyan-200); /* oklch(91.7% 0.08 205.041) */Aplica stroke: var(--color-cyan-200); /* oklch(91.7% 0.08 205.041) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-cyan-300stroke: var(--color-cyan-300); /* oklch(86.5% 0.127 207.078) */Aplica stroke: var(--color-cyan-300); /* oklch(86.5% 0.127 207.078) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-cyan-400stroke: var(--color-cyan-400); /* oklch(78.9% 0.154 211.53) */Aplica stroke: var(--color-cyan-400); /* oklch(78.9% 0.154 211.53) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-cyan-500stroke: var(--color-cyan-500); /* oklch(71.5% 0.143 215.221) */Aplica stroke: var(--color-cyan-500); /* oklch(71.5% 0.143 215.221) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-cyan-600stroke: var(--color-cyan-600); /* oklch(60.9% 0.126 221.723) */Aplica stroke: var(--color-cyan-600); /* oklch(60.9% 0.126 221.723) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-cyan-700stroke: var(--color-cyan-700); /* oklch(52% 0.105 223.128) */Aplica stroke: var(--color-cyan-700); /* oklch(52% 0.105 223.128) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-cyan-800stroke: var(--color-cyan-800); /* oklch(45% 0.085 224.283) */Aplica stroke: var(--color-cyan-800); /* oklch(45% 0.085 224.283) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-cyan-900stroke: var(--color-cyan-900); /* oklch(39.8% 0.07 227.392) */Aplica stroke: var(--color-cyan-900); /* oklch(39.8% 0.07 227.392) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-cyan-950stroke: var(--color-cyan-950); /* oklch(30.2% 0.056 229.695) */Aplica stroke: var(--color-cyan-950); /* oklch(30.2% 0.056 229.695) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-sky-50stroke: var(--color-sky-50); /* oklch(97.7% 0.013 236.62) */Aplica stroke: var(--color-sky-50); /* oklch(97.7% 0.013 236.62) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-sky-100stroke: var(--color-sky-100); /* oklch(95.1% 0.026 236.824) */Aplica stroke: var(--color-sky-100); /* oklch(95.1% 0.026 236.824) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-sky-200stroke: var(--color-sky-200); /* oklch(90.1% 0.058 230.902) */Aplica stroke: var(--color-sky-200); /* oklch(90.1% 0.058 230.902) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-sky-300stroke: var(--color-sky-300); /* oklch(82.8% 0.111 230.318) */Aplica stroke: var(--color-sky-300); /* oklch(82.8% 0.111 230.318) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-sky-400stroke: var(--color-sky-400); /* oklch(74.6% 0.16 232.661) */Aplica stroke: var(--color-sky-400); /* oklch(74.6% 0.16 232.661) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-sky-500stroke: var(--color-sky-500); /* oklch(68.5% 0.169 237.323) */Aplica stroke: var(--color-sky-500); /* oklch(68.5% 0.169 237.323) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-sky-600stroke: var(--color-sky-600); /* oklch(58.8% 0.158 241.966) */Aplica stroke: var(--color-sky-600); /* oklch(58.8% 0.158 241.966) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-sky-700stroke: var(--color-sky-700); /* oklch(50% 0.134 242.749) */Aplica stroke: var(--color-sky-700); /* oklch(50% 0.134 242.749) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-sky-800stroke: var(--color-sky-800); /* oklch(44.3% 0.11 240.79) */Aplica stroke: var(--color-sky-800); /* oklch(44.3% 0.11 240.79) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-sky-900stroke: var(--color-sky-900); /* oklch(39.1% 0.09 240.876) */Aplica stroke: var(--color-sky-900); /* oklch(39.1% 0.09 240.876) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-sky-950stroke: var(--color-sky-950); /* oklch(29.3% 0.066 243.157) */Aplica stroke: var(--color-sky-950); /* oklch(29.3% 0.066 243.157) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-blue-50stroke: var(--color-blue-50); /* oklch(97% 0.014 254.604) */Aplica stroke: var(--color-blue-50); /* oklch(97% 0.014 254.604) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-blue-100stroke: var(--color-blue-100); /* oklch(93.2% 0.032 255.585) */Aplica stroke: var(--color-blue-100); /* oklch(93.2% 0.032 255.585) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-blue-200stroke: var(--color-blue-200); /* oklch(88.2% 0.059 254.128) */Aplica stroke: var(--color-blue-200); /* oklch(88.2% 0.059 254.128) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-blue-300stroke: var(--color-blue-300); /* oklch(80.9% 0.105 251.813) */Aplica stroke: var(--color-blue-300); /* oklch(80.9% 0.105 251.813) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-blue-400stroke: var(--color-blue-400); /* oklch(70.7% 0.165 254.624) */Aplica stroke: var(--color-blue-400); /* oklch(70.7% 0.165 254.624) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-blue-500stroke: var(--color-blue-500); /* oklch(62.3% 0.214 259.815) */Aplica stroke: var(--color-blue-500); /* oklch(62.3% 0.214 259.815) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-blue-600stroke: var(--color-blue-600); /* oklch(54.6% 0.245 262.881) */Aplica stroke: var(--color-blue-600); /* oklch(54.6% 0.245 262.881) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-blue-700stroke: var(--color-blue-700); /* oklch(48.8% 0.243 264.376) */Aplica stroke: var(--color-blue-700); /* oklch(48.8% 0.243 264.376) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-blue-800stroke: var(--color-blue-800); /* oklch(42.4% 0.199 265.638) */Aplica stroke: var(--color-blue-800); /* oklch(42.4% 0.199 265.638) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-blue-900stroke: var(--color-blue-900); /* oklch(37.9% 0.146 265.522) */Aplica stroke: var(--color-blue-900); /* oklch(37.9% 0.146 265.522) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-blue-950stroke: var(--color-blue-950); /* oklch(28.2% 0.091 267.935) */Aplica stroke: var(--color-blue-950); /* oklch(28.2% 0.091 267.935) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-indigo-50stroke: var(--color-indigo-50); /* oklch(96.2% 0.018 272.314) */Aplica stroke: var(--color-indigo-50); /* oklch(96.2% 0.018 272.314) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-indigo-100stroke: var(--color-indigo-100); /* oklch(93% 0.034 272.788) */Aplica stroke: var(--color-indigo-100); /* oklch(93% 0.034 272.788) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-indigo-200stroke: var(--color-indigo-200); /* oklch(87% 0.065 274.039) */Aplica stroke: var(--color-indigo-200); /* oklch(87% 0.065 274.039) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-indigo-300stroke: var(--color-indigo-300); /* oklch(78.5% 0.115 274.713) */Aplica stroke: var(--color-indigo-300); /* oklch(78.5% 0.115 274.713) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-indigo-400stroke: var(--color-indigo-400); /* oklch(67.3% 0.182 276.935) */Aplica stroke: var(--color-indigo-400); /* oklch(67.3% 0.182 276.935) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-indigo-500stroke: var(--color-indigo-500); /* oklch(58.5% 0.233 277.117) */Aplica stroke: var(--color-indigo-500); /* oklch(58.5% 0.233 277.117) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-indigo-600stroke: var(--color-indigo-600); /* oklch(51.1% 0.262 276.966) */Aplica stroke: var(--color-indigo-600); /* oklch(51.1% 0.262 276.966) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-indigo-700stroke: var(--color-indigo-700); /* oklch(45.7% 0.24 277.023) */Aplica stroke: var(--color-indigo-700); /* oklch(45.7% 0.24 277.023) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-indigo-800stroke: var(--color-indigo-800); /* oklch(39.8% 0.195 277.366) */Aplica stroke: var(--color-indigo-800); /* oklch(39.8% 0.195 277.366) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-indigo-900stroke: var(--color-indigo-900); /* oklch(35.9% 0.144 278.697) */Aplica stroke: var(--color-indigo-900); /* oklch(35.9% 0.144 278.697) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-indigo-950stroke: var(--color-indigo-950); /* oklch(25.7% 0.09 281.288) */Aplica stroke: var(--color-indigo-950); /* oklch(25.7% 0.09 281.288) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-violet-50stroke: var(--color-violet-50); /* oklch(96.9% 0.016 293.756) */Aplica stroke: var(--color-violet-50); /* oklch(96.9% 0.016 293.756) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-violet-100stroke: var(--color-violet-100); /* oklch(94.3% 0.029 294.588) */Aplica stroke: var(--color-violet-100); /* oklch(94.3% 0.029 294.588) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-violet-200stroke: var(--color-violet-200); /* oklch(89.4% 0.057 293.283) */Aplica stroke: var(--color-violet-200); /* oklch(89.4% 0.057 293.283) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-violet-300stroke: var(--color-violet-300); /* oklch(81.1% 0.111 293.571) */Aplica stroke: var(--color-violet-300); /* oklch(81.1% 0.111 293.571) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-violet-400stroke: var(--color-violet-400); /* oklch(70.2% 0.183 293.541) */Aplica stroke: var(--color-violet-400); /* oklch(70.2% 0.183 293.541) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-violet-500stroke: var(--color-violet-500); /* oklch(60.6% 0.25 292.717) */Aplica stroke: var(--color-violet-500); /* oklch(60.6% 0.25 292.717) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-violet-600stroke: var(--color-violet-600); /* oklch(54.1% 0.281 293.009) */Aplica stroke: var(--color-violet-600); /* oklch(54.1% 0.281 293.009) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-violet-700stroke: var(--color-violet-700); /* oklch(49.1% 0.27 292.581) */Aplica stroke: var(--color-violet-700); /* oklch(49.1% 0.27 292.581) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-violet-800stroke: var(--color-violet-800); /* oklch(43.2% 0.232 292.759) */Aplica stroke: var(--color-violet-800); /* oklch(43.2% 0.232 292.759) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-violet-900stroke: var(--color-violet-900); /* oklch(38% 0.189 293.745) */Aplica stroke: var(--color-violet-900); /* oklch(38% 0.189 293.745) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-violet-950stroke: var(--color-violet-950); /* oklch(28.3% 0.141 291.089) */Aplica stroke: var(--color-violet-950); /* oklch(28.3% 0.141 291.089) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-purple-50stroke: var(--color-purple-50); /* oklch(97.7% 0.014 308.299) */Aplica stroke: var(--color-purple-50); /* oklch(97.7% 0.014 308.299) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-purple-100stroke: var(--color-purple-100); /* oklch(94.6% 0.033 307.174) */Aplica stroke: var(--color-purple-100); /* oklch(94.6% 0.033 307.174) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-purple-200stroke: var(--color-purple-200); /* oklch(90.2% 0.063 306.703) */Aplica stroke: var(--color-purple-200); /* oklch(90.2% 0.063 306.703) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-purple-300stroke: var(--color-purple-300); /* oklch(82.7% 0.119 306.383) */Aplica stroke: var(--color-purple-300); /* oklch(82.7% 0.119 306.383) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-purple-400stroke: var(--color-purple-400); /* oklch(71.4% 0.203 305.504) */Aplica stroke: var(--color-purple-400); /* oklch(71.4% 0.203 305.504) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-purple-500stroke: var(--color-purple-500); /* oklch(62.7% 0.265 303.9) */Aplica stroke: var(--color-purple-500); /* oklch(62.7% 0.265 303.9) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-purple-600stroke: var(--color-purple-600); /* oklch(55.8% 0.288 302.321) */Aplica stroke: var(--color-purple-600); /* oklch(55.8% 0.288 302.321) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-purple-700stroke: var(--color-purple-700); /* oklch(49.6% 0.265 301.924) */Aplica stroke: var(--color-purple-700); /* oklch(49.6% 0.265 301.924) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-purple-800stroke: var(--color-purple-800); /* oklch(43.8% 0.218 303.724) */Aplica stroke: var(--color-purple-800); /* oklch(43.8% 0.218 303.724) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-purple-900stroke: var(--color-purple-900); /* oklch(38.1% 0.176 304.987) */Aplica stroke: var(--color-purple-900); /* oklch(38.1% 0.176 304.987) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-purple-950stroke: var(--color-purple-950); /* oklch(29.1% 0.149 302.717) */Aplica stroke: var(--color-purple-950); /* oklch(29.1% 0.149 302.717) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-fuchsia-50stroke: var(--color-fuchsia-50); /* oklch(97.7% 0.017 320.058) */Aplica stroke: var(--color-fuchsia-50); /* oklch(97.7% 0.017 320.058) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-fuchsia-100stroke: var(--color-fuchsia-100); /* oklch(95.2% 0.037 318.852) */Aplica stroke: var(--color-fuchsia-100); /* oklch(95.2% 0.037 318.852) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-fuchsia-200stroke: var(--color-fuchsia-200); /* oklch(90.3% 0.076 319.62) */Aplica stroke: var(--color-fuchsia-200); /* oklch(90.3% 0.076 319.62) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-fuchsia-300stroke: var(--color-fuchsia-300); /* oklch(83.3% 0.145 321.434) */Aplica stroke: var(--color-fuchsia-300); /* oklch(83.3% 0.145 321.434) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-fuchsia-400stroke: var(--color-fuchsia-400); /* oklch(74% 0.238 322.16) */Aplica stroke: var(--color-fuchsia-400); /* oklch(74% 0.238 322.16) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-fuchsia-500stroke: var(--color-fuchsia-500); /* oklch(66.7% 0.295 322.15) */Aplica stroke: var(--color-fuchsia-500); /* oklch(66.7% 0.295 322.15) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-fuchsia-600stroke: var(--color-fuchsia-600); /* oklch(59.1% 0.293 322.896) */Aplica stroke: var(--color-fuchsia-600); /* oklch(59.1% 0.293 322.896) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-fuchsia-700stroke: var(--color-fuchsia-700); /* oklch(51.8% 0.253 323.949) */Aplica stroke: var(--color-fuchsia-700); /* oklch(51.8% 0.253 323.949) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-fuchsia-800stroke: var(--color-fuchsia-800); /* oklch(45.2% 0.211 324.591) */Aplica stroke: var(--color-fuchsia-800); /* oklch(45.2% 0.211 324.591) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-fuchsia-900stroke: var(--color-fuchsia-900); /* oklch(40.1% 0.17 325.612) */Aplica stroke: var(--color-fuchsia-900); /* oklch(40.1% 0.17 325.612) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-fuchsia-950stroke: var(--color-fuchsia-950); /* oklch(29.3% 0.136 325.661) */Aplica stroke: var(--color-fuchsia-950); /* oklch(29.3% 0.136 325.661) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-pink-50stroke: var(--color-pink-50); /* oklch(97.1% 0.014 343.198) */Aplica stroke: var(--color-pink-50); /* oklch(97.1% 0.014 343.198) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-pink-100stroke: var(--color-pink-100); /* oklch(94.8% 0.028 342.258) */Aplica stroke: var(--color-pink-100); /* oklch(94.8% 0.028 342.258) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-pink-200stroke: var(--color-pink-200); /* oklch(89.9% 0.061 343.231) */Aplica stroke: var(--color-pink-200); /* oklch(89.9% 0.061 343.231) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-pink-300stroke: var(--color-pink-300); /* oklch(82.3% 0.12 346.018) */Aplica stroke: var(--color-pink-300); /* oklch(82.3% 0.12 346.018) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-pink-400stroke: var(--color-pink-400); /* oklch(71.8% 0.202 349.761) */Aplica stroke: var(--color-pink-400); /* oklch(71.8% 0.202 349.761) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-pink-500stroke: var(--color-pink-500); /* oklch(65.6% 0.241 354.308) */Aplica stroke: var(--color-pink-500); /* oklch(65.6% 0.241 354.308) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-pink-600stroke: var(--color-pink-600); /* oklch(59.2% 0.249 0.584) */Aplica stroke: var(--color-pink-600); /* oklch(59.2% 0.249 0.584) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-pink-700stroke: var(--color-pink-700); /* oklch(52.5% 0.223 3.958) */Aplica stroke: var(--color-pink-700); /* oklch(52.5% 0.223 3.958) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-pink-800stroke: var(--color-pink-800); /* oklch(45.9% 0.187 3.815) */Aplica stroke: var(--color-pink-800); /* oklch(45.9% 0.187 3.815) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-pink-900stroke: var(--color-pink-900); /* oklch(40.8% 0.153 2.432) */Aplica stroke: var(--color-pink-900); /* oklch(40.8% 0.153 2.432) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-pink-950stroke: var(--color-pink-950); /* oklch(28.4% 0.109 3.907) */Aplica stroke: var(--color-pink-950); /* oklch(28.4% 0.109 3.907) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-rose-50stroke: var(--color-rose-50); /* oklch(96.9% 0.015 12.422) */Aplica stroke: var(--color-rose-50); /* oklch(96.9% 0.015 12.422) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-rose-100stroke: var(--color-rose-100); /* oklch(94.1% 0.03 12.58) */Aplica stroke: var(--color-rose-100); /* oklch(94.1% 0.03 12.58) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-rose-200stroke: var(--color-rose-200); /* oklch(89.2% 0.058 10.001) */Aplica stroke: var(--color-rose-200); /* oklch(89.2% 0.058 10.001) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-rose-300stroke: var(--color-rose-300); /* oklch(81% 0.117 11.638) */Aplica stroke: var(--color-rose-300); /* oklch(81% 0.117 11.638) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-rose-400stroke: var(--color-rose-400); /* oklch(71.2% 0.194 13.428) */Aplica stroke: var(--color-rose-400); /* oklch(71.2% 0.194 13.428) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-rose-500stroke: var(--color-rose-500); /* oklch(64.5% 0.246 16.439) */Aplica stroke: var(--color-rose-500); /* oklch(64.5% 0.246 16.439) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-rose-600stroke: var(--color-rose-600); /* oklch(58.6% 0.253 17.585) */Aplica stroke: var(--color-rose-600); /* oklch(58.6% 0.253 17.585) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-rose-700stroke: var(--color-rose-700); /* oklch(51.4% 0.222 16.935) */Aplica stroke: var(--color-rose-700); /* oklch(51.4% 0.222 16.935) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-rose-800stroke: var(--color-rose-800); /* oklch(45.5% 0.188 13.697) */Aplica stroke: var(--color-rose-800); /* oklch(45.5% 0.188 13.697) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-rose-900stroke: var(--color-rose-900); /* oklch(41% 0.159 10.272) */Aplica stroke: var(--color-rose-900); /* oklch(41% 0.159 10.272) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-rose-950stroke: var(--color-rose-950); /* oklch(27.1% 0.105 12.094) */Aplica stroke: var(--color-rose-950); /* oklch(27.1% 0.105 12.094) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-slate-50stroke: var(--color-slate-50); /* oklch(98.4% 0.003 247.858) */Aplica stroke: var(--color-slate-50); /* oklch(98.4% 0.003 247.858) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-slate-100stroke: var(--color-slate-100); /* oklch(96.8% 0.007 247.896) */Aplica stroke: var(--color-slate-100); /* oklch(96.8% 0.007 247.896) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-slate-200stroke: var(--color-slate-200); /* oklch(92.9% 0.013 255.508) */Aplica stroke: var(--color-slate-200); /* oklch(92.9% 0.013 255.508) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-slate-300stroke: var(--color-slate-300); /* oklch(86.9% 0.022 252.894) */Aplica stroke: var(--color-slate-300); /* oklch(86.9% 0.022 252.894) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-slate-400stroke: var(--color-slate-400); /* oklch(70.4% 0.04 256.788) */Aplica stroke: var(--color-slate-400); /* oklch(70.4% 0.04 256.788) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-slate-500stroke: var(--color-slate-500); /* oklch(55.4% 0.046 257.417) */Aplica stroke: var(--color-slate-500); /* oklch(55.4% 0.046 257.417) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-slate-600stroke: var(--color-slate-600); /* oklch(44.6% 0.043 257.281) */Aplica stroke: var(--color-slate-600); /* oklch(44.6% 0.043 257.281) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-slate-700stroke: var(--color-slate-700); /* oklch(37.2% 0.044 257.287) */Aplica stroke: var(--color-slate-700); /* oklch(37.2% 0.044 257.287) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-slate-800stroke: var(--color-slate-800); /* oklch(27.9% 0.041 260.031) */Aplica stroke: var(--color-slate-800); /* oklch(27.9% 0.041 260.031) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-slate-900stroke: var(--color-slate-900); /* oklch(20.8% 0.042 265.755) */Aplica stroke: var(--color-slate-900); /* oklch(20.8% 0.042 265.755) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-slate-950stroke: var(--color-slate-950); /* oklch(12.9% 0.042 264.695) */Aplica stroke: var(--color-slate-950); /* oklch(12.9% 0.042 264.695) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-gray-50stroke: var(--color-gray-50); /* oklch(98.5% 0.002 247.839) */Aplica stroke: var(--color-gray-50); /* oklch(98.5% 0.002 247.839) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-gray-100stroke: var(--color-gray-100); /* oklch(96.7% 0.003 264.542) */Aplica stroke: var(--color-gray-100); /* oklch(96.7% 0.003 264.542) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-gray-200stroke: var(--color-gray-200); /* oklch(92.8% 0.006 264.531) */Aplica stroke: var(--color-gray-200); /* oklch(92.8% 0.006 264.531) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-gray-300stroke: var(--color-gray-300); /* oklch(87.2% 0.01 258.338) */Aplica stroke: var(--color-gray-300); /* oklch(87.2% 0.01 258.338) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-gray-400stroke: var(--color-gray-400); /* oklch(70.7% 0.022 261.325) */Aplica stroke: var(--color-gray-400); /* oklch(70.7% 0.022 261.325) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-gray-500stroke: var(--color-gray-500); /* oklch(55.1% 0.027 264.364) */Aplica stroke: var(--color-gray-500); /* oklch(55.1% 0.027 264.364) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-gray-600stroke: var(--color-gray-600); /* oklch(44.6% 0.03 256.802) */Aplica stroke: var(--color-gray-600); /* oklch(44.6% 0.03 256.802) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-gray-700stroke: var(--color-gray-700); /* oklch(37.3% 0.034 259.733) */Aplica stroke: var(--color-gray-700); /* oklch(37.3% 0.034 259.733) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-gray-800stroke: var(--color-gray-800); /* oklch(27.8% 0.033 256.848) */Aplica stroke: var(--color-gray-800); /* oklch(27.8% 0.033 256.848) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-gray-900stroke: var(--color-gray-900); /* oklch(21% 0.034 264.665) */Aplica stroke: var(--color-gray-900); /* oklch(21% 0.034 264.665) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-gray-950stroke: var(--color-gray-950); /* oklch(13% 0.028 261.692) */Aplica stroke: var(--color-gray-950); /* oklch(13% 0.028 261.692) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-zinc-50stroke: var(--color-zinc-50); /* oklch(98.5% 0 0) */Aplica stroke: var(--color-zinc-50); /* oklch(98.5% 0 0) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-zinc-100stroke: var(--color-zinc-100); /* oklch(96.7% 0.001 286.375) */Aplica stroke: var(--color-zinc-100); /* oklch(96.7% 0.001 286.375) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-zinc-200stroke: var(--color-zinc-200); /* oklch(92% 0.004 286.32) */Aplica stroke: var(--color-zinc-200); /* oklch(92% 0.004 286.32) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-zinc-300stroke: var(--color-zinc-300); /* oklch(87.1% 0.006 286.286) */Aplica stroke: var(--color-zinc-300); /* oklch(87.1% 0.006 286.286) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-zinc-400stroke: var(--color-zinc-400); /* oklch(70.5% 0.015 286.067) */Aplica stroke: var(--color-zinc-400); /* oklch(70.5% 0.015 286.067) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-zinc-500stroke: var(--color-zinc-500); /* oklch(55.2% 0.016 285.938) */Aplica stroke: var(--color-zinc-500); /* oklch(55.2% 0.016 285.938) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-zinc-600stroke: var(--color-zinc-600); /* oklch(44.2% 0.017 285.786) */Aplica stroke: var(--color-zinc-600); /* oklch(44.2% 0.017 285.786) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-zinc-700stroke: var(--color-zinc-700); /* oklch(37% 0.013 285.805) */Aplica stroke: var(--color-zinc-700); /* oklch(37% 0.013 285.805) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-zinc-800stroke: var(--color-zinc-800); /* oklch(27.4% 0.006 286.033) */Aplica stroke: var(--color-zinc-800); /* oklch(27.4% 0.006 286.033) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-zinc-900stroke: var(--color-zinc-900); /* oklch(21% 0.006 285.885) */Aplica stroke: var(--color-zinc-900); /* oklch(21% 0.006 285.885) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-zinc-950stroke: var(--color-zinc-950); /* oklch(14.1% 0.005 285.823) */Aplica stroke: var(--color-zinc-950); /* oklch(14.1% 0.005 285.823) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-neutral-50stroke: var(--color-neutral-50); /* oklch(98.5% 0 0) */Aplica stroke: var(--color-neutral-50); /* oklch(98.5% 0 0) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-neutral-100stroke: var(--color-neutral-100); /* oklch(97% 0 0) */Aplica stroke: var(--color-neutral-100); /* oklch(97% 0 0) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-neutral-200stroke: var(--color-neutral-200); /* oklch(92.2% 0 0) */Aplica stroke: var(--color-neutral-200); /* oklch(92.2% 0 0) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-neutral-300stroke: var(--color-neutral-300); /* oklch(87% 0 0) */Aplica stroke: var(--color-neutral-300); /* oklch(87% 0 0) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-neutral-400stroke: var(--color-neutral-400); /* oklch(70.8% 0 0) */Aplica stroke: var(--color-neutral-400); /* oklch(70.8% 0 0) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-neutral-500stroke: var(--color-neutral-500); /* oklch(55.6% 0 0) */Aplica stroke: var(--color-neutral-500); /* oklch(55.6% 0 0) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-neutral-600stroke: var(--color-neutral-600); /* oklch(43.9% 0 0) */Aplica stroke: var(--color-neutral-600); /* oklch(43.9% 0 0) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-neutral-700stroke: var(--color-neutral-700); /* oklch(37.1% 0 0) */Aplica stroke: var(--color-neutral-700); /* oklch(37.1% 0 0) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-neutral-800stroke: var(--color-neutral-800); /* oklch(26.9% 0 0) */Aplica stroke: var(--color-neutral-800); /* oklch(26.9% 0 0) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-neutral-900stroke: var(--color-neutral-900); /* oklch(20.5% 0 0) */Aplica stroke: var(--color-neutral-900); /* oklch(20.5% 0 0) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-neutral-950stroke: var(--color-neutral-950); /* oklch(14.5% 0 0) */Aplica stroke: var(--color-neutral-950); /* oklch(14.5% 0 0) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-stone-50stroke: var(--color-stone-50); /* oklch(98.5% 0.001 106.423) */Aplica stroke: var(--color-stone-50); /* oklch(98.5% 0.001 106.423) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-stone-100stroke: var(--color-stone-100); /* oklch(97% 0.001 106.424) */Aplica stroke: var(--color-stone-100); /* oklch(97% 0.001 106.424) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-stone-200stroke: var(--color-stone-200); /* oklch(92.3% 0.003 48.717) */Aplica stroke: var(--color-stone-200); /* oklch(92.3% 0.003 48.717) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-stone-300stroke: var(--color-stone-300); /* oklch(86.9% 0.005 56.366) */Aplica stroke: var(--color-stone-300); /* oklch(86.9% 0.005 56.366) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-stone-400stroke: var(--color-stone-400); /* oklch(70.9% 0.01 56.259) */Aplica stroke: var(--color-stone-400); /* oklch(70.9% 0.01 56.259) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-stone-500stroke: var(--color-stone-500); /* oklch(55.3% 0.013 58.071) */Aplica stroke: var(--color-stone-500); /* oklch(55.3% 0.013 58.071) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-stone-600stroke: var(--color-stone-600); /* oklch(44.4% 0.011 73.639) */Aplica stroke: var(--color-stone-600); /* oklch(44.4% 0.011 73.639) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-stone-700stroke: var(--color-stone-700); /* oklch(37.4% 0.01 67.558) */Aplica stroke: var(--color-stone-700); /* oklch(37.4% 0.01 67.558) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-stone-800stroke: var(--color-stone-800); /* oklch(26.8% 0.007 34.298) */Aplica stroke: var(--color-stone-800); /* oklch(26.8% 0.007 34.298) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-stone-900stroke: var(--color-stone-900); /* oklch(21.6% 0.006 56.043) */Aplica stroke: var(--color-stone-900); /* oklch(21.6% 0.006 56.043) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-stone-950stroke: var(--color-stone-950); /* oklch(14.7% 0.004 49.25) */Aplica stroke: var(--color-stone-950); /* oklch(14.7% 0.004 49.25) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-mauve-50stroke: var(--color-mauve-50); /* oklch(98.5% 0 0) */Aplica stroke: var(--color-mauve-50); /* oklch(98.5% 0 0) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-mauve-100stroke: var(--color-mauve-100); /* oklch(96% 0.003 325.6) */Aplica stroke: var(--color-mauve-100); /* oklch(96% 0.003 325.6) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-mauve-200stroke: var(--color-mauve-200); /* oklch(92.2% 0.005 325.62) */Aplica stroke: var(--color-mauve-200); /* oklch(92.2% 0.005 325.62) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-mauve-300stroke: var(--color-mauve-300); /* oklch(86.5% 0.012 325.68) */Aplica stroke: var(--color-mauve-300); /* oklch(86.5% 0.012 325.68) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-mauve-400stroke: var(--color-mauve-400); /* oklch(71.1% 0.019 323.02) */Aplica stroke: var(--color-mauve-400); /* oklch(71.1% 0.019 323.02) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-mauve-500stroke: var(--color-mauve-500); /* oklch(54.2% 0.034 322.5) */Aplica stroke: var(--color-mauve-500); /* oklch(54.2% 0.034 322.5) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-mauve-600stroke: var(--color-mauve-600); /* oklch(43.5% 0.029 321.78) */Aplica stroke: var(--color-mauve-600); /* oklch(43.5% 0.029 321.78) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-mauve-700stroke: var(--color-mauve-700); /* oklch(36.4% 0.029 323.89) */Aplica stroke: var(--color-mauve-700); /* oklch(36.4% 0.029 323.89) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-mauve-800stroke: var(--color-mauve-800); /* oklch(26.3% 0.024 320.12) */Aplica stroke: var(--color-mauve-800); /* oklch(26.3% 0.024 320.12) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-mauve-900stroke: var(--color-mauve-900); /* oklch(21.2% 0.019 322.12) */Aplica stroke: var(--color-mauve-900); /* oklch(21.2% 0.019 322.12) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-mauve-950stroke: var(--color-mauve-950); /* oklch(14.5% 0.008 326) */Aplica stroke: var(--color-mauve-950); /* oklch(14.5% 0.008 326) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-olive-50stroke: var(--color-olive-50); /* oklch(98.8% 0.003 106.5) */Aplica stroke: var(--color-olive-50); /* oklch(98.8% 0.003 106.5) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-olive-100stroke: var(--color-olive-100); /* oklch(96.6% 0.005 106.5) */Aplica stroke: var(--color-olive-100); /* oklch(96.6% 0.005 106.5) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-olive-200stroke: var(--color-olive-200); /* oklch(93% 0.007 106.5) */Aplica stroke: var(--color-olive-200); /* oklch(93% 0.007 106.5) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-olive-300stroke: var(--color-olive-300); /* oklch(88% 0.011 106.6) */Aplica stroke: var(--color-olive-300); /* oklch(88% 0.011 106.6) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-olive-400stroke: var(--color-olive-400); /* oklch(73.7% 0.021 106.9) */Aplica stroke: var(--color-olive-400); /* oklch(73.7% 0.021 106.9) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-olive-500stroke: var(--color-olive-500); /* oklch(58% 0.031 107.3) */Aplica stroke: var(--color-olive-500); /* oklch(58% 0.031 107.3) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-olive-600stroke: var(--color-olive-600); /* oklch(46.6% 0.025 107.3) */Aplica stroke: var(--color-olive-600); /* oklch(46.6% 0.025 107.3) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-olive-700stroke: var(--color-olive-700); /* oklch(39.4% 0.023 107.4) */Aplica stroke: var(--color-olive-700); /* oklch(39.4% 0.023 107.4) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-olive-800stroke: var(--color-olive-800); /* oklch(28.6% 0.016 107.4) */Aplica stroke: var(--color-olive-800); /* oklch(28.6% 0.016 107.4) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-olive-900stroke: var(--color-olive-900); /* oklch(22.8% 0.013 107.4) */Aplica stroke: var(--color-olive-900); /* oklch(22.8% 0.013 107.4) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-olive-950stroke: var(--color-olive-950); /* oklch(15.3% 0.006 107.1) */Aplica stroke: var(--color-olive-950); /* oklch(15.3% 0.006 107.1) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-mist-50stroke: var(--color-mist-50); /* oklch(98.7% 0.002 197.1) */Aplica stroke: var(--color-mist-50); /* oklch(98.7% 0.002 197.1) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-mist-100stroke: var(--color-mist-100); /* oklch(96.3% 0.002 197.1) */Aplica stroke: var(--color-mist-100); /* oklch(96.3% 0.002 197.1) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-mist-200stroke: var(--color-mist-200); /* oklch(92.5% 0.005 214.3) */Aplica stroke: var(--color-mist-200); /* oklch(92.5% 0.005 214.3) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-mist-300stroke: var(--color-mist-300); /* oklch(87.2% 0.007 219.6) */Aplica stroke: var(--color-mist-300); /* oklch(87.2% 0.007 219.6) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-mist-400stroke: var(--color-mist-400); /* oklch(72.3% 0.014 214.4) */Aplica stroke: var(--color-mist-400); /* oklch(72.3% 0.014 214.4) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-mist-500stroke: var(--color-mist-500); /* oklch(56% 0.021 213.5) */Aplica stroke: var(--color-mist-500); /* oklch(56% 0.021 213.5) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-mist-600stroke: var(--color-mist-600); /* oklch(45% 0.017 213.2) */Aplica stroke: var(--color-mist-600); /* oklch(45% 0.017 213.2) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-mist-700stroke: var(--color-mist-700); /* oklch(37.8% 0.015 216) */Aplica stroke: var(--color-mist-700); /* oklch(37.8% 0.015 216) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-mist-800stroke: var(--color-mist-800); /* oklch(27.5% 0.011 216.9) */Aplica stroke: var(--color-mist-800); /* oklch(27.5% 0.011 216.9) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-mist-900stroke: var(--color-mist-900); /* oklch(21.8% 0.008 223.9) */Aplica stroke: var(--color-mist-900); /* oklch(21.8% 0.008 223.9) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-mist-950stroke: var(--color-mist-950); /* oklch(14.8% 0.004 228.8) */Aplica stroke: var(--color-mist-950); /* oklch(14.8% 0.004 228.8) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-taupe-50stroke: var(--color-taupe-50); /* oklch(98.6% 0.002 67.8) */Aplica stroke: var(--color-taupe-50); /* oklch(98.6% 0.002 67.8) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-taupe-100stroke: var(--color-taupe-100); /* oklch(96% 0.002 17.2) */Aplica stroke: var(--color-taupe-100); /* oklch(96% 0.002 17.2) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-taupe-200stroke: var(--color-taupe-200); /* oklch(92.2% 0.005 34.3) */Aplica stroke: var(--color-taupe-200); /* oklch(92.2% 0.005 34.3) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-taupe-300stroke: var(--color-taupe-300); /* oklch(86.8% 0.007 39.5) */Aplica stroke: var(--color-taupe-300); /* oklch(86.8% 0.007 39.5) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-taupe-400stroke: var(--color-taupe-400); /* oklch(71.4% 0.014 41.2) */Aplica stroke: var(--color-taupe-400); /* oklch(71.4% 0.014 41.2) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-taupe-500stroke: var(--color-taupe-500); /* oklch(54.7% 0.021 43.1) */Aplica stroke: var(--color-taupe-500); /* oklch(54.7% 0.021 43.1) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-taupe-600stroke: var(--color-taupe-600); /* oklch(43.8% 0.017 39.3) */Aplica stroke: var(--color-taupe-600); /* oklch(43.8% 0.017 39.3) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-taupe-700stroke: var(--color-taupe-700); /* oklch(36.7% 0.016 35.7) */Aplica stroke: var(--color-taupe-700); /* oklch(36.7% 0.016 35.7) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-taupe-800stroke: var(--color-taupe-800); /* oklch(26.8% 0.011 36.5) */Aplica stroke: var(--color-taupe-800); /* oklch(26.8% 0.011 36.5) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-taupe-900stroke: var(--color-taupe-900); /* oklch(21.4% 0.009 43.1) */Aplica stroke: var(--color-taupe-900); /* oklch(21.4% 0.009 43.1) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-taupe-950stroke: var(--color-taupe-950); /* oklch(14.7% 0.004 49.3) */Aplica stroke: var(--color-taupe-950); /* oklch(14.7% 0.004 49.3) */ al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-( <custom-property> )stroke: var( <custom-property> );Aplica stroke: var( <custom-property> ); al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.
stroke-[ <color> ]stroke: <color> ;Aplica stroke: <color> ; al elemento; úsalo cuando necesites ajustar stroke con esta utilidad.

ancho de trazo

Fuente oficial: https://tailwindcss.com/docs/stroke-width

Utilidades para diseñar el ancho del trazo de elementos SVG.

Clase de UtilidadPropiedad CSSExplicación Breve
stroke- <number>stroke-width: <number> ;Aplica stroke-width: <number> ; al elemento; úsalo cuando necesites ajustar stroke-width con esta utilidad.
stroke-(length: <custom-property> )stroke-width: var( <custom-property> );Aplica stroke-width: var( <custom-property> ); al elemento; úsalo cuando necesites ajustar stroke-width con esta utilidad.
stroke-[ <value> ]stroke-width: <value> ;Aplica stroke-width: <value> ; al elemento; úsalo cuando necesites ajustar stroke-width con esta utilidad.

ajuste-de-color-forzado

Fuente oficial: https://tailwindcss.com/docs/forced-color-adjust

Utilidades para optar por colores forzados.

Clase de UtilidadPropiedad CSSExplicación Breve
forced-color-adjust-autoforced-color-adjust: auto;Aplica forced-color-adjust: auto; al elemento; úsalo cuando necesites ajustar forced-color-adjust con esta utilidad.
forced-color-adjust-noneforced-color-adjust: none;Aplica forced-color-adjust: none; al elemento; úsalo cuando necesites ajustar forced-color-adjust con esta utilidad.