DocsBlogShowcasePlus
  1. Conceptos básicos
  2. Variables de tema

Conceptos básicos

Variables de tema

Usando clases de utilidad como una API para tus tokens de diseño.

Resumen

Tailwind es un framework para construir diseños personalizados, y diferentes diseños necesitan diferente tipografía, colores, sombras, breakpoints y más.

Estas decisiones de diseño de bajo nivel a menudo se llaman tokens de diseño, y en proyectos de Tailwind guardas esos valores en variables de tema.

¿Qué son las variables de tema?

Las variables de tema son variables CSS especiales definidas usando la directiva @theme que influyen en qué clases de utilidad existen en tu proyecto.

Por ejemplo, puedes agregar un nuevo color a tu proyecto definiendo una variable de tema como --color-mint-500:

app.css
@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:

HTML
<div class="bg-mint-500">
  <!-- ... -->
</div>

Tailwind también genera variables CSS regulares para tus variables de tema para que puedas referenciar tus tokens de diseño en valores arbitrarios o estilos inline:

HTML
<div style="background-color: var(--color-mint-500)">
  <!-- ... -->
</div>

Aprende más sobre cómo las variables de tema mapean a diferentes clases de utilidad en la documentación de namespaces de variables de tema.

¿Por qué @theme en lugar de :root?

Las variables de tema no son solo variables CSS — también instruyen a Tailwind para crear nuevas clases de utilidad que puedes usar en tu HTML.

Como hacen más que las variables CSS regulares, Tailwind usa una sintaxis especial para que definir variables de tema sea siempre explícito. Las variables de tema también deben definirse a nivel superior y no anidadas bajo otros selectores o media queries, y usar una sintaxis especial hace posible forzar eso.

Definir variables CSS regulares con :root aún puede ser útil en proyectos de Tailwind cuando quieres definir una variable que no está destinada a estar conectada a una clase de utilidad. Usa @theme cuando quieras que un token de diseño mapee directamente a una clase de utilidad, y usa :root para definir variables CSS regulares que no deberían tener clases de utilidad correspondientes.

Relación con las clases de utilidad

Algunas clases de utilidad en Tailwind como flex y object-cover son estáticas, y siempre son las mismas de proyecto a proyecto. Pero muchas otras son 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:

./node_modules/tailwindcss/theme.css
@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:

app.css
@import "tailwindcss";
@theme {
  --font-poppins: Poppins, sans-serif;
}
HTML
<h1 class="font-poppins">Este encabezado usará 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.

Relación con las variantes

Algunas variables de tema se usan para definir variantes en lugar de utilidades. Por ejemplo, las variables de tema en el namespace --breakpoint-* determinan qué variantes de breakpoint responsive existen en tu proyecto:

app.css
@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:

HTML
<div class="3xl:grid-cols-6 grid grid-cols-2 md:grid-cols-4">
  <!-- ... -->
</div>

Aprende más sobre cómo las variables de tema mapean a diferentes clases de utilidad y variantes en la documentación de namespaces de variables de tema.

Namespaces de variables de tema

Las variables de tema se definen en namespaces y cada namespace corresponde a una o más API 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:

NamespaceClases de utilidad
--color-*Utilidades de color como bg-red-500, text-sky-300, y muchas más
--font-*Utilidades de familia de fuentes como font-sans
--text-*Utilidades de tamaño de fuente como text-xl
--font-weight-*Utilidades de peso de fuente como font-bold
--tracking-*Utilidades de espaciado entre letras como tracking-wide
--leading-*Utilidades de altura de línea como leading-tight
--breakpoint-*Variantes de punto de interrupción responsive como sm:*
--container-*Variantes de consulta de contenedor 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
--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-*Utilidades 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.

Variables de tema predeterminadas

Cuando importas tailwindcss en la parte superior de tu archivo CSS, incluye un conjunto de variables de tema predeterminadas para que comiences.

Esto es lo que realmente estás importando cuando importas tailwindcss:

node_modules/tailwindcss/index.css
@layer theme, base, components, utilities;
@import "./theme.css" layer(theme);
@import "./preflight.css" layer(base);
@import "./utilities.css" layer(utilities);

Ese archivo theme.css incluye la paleta de colores predeterminada, la escala tipográfica, las sombras, las fuentes y más:

node_modules/tailwindcss/theme.css
@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);
  /* ... */
}

