Conceptos clave
Uso de clases de utilidad como API para tus design tokens.
Tailwind es un framework para crear diseños personalizados, y diferentes diseños necesitan diferentes tipografías, colores, sombras, breakpoints y más.
Estas decisiones de diseño de bajo nivel a menudo se denominan design tokens, y en los proyectos de Tailwind guardas esos valores en variables de tema.
Las variables de tema son variables CSS especiales definidas mediante la directiva @theme que influyen en qué clases de utilidad existen en tu proyecto.
Por ejemplo, puedes añadir un nuevo color a tu proyecto definiendo una variable de tema como --color-mint-500:
@import "tailwindcss";@theme { --color-mint-500: oklch(0.72 0.11 178);}Ahora puedes usar clases de utilidad como bg-mint-500, text-mint-500 o fill-mint-500 en tu HTML:
<div class="bg-mint-500"> <!-- ... --></div>Tailwind también genera variables CSS normales para tus variables de tema, por lo que puedes hacer referencia a tus design tokens en valores arbitrarios o estilos inline:
<div style="background-color: var(--color-mint-500)"> <!-- ... --></div>Obtén más información sobre cómo se asignan las variables de tema a diferentes clases de utilidad en la documentación de namespaces de variables de tema.
@theme en lugar de :root?Las variables de tema no son solo variables CSS; también le indican a Tailwind que cree nuevas clases de utilidad que puedes usar en tu HTML.
Dado que hacen más que las variables CSS normales, Tailwind utiliza una sintaxis especial para que la definición de las variables de tema sea siempre explícita. Las variables de tema también deben definirse en el nivel superior y no anidarse bajo otros selectores o media queries, y el uso de una sintaxis especial permite hacer cumplir eso.
Definir variables CSS normales con :root todavía puede ser útil en proyectos de Tailwind cuando quieres definir una variable que no está destinada a conectarse con una clase de utilidad. Usa @theme cuando quieras que un design token se asigne directamente a una clase de utilidad, y usa :root para definir variables CSS normales que no deban tener clases de utilidad correspondientes.
Algunas clases de utilidad en Tailwind como flex y object-cover son estáticas, y siempre son las mismas de un proyecto a otro. Pero muchas otras están impulsadas por variables de tema, y solo existen debido a las variables de tema que has definido.
Por ejemplo, las variables de tema definidas en el namespace --font-* determinan todas las utilidades de font-family que existen en un proyecto:
@theme { --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* ... */}Las utilidades font-sans, font-serif y font-mono solo existen por defecto porque el tema predeterminado de Tailwind define las variables de tema --font-sans, --font-serif y --font-mono.
Si se definiera otra variable de tema como --font-poppins, una clase de utilidad font-poppins estaría disponible para acompañarla:
@import "tailwindcss";@theme { --font-poppins: Poppins, sans-serif;}<h1 class="font-poppins">Este titular utilizará Poppins.</h1>Puedes nombrar tus variables de tema como quieras dentro de estos namespaces, y una utilidad correspondiente con el mismo nombre estará disponible para usar en tu HTML.
Algunas variables de tema se utilizan para definir variantes en lugar de utilidades. Por ejemplo, las variables de tema en el namespace --breakpoint-* determinan qué variantes de breakpoint responsivas existen en tu proyecto:
@import "tailwindcss";@theme { --breakpoint-3xl: 120rem;}Ahora puedes usar la variante 3xl:* para activar una utilidad solo cuando el viewport sea de 120rem o más ancho:
<div class="3xl:grid-cols-6 grid grid-cols-2 md:grid-cols-4"> <!-- ... --></div>Obtén más información sobre cómo se asignan las variables de tema a diferentes clases de utilidad y variantes en la documentación de namespaces de variables de tema.
Las variables de tema se definen en namespaces y cada namespace corresponde a uno o más APIs de clase de utilidad o variante.
Definir nuevas variables de tema en estos namespaces hará que nuevas utilidades y variantes correspondientes estén disponibles en tu proyecto:
| Namespace | Clases de utilidad |
|---|---|
--color-* | Utilidades de color como bg-red-500, text-sky-300 y muchas más |
--font-* | Utilidades de familia tipográfica como font-sans |
--text-* | Utilidades de tamaño de fuente como text-xl |
--font-weight-* | Utilidades de grosor de fuente como font-bold |
--tracking-* | Utilidades de espaciado de letras como tracking-wide |
--leading-* | Utilidades de altura de línea como leading-tight |
--tab-size-* | Utilidades de tamaño de tabulación como tab-github |
--breakpoint-* | Variantes de breakpoints responsivos como sm:* |
--container-* | Variantes de container queries como @sm:* y utilidades de tamaño como max-w-md |
--spacing-* | Utilidades de espaciado y tamaño como px-4, max-h-16 y muchas más |
--radius-* | Utilidades de radio de borde como rounded-sm |
--shadow-* | Utilidades de sombra de caja como shadow-md |
--inset-shadow-* | Utilidades de sombra de caja interior como inset-shadow-xs |
--drop-shadow-* | Utilidades de filtro de sombra paralela como drop-shadow-md |
--blur-* | Utilidades de filtro de desenfoque como blur-md |
--perspective-* | Utilidades de perspectiva como perspective-near |
--zoom-* | Utilidades de zoom como zoom-compact |
--aspect-* | Utilidades de relación de aspecto como aspect-video |
--ease-* | Utilidades de función de temporización de transición como ease-out |
--animate-* | Clases de animación como animate-spin |
Para obtener una lista de todas las variables de tema predeterminadas, consulta la referencia de variables de tema predeterminadas.
Cuando importas tailwindcss en la parte superior de tu archivo CSS, este incluye un conjunto de variables de tema predeterminadas para ayudarte a comenzar.
Esto es lo que realmente estás importando cuando importas tailwindcss:
@layer theme, base, components, utilities;@import "./theme.css" layer(theme);@import "./preflight.css" layer(base);@import "./utilities.css" layer(utilities);That theme.css file includes the default color palette, type scale, shadows, fonts, and more:
@theme { --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --color-red-50: oklch(0.971 0.013 17.38); --color-red-100: oklch(0.936 0.032 17.717); --color-red-200: oklch(0.885 0.062 18.334); /* ... */ --shadow-2xs: 0 1px rgb(0 0 0 / 0.05); --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); /* ... */}Esta es la razón por la que las utilidades como bg-red-200, font-serif y shadow-sm existen desde el principio: están impulsadas por el tema predeterminado, no codificadas de forma fija en el framework como flex-col o pointer-events-none.
Para obtener una lista de todas las variables de tema predeterminadas, consulta la referencia de variables de tema predeterminadas.
Las variables de tema predeterminadas son de propósito muy general y adecuadas para construir diseños drásticamente diferentes, pero siguen siendo solo un punto de partida. Es muy común personalizar aspectos como la paleta de colores, las fuentes y las sombras para crear exactamente el diseño que tienes en mente.
Usa @theme para definir nuevas variables de tema y extender el tema predeterminado:
@import "tailwindcss";@theme { --font-script: Great Vibes, cursive;}Esto hace que una nueva clase de utilidad font-script esté disponible para que la uses en tu HTML, al igual que las utilidades predeterminadas font-sans o font-mono:
<p class="font-script">Esto utilizará la familia tipográfica Great Vibes.</p>Obtén más información sobre cómo se asignan las variables de tema a diferentes clases de utilidad y variantes en la documentación de namespaces de variables de tema.
Anula el valor de una variable de tema predeterminada redefiniéndola dentro de @theme:
@import "tailwindcss";@theme { --breakpoint-sm: 30rem;}Ahora la variante sm:* se activará a 30rem en lugar del tamaño de viewport predeterminado de 40rem:
<div class="grid grid-cols-1 sm:grid-cols-3"> <!-- ... --></div>Para anular por completo un namespace entero en el tema predeterminado, establece todo el namespace a initial usando la sintaxis especial del asterisco:
@import "tailwindcss";@theme { --color-*: initial; --color-white: #fff; --color-purple: #3f3cbb; --color-midnight: #121063; --color-tahiti: #3ab7bf; --color-bermuda: #78dcca;}Cuando haces esto, todas las utilidades predeterminadas que usan ese namespace (como bg-red-500) se eliminarán, y solo tus valores personalizados (como bg-midnight) estarán disponibles.
Obtén más información sobre cómo se asignan las variables de tema a diferentes clases de utilidad y variantes en la documentación de namespaces de variables de tema.
Para desactivar por completo el tema predeterminado y usar solo valores personalizados, establece el namespace global de variables de tema a initial:
@import "tailwindcss";@theme { --*: initial; --spacing: 4px; --font-body: Inter, sans-serif; --color-lagoon: oklch(0.72 0.11 221.19); --color-coral: oklch(0.74 0.17 40.24); --color-driftwood: oklch(0.79 0.06 74.59); --color-tide: oklch(0.49 0.08 205.88); --color-dusk: oklch(0.82 0.15 72.09);}Ahora ninguna de las clases de utilidad predeterminadas que están impulsadas por variables de tema estará disponible, y solo podrás usar clases de utilidad que coincidan con tus variables de tema personalizadas, como font-body y text-dusk.
Define las reglas @keyframes para tus variables de tema --animate-* dentro de @theme para incluirlas en tu CSS generado:
@import "tailwindcss";@theme { --animate-fade-in-scale: fade-in-scale 0.3s ease-out; @keyframes fade-in-scale { 0% { opacity: 0; transform: scale(0.95); } 100% { opacity: 1; transform: scale(1); } }}Si deseas que tus reglas @keyframes personalizadas se incluyan siempre, incluso cuando no agregues una variable de tema --animate-*, defínelas fuera de @theme en su lugar.
Al definir variables de tema que hacen referencia a otras variables, usa la opción inline:
@import "tailwindcss";@theme inline { --font-sans: var(--font-inter);}Al usar la opción inline, la clase de utilidad utilizará el valor de la variable de tema en lugar de hacer referencia a la variable de tema real:
.font-sans { font-family: var(--font-inter);}Sin usar inline, tus clases de utilidad podrían resolverse a valores inesperados debido a cómo se resuelven las variables en CSS.
Por ejemplo, este texto recurrirá a sans-serif en lugar de usar Inter como cabría esperar:
<div id="parent" style="--font-sans: var(--font-inter, sans-serif);"> <div id="child" style="--font-inter: Inter; font-family: var(--font-sans);"> Este texto utilizará la fuente sans-serif, no Inter. </div></div>Esto sucede porque var(--font-sans) se resuelve donde se define --font-sans (en #parent), y --font-inter no tiene ningún valor allí ya que no se define hasta más profundamente en el árbol (en #child).
Por defecto, solo se generarán las variables CSS utilizadas en el resultado de CSS final. Si deseas generar siempre todas las variables CSS, puedes usar la opción de tema static:
@import "tailwindcss";@theme static { --color-primary: var(--color-red-500); --color-secondary: var(--color-blue-500);}Dado que las variables de tema se definen en CSS, compartirlas entre proyectos es solo cuestión de colocarlas en su propio archivo CSS que puedas importar en cada proyecto:
@theme { --*: initial; --spacing: 4px; --font-body: Inter, sans-serif; --color-lagoon: oklch(0.72 0.11 221.19); --color-coral: oklch(0.74 0.17 40.24); --color-driftwood: oklch(0.79 0.06 74.59); --color-tide: oklch(0.49 0.08 205.88); --color-dusk: oklch(0.82 0.15 72.09);}Luego puedes usar @import para incluir tus variables de tema en otros proyectos:
@import "tailwindcss";@import "../brand/theme.css";Puedes colocar variables de tema compartidas como esta en su propio paquete en configuraciones monorepo o incluso publicarlas en NPM e importarlas al igual que cualquier otro archivo CSS de terceros.
Todas tus variables de tema se convierten en variables CSS normales cuando compilas tu CSS:
:root { --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --color-red-50: oklch(0.971 0.013 17.38); --color-red-100: oklch(0.936 0.032 17.717); --color-red-200: oklch(0.885 0.062 18.334); /* ... */ --shadow-2xs: 0 1px rgb(0 0 0 / 0.05); --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); /* ... */}Esto facilita hacer referencia a todos tus design tokens en cualquiera de tus estilos CSS personalizados o inline.
Usa tus variables de tema para acceder a tus design tokens cuando estés escribiendo CSS personalizado que necesite usar los mismos valores:
@import "tailwindcss";@layer components { .typography { p { font-size: var(--text-base); color: var(--color-gray-700); } h1 { font-size: var(--text-2xl--line-height); font-weight: var(--font-weight-semibold); color: var(--color-gray-950); } h2 { font-size: var(--text-xl); font-weight: var(--font-weight-semibold); color: var(--color-gray-950); } }}Esto suele ser útil al diseñar HTML que no controlas, como contenido Markdown proveniente de una base de datos o API y renderizado a HTML.
El uso de variables de tema en valores arbitrarios puede ser útil, especialmente en combinación con la función calc().
<div class="relative rounded-xl"> <div class="absolute inset-px rounded-[calc(var(--radius-xl)-1px)]"> <!-- ... --> </div> <!-- ... --></div>En el ejemplo anterior, estamos restando 1px al valor de --radius-xl en un elemento inset anidado para asegurarnos de que tenga un radio de borde concéntrico.
La mayoría de las veces, cuando necesitas hacer referencia a tus variables de tema en JS, puedes usar las variables CSS directamente, al igual que cualquier otro valor CSS.
Por ejemplo, la popular biblioteca Motion para React te permite animar hacia y desde valores de variables CSS:
<motion.div animate={{ backgroundColor: "var(--color-blue-500)" }} />Si necesitas acceso al valor resuelto de una variable CSS en JS, puedes usar getComputedStyle para obtener el valor de una variable de tema en la raíz del documento:
let styles = getComputedStyle(document.documentElement);let shadow = styles.getPropertyValue("--shadow-xl");Para tu referencia, aquí tienes una lista completa de las variables de tema incluidas por defecto cuando importas Tailwind CSS en tu proyecto:
@theme { --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --color-red-50: oklch(97.1% 0.013 17.38); --color-red-100: oklch(93.6% 0.032 17.717); --color-red-200: oklch(88.5% 0.062 18.334); --color-red-300: oklch(80.8% 0.114 19.571); --color-red-400: oklch(70.4% 0.191 22.216); --color-red-500: oklch(63.7% 0.237 25.331); --color-red-600: oklch(57.7% 0.245 27.325); --color-red-700: oklch(50.5% 0.213 27.518); --color-red-800: oklch(44.4% 0.177 26.899); --color-red-900: oklch(39.6% 0.141 25.723); --color-red-950: oklch(25.8% 0.092 26.042); --color-orange-50: oklch(98% 0.016 73.684); --color-orange-100: oklch(95.4% 0.038 75.164); --color-orange-200: oklch(90.1% 0.076 70.697); --color-orange-300: oklch(83.7% 0.128 66.29); --color-orange-400: oklch(75% 0.183 55.934); --color-orange-500: oklch(70.5% 0.213 47.604); --color-orange-600: oklch(64.6% 0.222 41.116); --color-orange-700: oklch(55.3% 0.195 38.402); --color-orange-800: oklch(47% 0.157 37.304); --color-orange-900: oklch(40.8% 0.123 38.172); --color-orange-950: oklch(26.6% 0.079 36.259); --color-amber-50: oklch(98.7% 0.022 95.277); --color-amber-100: oklch(96.2% 0.059 95.617); --color-amber-200: oklch(92.4% 0.12 95.746); --color-amber-300: oklch(87.9% 0.169 91.605); --color-amber-400: oklch(82.8% 0.189 84.429); --color-amber-500: oklch(76.9% 0.188 70.08); --color-amber-600: oklch(66.6% 0.179 58.318); --color-amber-700: oklch(55.5% 0.163 48.998); --color-amber-800: oklch(47.3% 0.137 46.201); --color-amber-900: oklch(41.4% 0.112 45.904); --color-amber-950: oklch(27.9% 0.077 45.635); --color-yellow-50: oklch(98.7% 0.026 102.212); --color-yellow-100: oklch(97.3% 0.071 103.193); --color-yellow-200: oklch(94.5% 0.129 101.54); --color-yellow-300: oklch(90.5% 0.182 98.111); --color-yellow-400: oklch(85.2% 0.199 91.936); --color-yellow-500: oklch(79.5% 0.184 86.047); --color-yellow-600: oklch(68.1% 0.162 75.834); --color-yellow-700: oklch(55.4% 0.135 66.442); --color-yellow-800: oklch(47.6% 0.114 61.907); --color-yellow-900: oklch(42.1% 0.095 57.708); --color-yellow-950: oklch(28.6% 0.066 53.813); --color-lime-50: oklch(98.6% 0.031 120.757); --color-lime-100: oklch(96.7% 0.067 122.328); --color-lime-200: oklch(93.8% 0.127 124.321); --color-lime-300: oklch(89.7% 0.196 126.665); --color-lime-400: oklch(84.1% 0.238 128.85); --color-lime-500: oklch(76.8% 0.233 130.85); --color-lime-600: oklch(64.8% 0.2 131.684); --color-lime-700: oklch(53.2% 0.157 131.589); --color-lime-800: oklch(45.3% 0.124 130.933); --color-lime-900: oklch(40.5% 0.101 131.063); --color-lime-950: oklch(27.4% 0.072 132.109); --color-green-50: oklch(98.2% 0.018 155.826); --color-green-100: oklch(96.2% 0.044 156.743); --color-green-200: oklch(92.5% 0.084 155.995); --color-green-300: oklch(87.1% 0.15 154.449); --color-green-400: oklch(79.2% 0.209 151.711); --color-green-500: oklch(72.3% 0.219 149.579); --color-green-600: oklch(62.7% 0.194 149.214); --color-green-700: oklch(52.7% 0.154 150.069); --color-green-800: oklch(44.8% 0.119 151.328); --color-green-900: oklch(39.3% 0.095 152.535); --color-green-950: oklch(26.6% 0.065 152.934); --color-emerald-50: oklch(97.9% 0.021 166.113); --color-emerald-100: oklch(95% 0.052 163.051); --color-emerald-200: oklch(90.5% 0.093 164.15); --color-emerald-300: oklch(84.5% 0.143 164.978); --color-emerald-400: oklch(76.5% 0.177 163.223); --color-emerald-500: oklch(69.6% 0.17 162.48); --color-emerald-600: oklch(59.6% 0.145 163.225); --color-emerald-700: oklch(50.8% 0.118 165.612); --color-emerald-800: oklch(43.2% 0.095 166.913); --color-emerald-900: oklch(37.8% 0.077 168.94); --color-emerald-950: oklch(26.2% 0.051 172.552); --color-teal-50: oklch(98.4% 0.014 180.72); --color-teal-100: oklch(95.3% 0.051 180.801); --color-teal-200: oklch(91% 0.096 180.426); --color-teal-300: oklch(85.5% 0.138 181.071); --color-teal-400: oklch(77.7% 0.152 181.912); --color-teal-500: oklch(70.4% 0.14 182.503); --color-teal-600: oklch(60% 0.118 184.704); --color-teal-700: oklch(51.1% 0.096 186.391); --color-teal-800: oklch(43.7% 0.078 188.216); --color-teal-900: oklch(38.6% 0.063 188.416); --color-teal-950: oklch(27.7% 0.046 192.524); --color-cyan-50: oklch(98.4% 0.019 200.873); --color-cyan-100: oklch(95.6% 0.045 203.388); --color-cyan-200: oklch(91.7% 0.08 205.041); --color-cyan-300: oklch(86.5% 0.127 207.078); --color-cyan-400: oklch(78.9% 0.154 211.53); --color-cyan-500: oklch(71.5% 0.143 215.221); --color-cyan-600: oklch(60.9% 0.126 221.723); --color-cyan-700: oklch(52% 0.105 223.128); --color-cyan-800: oklch(45% 0.085 224.283); --color-cyan-900: oklch(39.8% 0.07 227.392); --color-cyan-950: oklch(30.2% 0.056 229.695); --color-sky-50: oklch(97.7% 0.013 236.62); --color-sky-100: oklch(95.1% 0.026 236.824); --color-sky-200: oklch(90.1% 0.058 230.902); --color-sky-300: oklch(82.8% 0.111 230.318); --color-sky-400: oklch(74.6% 0.16 232.661); --color-sky-500: oklch(68.5% 0.169 237.323); --color-sky-600: oklch(58.8% 0.158 241.966); --color-sky-700: oklch(50% 0.134 242.749); --color-sky-800: oklch(44.3% 0.11 240.79); --color-sky-900: oklch(39.1% 0.09 240.876); --color-sky-950: oklch(29.3% 0.066 243.157); --color-blue-50: oklch(97% 0.014 254.604); --color-blue-100: oklch(93.2% 0.032 255.585); --color-blue-200: oklch(88.2% 0.059 254.128); --color-blue-300: oklch(80.9% 0.105 251.813); --color-blue-400: oklch(70.7% 0.165 254.624); --color-blue-500: oklch(62.3% 0.214 259.815); --color-blue-600: oklch(54.6% 0.245 262.881); --color-blue-700: oklch(48.8% 0.243 264.376); --color-blue-800: oklch(42.4% 0.199 265.638); --color-blue-900: oklch(37.9% 0.146 265.522); --color-blue-950: oklch(28.2% 0.091 267.935); --color-indigo-50: oklch(96.2% 0.018 272.314); --color-indigo-100: oklch(93% 0.034 272.788); --color-indigo-200: oklch(87% 0.065 274.039); --color-indigo-300: oklch(78.5% 0.115 274.713); --color-indigo-400: oklch(67.3% 0.182 276.935); --color-indigo-500: oklch(58.5% 0.233 277.117); --color-indigo-600: oklch(51.1% 0.262 276.966); --color-indigo-700: oklch(45.7% 0.24 277.023); --color-indigo-800: oklch(39.8% 0.195 277.366); --color-indigo-900: oklch(35.9% 0.144 278.697); --color-indigo-950: oklch(25.7% 0.09 281.288); --color-violet-50: oklch(96.9% 0.016 293.756); --color-violet-100: oklch(94.3% 0.029 294.588); --color-violet-200: oklch(89.4% 0.057 293.283); --color-violet-300: oklch(81.1% 0.111 293.571); --color-violet-400: oklch(70.2% 0.183 293.541); --color-violet-500: oklch(60.6% 0.25 292.717); --color-violet-600: oklch(54.1% 0.281 293.009); --color-violet-700: oklch(49.1% 0.27 292.581); --color-violet-800: oklch(43.2% 0.232 292.759); --color-violet-900: oklch(38% 0.189 293.745); --color-violet-950: oklch(28.3% 0.141 291.089); --color-purple-50: oklch(97.7% 0.014 308.299); --color-purple-100: oklch(94.6% 0.033 307.174); --color-purple-200: oklch(90.2% 0.063 306.703); --color-purple-300: oklch(82.7% 0.119 306.383); --color-purple-400: oklch(71.4% 0.203 305.504); --color-purple-500: oklch(62.7% 0.265 303.9); --color-purple-600: oklch(55.8% 0.288 302.321); --color-purple-700: oklch(49.6% 0.265 301.924); --color-purple-800: oklch(43.8% 0.218 303.724); --color-purple-900: oklch(38.1% 0.176 304.987); --color-purple-950: oklch(29.1% 0.149 302.717); --color-fuchsia-50: oklch(97.7% 0.017 320.058); --color-fuchsia-100: oklch(95.2% 0.037 318.852); --color-fuchsia-200: oklch(90.3% 0.076 319.62); --color-fuchsia-300: oklch(83.3% 0.145 321.434); --color-fuchsia-400: oklch(74% 0.238 322.16); --color-fuchsia-500: oklch(66.7% 0.295 322.15); --color-fuchsia-600: oklch(59.1% 0.293 322.896); --color-fuchsia-700: oklch(51.8% 0.253 323.949); --color-fuchsia-800: oklch(45.2% 0.211 324.591); --color-fuchsia-900: oklch(40.1% 0.17 325.612); --color-fuchsia-950: oklch(29.3% 0.136 325.661); --color-pink-50: oklch(97.1% 0.014 343.198); --color-pink-100: oklch(94.8% 0.028 342.258); --color-pink-200: oklch(89.9% 0.061 343.231); --color-pink-300: oklch(82.3% 0.12 346.018); --color-pink-400: oklch(71.8% 0.202 349.761); --color-pink-500: oklch(65.6% 0.241 354.308); --color-pink-600: oklch(59.2% 0.249 0.584); --color-pink-700: oklch(52.5% 0.223 3.958); --color-pink-800: oklch(45.9% 0.187 3.815); --color-pink-900: oklch(40.8% 0.153 2.432); --color-pink-950: oklch(28.4% 0.109 3.907); --color-rose-50: oklch(96.9% 0.015 12.422); --color-rose-100: oklch(94.1% 0.03 12.58); --color-rose-200: oklch(89.2% 0.058 10.001); --color-rose-300: oklch(81% 0.117 11.638); --color-rose-400: oklch(71.2% 0.194 13.428); --color-rose-500: oklch(64.5% 0.246 16.439); --color-rose-600: oklch(58.6% 0.253 17.585); --color-rose-700: oklch(51.4% 0.222 16.935); --color-rose-800: oklch(45.5% 0.188 13.697); --color-rose-900: oklch(41% 0.159 10.272); --color-rose-950: oklch(27.1% 0.105 12.094); --color-slate-50: oklch(98.4% 0.003 247.858); --color-slate-100: oklch(96.8% 0.007 247.896); --color-slate-200: oklch(92.9% 0.013 255.508); --color-slate-300: oklch(86.9% 0.022 252.894); --color-slate-400: oklch(70.4% 0.04 256.788); --color-slate-500: oklch(55.4% 0.046 257.417); --color-slate-600: oklch(44.6% 0.043 257.281); --color-slate-700: oklch(37.2% 0.044 257.287); --color-slate-800: oklch(27.9% 0.041 260.031); --color-slate-900: oklch(20.8% 0.042 265.755); --color-slate-950: oklch(12.9% 0.042 264.695); --color-gray-50: oklch(98.5% 0.002 247.839); --color-gray-100: oklch(96.7% 0.003 264.542); --color-gray-200: oklch(92.8% 0.006 264.531); --color-gray-300: oklch(87.2% 0.01 258.338); --color-gray-400: oklch(70.7% 0.022 261.325); --color-gray-500: oklch(55.1% 0.027 264.364); --color-gray-600: oklch(44.6% 0.03 256.802); --color-gray-700: oklch(37.3% 0.034 259.733); --color-gray-800: oklch(27.8% 0.033 256.848); --color-gray-900: oklch(21% 0.034 264.665); --color-gray-950: oklch(13% 0.028 261.692); --color-zinc-50: oklch(98.5% 0 0); --color-zinc-100: oklch(96.7% 0.001 286.375); --color-zinc-200: oklch(92% 0.004 286.32); --color-zinc-300: oklch(87.1% 0.006 286.286); --color-zinc-400: oklch(70.5% 0.015 286.067); --color-zinc-500: oklch(55.2% 0.016 285.938); --color-zinc-600: oklch(44.2% 0.017 285.786); --color-zinc-700: oklch(37% 0.013 285.805); --color-zinc-800: oklch(27.4% 0.006 286.033); --color-zinc-900: oklch(21% 0.006 285.885); --color-zinc-950: oklch(14.1% 0.005 285.823); --color-neutral-50: oklch(98.5% 0 0); --color-neutral-100: oklch(97% 0 0); --color-neutral-200: oklch(92.2% 0 0); --color-neutral-300: oklch(87% 0 0); --color-neutral-400: oklch(70.8% 0 0); --color-neutral-500: oklch(55.6% 0 0); --color-neutral-600: oklch(43.9% 0 0); --color-neutral-700: oklch(37.1% 0 0); --color-neutral-800: oklch(26.9% 0 0); --color-neutral-900: oklch(20.5% 0 0); --color-neutral-950: oklch(14.5% 0 0); --color-stone-50: oklch(98.5% 0.001 106.423); --color-stone-100: oklch(97% 0.001 106.424); --color-stone-200: oklch(92.3% 0.003 48.717); --color-stone-300: oklch(86.9% 0.005 56.366); --color-stone-400: oklch(70.9% 0.01 56.259); --color-stone-500: oklch(55.3% 0.013 58.071); --color-stone-600: oklch(44.4% 0.011 73.639); --color-stone-700: oklch(37.4% 0.01 67.558); --color-stone-800: oklch(26.8% 0.007 34.298); --color-stone-900: oklch(21.6% 0.006 56.043); --color-stone-950: oklch(14.7% 0.004 49.25); --color-mauve-50: oklch(98.5% 0 0); --color-mauve-100: oklch(96% 0.003 325.6); --color-mauve-200: oklch(92.2% 0.005 325.62); --color-mauve-300: oklch(86.5% 0.012 325.68); --color-mauve-400: oklch(71.1% 0.019 323.02); --color-mauve-500: oklch(54.2% 0.034 322.5); --color-mauve-600: oklch(43.5% 0.029 321.78); --color-mauve-700: oklch(36.4% 0.029 323.89); --color-mauve-800: oklch(26.3% 0.024 320.12); --color-mauve-900: oklch(21.2% 0.019 322.12); --color-mauve-950: oklch(14.5% 0.008 326); --color-olive-50: oklch(98.8% 0.003 106.5); --color-olive-100: oklch(96.6% 0.005 106.5); --color-olive-200: oklch(93% 0.007 106.5); --color-olive-300: oklch(88% 0.011 106.6); --color-olive-400: oklch(73.7% 0.021 106.9); --color-olive-500: oklch(58% 0.031 107.3); --color-olive-600: oklch(46.6% 0.025 107.3); --color-olive-700: oklch(39.4% 0.023 107.4); --color-olive-800: oklch(28.6% 0.016 107.4); --color-olive-900: oklch(22.8% 0.013 107.4); --color-olive-950: oklch(15.3% 0.006 107.1); --color-mist-50: oklch(98.7% 0.002 197.1); --color-mist-100: oklch(96.3% 0.002 197.1); --color-mist-200: oklch(92.5% 0.005 214.3); --color-mist-300: oklch(87.2% 0.007 219.6); --color-mist-400: oklch(72.3% 0.014 214.4); --color-mist-500: oklch(56% 0.021 213.5); --color-mist-600: oklch(45% 0.017 213.2); --color-mist-700: oklch(37.8% 0.015 216); --color-mist-800: oklch(27.5% 0.011 216.9); --color-mist-900: oklch(21.8% 0.008 223.9); --color-mist-950: oklch(14.8% 0.004 228.8); --color-taupe-50: oklch(98.6% 0.002 67.8); --color-taupe-100: oklch(96% 0.002 17.2); --color-taupe-200: oklch(92.2% 0.005 34.3); --color-taupe-300: oklch(86.8% 0.007 39.5); --color-taupe-400: oklch(71.4% 0.014 41.2); --color-taupe-500: oklch(54.7% 0.021 43.1); --color-taupe-600: oklch(43.8% 0.017 39.3); --color-taupe-700: oklch(36.7% 0.016 35.7); --color-taupe-800: oklch(26.8% 0.011 36.5); --color-taupe-900: oklch(21.4% 0.009 43.1); --color-taupe-950: oklch(14.7% 0.004 49.3); --color-black: #000; --color-white: #fff; --spacing: 0.25rem; --breakpoint-sm: 40rem; --breakpoint-md: 48rem; --breakpoint-lg: 64rem; --breakpoint-xl: 80rem; --breakpoint-2xl: 96rem; --container-3xs: 16rem; --container-2xs: 18rem; --container-xs: 20rem; --container-sm: 24rem; --container-md: 28rem; --container-lg: 32rem; --container-xl: 36rem; --container-2xl: 42rem; --container-3xl: 48rem; --container-4xl: 56rem; --container-5xl: 64rem; --container-6xl: 72rem; --container-7xl: 80rem; --text-xs: 0.75rem; --text-xs--line-height: calc(1 / 0.75); --text-sm: 0.875rem; --text-sm--line-height: calc(1.25 / 0.875); --text-base: 1rem; --text-base--line-height: calc(1.5 / 1); --text-lg: 1.125rem; --text-lg--line-height: calc(1.75 / 1.125); --text-xl: 1.25rem; --text-xl--line-height: calc(1.75 / 1.25); --text-2xl: 1.5rem; --text-2xl--line-height: calc(2 / 1.5); --text-3xl: 1.875rem; --text-3xl--line-height: calc(2.25 / 1.875); --text-4xl: 2.25rem; --text-4xl--line-height: calc(2.5 / 2.25); --text-5xl: 3rem; --text-5xl--line-height: 1; --text-6xl: 3.75rem; --text-6xl--line-height: 1; --text-7xl: 4.5rem; --text-7xl--line-height: 1; --text-8xl: 6rem; --text-8xl--line-height: 1; --text-9xl: 8rem; --text-9xl--line-height: 1; --font-weight-thin: 100; --font-weight-extralight: 200; --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; --font-weight-black: 900; --tracking-tighter: -0.05em; --tracking-tight: -0.025em; --tracking-normal: 0em; --tracking-wide: 0.025em; --tracking-wider: 0.05em; --tracking-widest: 0.1em; --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; --leading-loose: 2; --radius-xs: 0.125rem; --radius-sm: 0.25rem; --radius-md: 0.375rem; --radius-lg: 0.5rem; --radius-xl: 0.75rem; --radius-2xl: 1rem; --radius-3xl: 1.5rem; --radius-4xl: 2rem; --shadow-2xs: 0 1px rgb(0 0 0 / 0.05); --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25); --inset-shadow-2xs: inset 0 1px rgb(0 0 0 / 0.05); --inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / 0.05); --inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / 0.05); --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / 0.05); --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.15); --drop-shadow-md: 0 3px 3px rgb(0 0 0 / 0.12); --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / 0.15); --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 0.1); --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15); --text-shadow-2xs: 0px 1px 0px rgb(0 0 0 / 0.15); --text-shadow-xs: 0px 1px 1px rgb(0 0 0 / 0.2); --text-shadow-sm: 0px 1px 0px rgb(0 0 0 / 0.075), 0px 1px 1px rgb(0 0 0 / 0.075), 0px 2px 2px rgb(0 0 0 / 0.075); --text-shadow-md: 0px 1px 1px rgb(0 0 0 / 0.1), 0px 1px 2px rgb(0 0 0 / 0.1), 0px 2px 4px rgb(0 0 0 / 0.1); --text-shadow-lg: 0px 1px 2px rgb(0 0 0 / 0.1), 0px 3px 2px rgb(0 0 0 / 0.1), 0px 4px 8px rgb(0 0 0 / 0.1); --blur-xs: 4px; --blur-sm: 8px; --blur-md: 12px; --blur-lg: 16px; --blur-xl: 24px; --blur-2xl: 40px; --blur-3xl: 64px; --perspective-dramatic: 100px; --perspective-near: 300px; --perspective-normal: 500px; --perspective-midrange: 800px; --perspective-distant: 1200px; --aspect-video: 16 / 9; --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --animate-spin: spin 1s linear infinite; --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; --animate-bounce: bounce 1s infinite; @keyframes spin { to { transform: rotate(360deg); } } @keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } } @keyframes pulse { 50% { opacity: 0.5; } } @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); } }}