Funciones y directivas

Directivas

Las directivas son reglas-at personalizadas específicas de Tailwind que puedes usar en tu CSS y que ofrecen funcionalidades especiales para proyectos de Tailwind CSS.

@import

Utiliza la directiva @import para importar archivos CSS en línea, incluyendo Tailwind mismo:

@import "tailwindcss";

@theme

Utiliza la directiva @theme para definir los tokens de diseño personalizados de tu proyecto, como fuentes, colores y puntos de interrupción:

@theme {
  --font-display: "Satoshi", "sans-serif";
  --breakpoint-3xl: 120rem;
  --color-avocado-100: oklch(0.99 0 0);
  --color-avocado-200: oklch(0.98 0.04 113.22);
  --color-avocado-300: oklch(0.94 0.11 115.03);
  --color-avocado-400: oklch(0.92 0.19 114.08);
  --color-avocado-500: oklch(0.84 0.18 117.33);
  --color-avocado-600: oklch(0.53 0.12 118.34);
  --ease-fluid: cubic-bezier(0.3, 0, 0, 1);
  --ease-snappy: cubic-bezier(0.2, 0, 0, 1);
  /* ... */
}

Aprende más sobre la personalización de tu tema en la documentación de variables de tema.

@source

Utiliza la directiva @source para especificar explícitamente archivos fuente que no son detectados por la detección automática de contenido de Tailwind:

@source "../node_modules/@my-company/ui-lib";

Aprende más sobre la detección automática de contenido en la documentación de detección de clases en archivos fuente.

@utility

Utiliza la directiva @utility para agregar utilidades personalizadas a tu proyecto que funcionan con variantes como hover, focus y lg:

@utility tab-4 {
  tab-size: 4;
}

Aprende más sobre el registro de utilidades personalizadas en la documentación de adición de utilidades personalizadas.

@variant

Utiliza la directiva @variant para aplicar una variante de Tailwind a los estilos en tu CSS:

.my-element {
  background: white;
  @variant dark {
    background: black;
  }
}

Aprende más sobre el uso de variantes en la documentación de uso de variantes.

@custom-variant

Utiliza la directiva @custom-variant para agregar una variante personalizada en tu proyecto:

@custom-variant theme-midnight (&:where([data-theme="midnight"] *));

Esto te permite escribir utilidades como theme-midnight:bg-black y theme-midnight:text-white.

Aprende más sobre la adición de variantes personalizadas en la documentación de adición de variantes personalizadas.

@apply

Utiliza la directiva @apply para insertar cualquier clase de utilidad existente en tu propio CSS personalizado:

.select2-dropdown {
  @apply rounded-b-lg shadow-md;
}
.select2-search {
  @apply rounded border border-gray-300;
}
.select2-results__group {
  @apply text-lg font-bold text-gray-900;
}

Esto es útil cuando necesitas escribir CSS personalizado (como para sobrescribir los estilos en una biblioteca de terceros) pero aún quieres trabajar con tus tokens de diseño y usar la misma sintaxis que estás acostumbrado a usar en tu HTML.

@reference

Si quieres usar @apply o @variant en el bloque <style> de un componente Vue o Svelte, o dentro de módulos CSS, necesitarás importar tus variables de tema, utilidades personalizadas y variantes personalizadas para hacer que esos valores estén disponibles en ese contexto.

Para hacer esto sin duplicar ningún CSS en tu salida, usa la directiva @reference para importar tu hoja de estilos principal como referencia sin incluir realmente los estilos:

<template>
  <h1>¡Hola mundo!</h1>
</template>
<style>
  @reference "../../app.css";
  h1 {
    @apply text-2xl font-bold text-red-500;
  }
</style>

Si solo estás usando el tema predeterminado sin personalizaciones, puedes importar tailwindcss directamente:

<template>
  <h1>¡Hola mundo!</h1>
</template>
<style>
  @reference "tailwindcss";
  h1 {
    @apply text-2xl font-bold text-red-500;
  }
</style>

Funciones

Tailwind proporciona las siguientes funciones en tiempo de compilación para facilitar el trabajo con colores y la escala de espaciado.

--alpha()

Utiliza la función --alpha() para ajustar la opacidad de un color:

.my-element {
  color: --alpha(var(--color-lime-300) / 50%);
}

.my-element {
  color: color-mix(in oklab, var(--color-lime-300) 50%, transparent);
}

--spacing()

Utiliza la función --spacing() para generar un valor de espaciado basado en tu tema:

.my-element {
  margin: --spacing(4);
}

.my-element {
  margin: calc(var(--spacing) * 4);
}

Esto también puede ser útil en valores arbitrarios, especialmente en combinación con calc():

<div class="py-[calc(--spacing(4)-1px)]">
  <!-- ... -->
</div>

Compatibilidad

Las siguientes directivas y funciones existen únicamente para compatibilidad con Tailwind CSS v3.x.

@config

Utiliza la directiva @config para cargar un archivo de configuración heredado basado en JavaScript:

@config "../../tailwind.config.js";

Las opciones corePlugins, safelist, y separator de la configuración basada en JavaScript no son compatibles en v4.0.

@plugin

Utiliza la directiva @plugin para cargar un plugin heredado basado en JavaScript:

@plugin "@tailwindcss/typography";

La directiva @plugin acepta ya sea un nombre de paquete o una ruta local.

theme()

Utiliza la función theme() para acceder a los valores de tu tema de Tailwind usando notación de puntos:

.my-element {
  margin: theme(spacing.12);
}

Esta función está obsoleta, y recomendamos usar variables de tema CSS en su lugar.