Es por eso que utilidades como bg-red-200, font-serif, y shadow-sm existen listas para usar — son impulsadas por el tema predeterminado, no codificadas en el framework como flex-col o pointer-events-none.

Para una lista de todas las variables de tema predeterminadas, consulta la referencia de variables de tema predeterminadas.

Personalizando tu tema

Las variables de tema predeterminadas son muy generales y adecuadas para construir diseños dramáticamente diferentes, pero aún así son solo un punto de partida. Es muy común personalizar cosas como la paleta de colores, las fuentes y las sombras para construir exactamente el diseño que tienes en mente.

Extendiendo el tema predeterminado

Usa @theme para definir nuevas variables de tema y extender el tema predeterminado:

app.css
@import "tailwindcss";
@theme {
  --font-script: Great Vibes, cursive;
}

Esto hace que una nueva clase de utilidad font-script esté disponible para que puedas usarla en tu HTML, al igual que las utilidades predeterminadas font-sans o font-mono:

HTML
<p class="font-script">Esto usará la familia de fuentes Great Vibes.</p>

Aprende más sobre cómo las variables de tema mapean a diferentes clases de utilidad y variantes en la documentación de namespaces de variables de tema.

Sobrescribiendo el tema predeterminado

Sobrescribe un valor de variable de tema predeterminado redefiniéndolo dentro de @theme:

app.css
@import "tailwindcss";
@theme {
  --breakpoint-sm: 30rem;
}

Ahora la variante sm:* se activará a 30rem en lugar del tamaño de viewport predeterminado de 40rem:

HTML
<div class="grid grid-cols-1 sm:grid-cols-3">
  <!-- ... -->
</div>

Para sobrescribir completamente un namespace entero en el tema predeterminado, establece el namespace completo a initial usando la sintaxis especial de asterisco:

app.css
@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) serán eliminadas, y solo tus valores personalizados (como bg-midnight) estarán disponibles.

Aprende más sobre cómo las variables de tema mapean a diferentes clases de utilidad y variantes en la documentación de namespaces de variables de tema.

Usando un tema personalizado

Para deshabilitar completamente el tema predeterminado y usar solo valores personalizados, establece el namespace global de variable de tema a initial:

app.css
@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 son 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.

Definiendo keyframes de animación

Define las reglas @keyframes para tus variables de tema --animate-* dentro de @theme para incluirlas en tu CSS generado:

app.css
@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 quieres que tus reglas @keyframes personalizadas siempre se incluyan incluso cuando no agregues una variable de tema --animate-*, defínelas fuera de @theme en su lugar.

Referenciando otras variables

Al definir variables de tema que referencian otras variables, usa la opción inline:

app.css
@import "tailwindcss";
@theme inline {
  --font-sans: var(--font-inter);
}

Usando la opción inline, la clase de utilidad usará el valor de la variable de tema en lugar de referenciar la variable de tema real:

dist.css
.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 podrías esperar:

HTML
<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 usará la fuente sans-serif, not Inter.
  </div>
</div>

Esto sucede porque var(--font-sans) se resuelve donde se define --font-sans (en #parent), y --font-inter no tiene valor allí ya que no se define hasta más adentro en el árbol (en #child).

Generando todas las variables CSS

Por defecto, solo las variables CSS usadas serán generadas en la salida CSS final. Si quieres generar siempre todas las variables CSS, puedes usar la opción de tema static:

app.css
@import "tailwindcss";
@theme static {
  --color-primary: var(--color-red-500);
  --color-secondary: var(--color-blue-500);
}

Compartiendo entre proyectos

Dado que las variables de tema se definen en CSS, compartirlas entre proyectos es solo cuestión de ponerlas en su propio archivo CSS que puedes importar en cada proyecto:

./packages/brand/theme.css
@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:

./packages/admin/app.css
@import "tailwindcss";
@import "../brand/theme.css";

Puedes poner variables de tema compartidas como esta en su propio paquete en configuraciones monorepo o incluso publicarlas en NPM e importarlas como cualquier otro archivo CSS de terceros.

Usando tus variables de tema

Todas tus variables de tema se convierten en variables CSS regulares cuando compilas tu CSS:

dist.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 la referencia a todos tus tokens de diseño en cualquiera de tus CSS personalizados o estilos inline.

Con CSS personalizado

Usa tus variables de tema para acceder a tus tokens de diseño cuando estés escribiendo CSS personalizado que necesite usar los mismos valores:

app.css
@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 estilizar HTML que no controlas, como contenido Markdown proveniente de una base de datos o API y renderizado a HTML.

Con valores arbitrarios

Usar variables de tema en valores arbitrarios puede ser útil, especialmente en combinación con la función calc().

HTML
<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 del valor --radius-xl en un elemento anidado con inset para asegurarnos de que tenga un border radius concéntrico.

Referenciando en JavaScript

La mayoría de las veces que necesitas referenciar tus variables de tema en JS puedes simplemente usar las variables CSS directamente, como cualquier otro valor CSS.

Por ejemplo, la popular biblioteca Motion para React te permite animar hacia y desde valores de variables CSS:

JSX
<motion.div animate={{ backgroundColor: "var(--color-blue-500)" }} />

Si necesitas acceso a un valor de variable CSS resuelto en JS, puedes usar getComputedStyle para obtener el valor de una variable de tema en la raíz del documento:

spaghetti.js
let styles = getComputedStyle(document.documentElement);
let shadow = styles.getPropertyValue("--shadow-xl");

Referencia de variables de tema predeterminadas

Como referencia, aquí tienes una lista completa de las variables de tema incluidas por defecto cuando importas Tailwind CSS en tu proyecto:

tailwindcss/theme.css
@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);
  --color-red-300: oklch(0.808 0.114 19.571);
  --color-red-400: oklch(0.704 0.191 22.216);
  --color-red-500: oklch(0.637 0.237 25.331);
  --color-red-600: oklch(0.577 0.245 27.325);
  --color-red-700: oklch(0.505 0.213 27.518);
  --color-red-800: oklch(0.444 0.177 26.899);
  --color-red-900: oklch(0.396 0.141 25.723);
  --color-red-950: oklch(0.258 0.092 26.042);
  --color-orange-50: oklch(0.98 0.016 73.684);
  --color-orange-100: oklch(0.954 0.038 75.164);
  --color-orange-200: oklch(0.901 0.076 70.697);
  --color-orange-300: oklch(0.837 0.128 66.29);
  --color-orange-400: oklch(0.75 0.183 55.934);
  --color-orange-500: oklch(0.705 0.213 47.604);
  --color-orange-600: oklch(0.646 0.222 41.116);
  --color-orange-700: oklch(0.553 0.195 38.402);
  --color-orange-800: oklch(0.47 0.157 37.304);
  --color-orange-900: oklch(0.408 0.123 38.172);
  --color-orange-950: oklch(0.266 0.079 36.259);
  --color-amber-50: oklch(0.987 0.022 95.277);
  --color-amber-100: oklch(0.962 0.059 95.617);
  --color-amber-200: oklch(0.924 0.12 95.746);
  --color-amber-300: oklch(0.879 0.169 91.605);
  --color-amber-400: oklch(0.828 0.189 84.429);
  --color-amber-500: oklch(0.769 0.188 70.08);
  --color-amber-600: oklch(0.666 0.179 58.318);
  --color-amber-700: oklch(0.555 0.163 48.998);
  --color-amber-800: oklch(0.473 0.137 46.201);
  --color-amber-900: oklch(0.414 0.112 45.904);
  --color-amber-950: oklch(0.279 0.077 45.635);
  --color-yellow-50: oklch(0.987 0.026 102.212);
  --color-yellow-100: oklch(0.973 0.071 103.193);
  --color-yellow-200: oklch(0.945 0.129 101.54);
  --color-yellow-300: oklch(0.905 0.182 98.111);
  --color-yellow-400: oklch(0.852 0.199 91.936);
  --color-yellow-500: oklch(0.795 0.184 86.047);
  --color-yellow-600: oklch(0.681 0.162 75.834);
  --color-yellow-700: oklch(0.554 0.135 66.442);
  --color-yellow-800: oklch(0.476 0.114 61.907);
  --color-yellow-900: oklch(0.421 0.095 57.708);
  --color-yellow-950: oklch(0.286 0.066 53.813);
  --color-lime-50: oklch(0.986 0.031 120.757);
  --color-lime-100: oklch(0.967 0.067 122.328);
  --color-lime-200: oklch(0.938 0.127 124.321);
  --color-lime-300: oklch(0.897 0.196 126.665);
  --color-lime-400: oklch(0.841 0.238 128.85);
  --color-lime-500: oklch(0.768 0.233 130.85);
  --color-lime-600: oklch(0.648 0.2 131.684);
  --color-lime-700: oklch(0.532 0.157 131.589);
  --color-lime-800: oklch(0.453 0.124 130.933);
  --color-lime-900: oklch(0.405 0.101 131.063);
  --color-lime-950: oklch(0.274 0.072 132.109);
  --color-green-50: oklch(0.982 0.018 155.826);
  --color-green-100: oklch(0.962 0.044 156.743);
  --color-green-200: oklch(0.925 0.084 155.995);
  --color-green-300: oklch(0.871 0.15 154.449);
  --color-green-400: oklch(0.792 0.209 151.711);
  --color-green-500: oklch(0.723 0.219 149.579);
  --color-green-600: oklch(0.627 0.194 149.214);
  --color-green-700: oklch(0.527 0.154 150.069);
  --color-green-800: oklch(0.448 0.119 151.328);
  --color-green-900: oklch(0.393 0.095 152.535);
  --color-green-950: oklch(0.266 0.065 152.934);
  --color-emerald-50: oklch(0.979 0.021 166.113);
  --color-emerald-100: oklch(0.95 0.052 163.051);
  --color-emerald-200: oklch(0.905 0.093 164.15);
  --color-emerald-300: oklch(0.845 0.143 164.978);
  --color-emerald-400: oklch(0.765 0.177 163.223);
  --color-emerald-500: oklch(0.696 0.17 162.48);
  --color-emerald-600: oklch(0.596 0.145 163.225);
  --color-emerald-700: oklch(0.508 0.118 165.612);
  --color-emerald-800: oklch(0.432 0.095 166.913);
  --color-emerald-900: oklch(0.378 0.077 168.94);
  --color-emerald-950: oklch(0.262 0.051 172.552);
  --color-teal-50: oklch(0.984 0.014 180.72);
  --color-teal-100: oklch(0.953 0.051 180.801);
  --color-teal-200: oklch(0.91 0.096 180.426);
  --color-teal-300: oklch(0.855 0.138 181.071);
  --color-teal-400: oklch(0.777 0.152 181.912);
  --color-teal-500: oklch(0.704 0.14 182.503);
  --color-teal-600: oklch(0.6 0.118 184.704);
  --color-teal-700: oklch(0.511 0.096 186.391);
  --color-teal-800: oklch(0.437 0.078 188.216);
  --color-teal-900: oklch(0.386 0.063 188.416);
  --color-teal-950: oklch(0.277 0.046 192.524);
  --color-cyan-50: oklch(0.984 0.019 200.873);
  --color-cyan-100: oklch(0.956 0.045 203.388);
  --color-cyan-200: oklch(0.917 0.08 205.041);
  --color-cyan-300: oklch(0.865 0.127 207.078);
  --color-cyan-400: oklch(0.789 0.154 211.53);
  --color-cyan-500: oklch(0.715 0.143 215.221);
  --color-cyan-600: oklch(0.609 0.126 221.723);
  --color-cyan-700: oklch(0.52 0.105 223.128);
  --color-cyan-800: oklch(0.45 0.085 224.283);
  --color-cyan-900: oklch(0.398 0.07 227.392);
  --color-cyan-950: oklch(0.302 0.056 229.695);
  --color-sky-50: oklch(0.977 0.013 236.62);
  --color-sky-100: oklch(0.951 0.026 236.824);
  --color-sky-200: oklch(0.901 0.058 230.902);
  --color-sky-300: oklch(0.828 0.111 230.318);
  --color-sky-400: oklch(0.746 0.16 232.661);
  --color-sky-500: oklch(0.685 0.169 237.323);
  --color-sky-600: oklch(0.588 0.158 241.966);
  --color-sky-700: oklch(0.5 0.134 242.749);
  --color-sky-800: oklch(0.443 0.11 240.79);
  --color-sky-900: oklch(0.391 0.09 240.876);
  --color-sky-950: oklch(0.293 0.066 243.157);
  --color-blue-50: oklch(0.97 0.014 254.604);
  --color-blue-100: oklch(0.932 0.032 255.585);
  --color-blue-200: oklch(0.882 0.059 254.128);
  --color-blue-300: oklch(0.809 0.105 251.813);
  --color-blue-400: oklch(0.707 0.165 254.624);
  --color-blue-500: oklch(0.623 0.214 259.815);
  --color-blue-600: oklch(0.546 0.245 262.881);
  --color-blue-700: oklch(0.488 0.243 264.376);
  --color-blue-800: oklch(0.424 0.199 265.638);
  --color-blue-900: oklch(0.379 0.146 265.522);
  --color-blue-950: oklch(0.282 0.091 267.935);
  --color-indigo-50: oklch(0.962 0.018 272.314);
  --color-indigo-100: oklch(0.93 0.034 272.788);
  --color-indigo-200: oklch(0.87 0.065 274.039);
  --color-indigo-300: oklch(0.785 0.115 274.713);
  --color-indigo-400: oklch(0.673 0.182 276.935);
  --color-indigo-500: oklch(0.585 0.233 277.117);
  --color-indigo-600: oklch(0.511 0.262 276.966);
  --color-indigo-700: oklch(0.457 0.24 277.023);
  --color-indigo-800: oklch(0.398 0.195 277.366);
  --color-indigo-900: oklch(0.359 0.144 278.697);
  --color-indigo-950: oklch(0.257 0.09 281.288);
  --color-violet-50: oklch(0.969 0.016 293.756);
  --color-violet-100: oklch(0.943 0.029 294.588);
  --color-violet-200: oklch(0.894 0.057 293.283);
  --color-violet-300: oklch(0.811 0.111 293.571);
  --color-violet-400: oklch(0.702 0.183 293.541);
  --color-violet-500: oklch(0.606 0.25 292.717);
  --color-violet-600: oklch(0.541 0.281 293.009);
  --color-violet-700: oklch(0.491 0.27 292.581);
  --color-violet-800: oklch(0.432 0.232 292.759);
  --color-violet-900: oklch(0.38 0.189 293.745);
  --color-violet-950: oklch(0.283 0.141 291.089);
  --color-purple-50: oklch(0.977 0.014 308.299);
  --color-purple-100: oklch(0.946 0.033 307.174);
  --color-purple-200: oklch(0.902 0.063 306.703);
  --color-purple-300: oklch(0.827 0.119 306.383);
  --color-purple-400: oklch(0.714 0.203 305.504);
  --color-purple-500: oklch(0.627 0.265 303.9);
  --color-purple-600: oklch(0.558 0.288 302.321);
  --color-purple-700: oklch(0.496 0.265 301.924);
  --color-purple-800: oklch(0.438 0.218 303.724);
  --color-purple-900: oklch(0.381 0.176 304.987);
  --color-purple-950: oklch(0.291 0.149 302.717);
  --color-fuchsia-50: oklch(0.977 0.017 320.058);
  --color-fuchsia-100: oklch(0.952 0.037 318.852);
  --color-fuchsia-200: oklch(0.903 0.076 319.62);
  --color-fuchsia-300: oklch(0.833 0.145 321.434);
  --color-fuchsia-400: oklch(0.74 0.238 322.16);
  --color-fuchsia-500: oklch(0.667 0.295 322.15);
  --color-fuchsia-600: oklch(0.591 0.293 322.896);
  --color-fuchsia-700: oklch(0.518 0.253 323.949);
  --color-fuchsia-800: oklch(0.452 0.211 324.591);
  --color-fuchsia-900: oklch(0.401 0.17 325.612);
  --color-fuchsia-950: oklch(0.293 0.136 325.661);
  --color-pink-50: oklch(0.971 0.014 343.198);
  --color-pink-100: oklch(0.948 0.028 342.258);
  --color-pink-200: oklch(0.899 0.061 343.231);
  --color-pink-300: oklch(0.823 0.12 346.018);
  --color-pink-400: oklch(0.718 0.202 349.761);
  --color-pink-500: oklch(0.656 0.241 354.308);
  --color-pink-600: oklch(0.592 0.249 0.584);
  --color-pink-700: oklch(0.525 0.223 3.958);
  --color-pink-800: oklch(0.459 0.187 3.815);
  --color-pink-900: oklch(0.408 0.153 2.432);
  --color-pink-950: oklch(0.284 0.109 3.907);
  --color-rose-50: oklch(0.969 0.015 12.422);
  --color-rose-100: oklch(0.941 0.03 12.58);
  --color-rose-200: oklch(0.892 0.058 10.001);
  --color-rose-300: oklch(0.81 0.117 11.638);
  --color-rose-400: oklch(0.712 0.194 13.428);
  --color-rose-500: oklch(0.645 0.246 16.439);
  --color-rose-600: oklch(0.586 0.253 17.585);
  --color-rose-700: oklch(0.514 0.222 16.935);
  --color-rose-800: oklch(0.455 0.188 13.697);
  --color-rose-900: oklch(0.41 0.159 10.272);
  --color-rose-950: oklch(0.271 0.105 12.094);
  --color-slate-50: oklch(0.984 0.003 247.858);
  --color-slate-100: oklch(0.968 0.007 247.896);
  --color-slate-200: oklch(0.929 0.013 255.508);
  --color-slate-300: oklch(0.869 0.022 252.894);
  --color-slate-400: oklch(0.704 0.04 256.788);
  --color-slate-500: oklch(0.554 0.046 257.417);
  --color-slate-600: oklch(0.446 0.043 257.281);
  --color-slate-700: oklch(0.372 0.044 257.287);
  --color-slate-800: oklch(0.279 0.041 260.031);
  --color-slate-900: oklch(0.208 0.042 265.755);
  --color-slate-950: oklch(0.129 0.042 264.695);
  --color-gray-50: oklch(0.985 0.002 247.839);
  --color-gray-100: oklch(0.967 0.003 264.542);
  --color-gray-200: oklch(0.928 0.006 264.531);
  --color-gray-300: oklch(0.872 0.01 258.338);
  --color-gray-400: oklch(0.707 0.022 261.325);
  --color-gray-500: oklch(0.551 0.027 264.364);
  --color-gray-600: oklch(0.446 0.03 256.802);
  --color-gray-700: oklch(0.373 0.034 259.733);
  --color-gray-800: oklch(0.278 0.033 256.848);
  --color-gray-900: oklch(0.21 0.034 264.665);
  --color-gray-950: oklch(0.13 0.028 261.692);
  --color-zinc-50: oklch(0.985 0 0);
  --color-zinc-100: oklch(0.967 0.001 286.375);
  --color-zinc-200: oklch(0.92 0.004 286.32);
  --color-zinc-300: oklch(0.871 0.006 286.286);
  --color-zinc-400: oklch(0.705 0.015 286.067);
  --color-zinc-500: oklch(0.552 0.016 285.938);
  --color-zinc-600: oklch(0.442 0.017 285.786);
  --color-zinc-700: oklch(0.37 0.013 285.805);
  --color-zinc-800: oklch(0.274 0.006 286.033);
  --color-zinc-900: oklch(0.21 0.006 285.885);
  --color-zinc-950: oklch(0.141 0.005 285.823);
  --color-neutral-50: oklch(0.985 0 0);
  --color-neutral-100: oklch(0.97 0 0);
  --color-neutral-200: oklch(0.922 0 0);
  --color-neutral-300: oklch(0.87 0 0);
  --color-neutral-400: oklch(0.708 0 0);
  --color-neutral-500: oklch(0.556 0 0);
  --color-neutral-600: oklch(0.439 0 0);
  --color-neutral-700: oklch(0.371 0 0);
  --color-neutral-800: oklch(0.269 0 0);
  --color-neutral-900: oklch(0.205 0 0);
  --color-neutral-950: oklch(0.145 0 0);
  --color-stone-50: oklch(0.985 0.001 106.423);
  --color-stone-100: oklch(0.97 0.001 106.424);
  --color-stone-200: oklch(0.923 0.003 48.717);
  --color-stone-300: oklch(0.869 0.005 56.366);
  --color-stone-400: oklch(0.709 0.01 56.259);
  --color-stone-500: oklch(0.553 0.013 58.071);
  --color-stone-600: oklch(0.444 0.011 73.639);
  --color-stone-700: oklch(0.374 0.01 67.558);
  --color-stone-800: oklch(0.268 0.007 34.298);
  --color-stone-900: oklch(0.216 0.006 56.043);
  --color-stone-950: oklch(0.147 0.004 49.25);
  --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);
  --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);
    }
  }
}

En esta página

Copyright © 2025 Tailwind Labs Inc.·Política de Marca Registrada