Funciones y directivas

Directivas

Las directivas son reglas-at (@-rules) personalizadas específicas de Tailwind que puedes usar en tu CSS y que ofrecen una funcionalidad especial para los proyectos de Tailwind CSS.

@import

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

@import "tailwindcss";

@theme

Utiliza la directiva @theme para definir los tokens de diseño personalizados de tu proyecto, como fuentes, colores y puntos de ruptura (breakpoints):

@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);  /* ... */}

Obtén más información sobre cómo personalizar tu tema en la documentación de variables de tema.

@source

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

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

Obtén más información sobre la detección automática de contenido en la documentación de detección de clases en archivos de origen.

@utility

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

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

Obtén más información sobre cómo registrar utilidades personalizadas en la documentación para agregar 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;  }}

Obtén más información sobre el uso de variantes en la documentación sobre el 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.

Obtén más información sobre cómo agregar variantes personalizadas en la documentación para agregar variantes personalizadas.

@apply

Utiliza la directiva @apply para incluir en línea 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 de una biblioteca de terceros) pero aún deseas trabajar con tus tokens de diseño y usar la misma sintaxis a la que estás acostumbrado a usar en tu HTML.

@reference

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

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

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

Si solo estás utilizando el tema predeterminado sin personalizaciones (por ejemplo, al usar cosas como @theme, @custom-variant, @plugin, etc…), puedes importar tailwindcss directamente:

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

Importaciones de subrutas (Subpath Imports)

Al usar la CLI, Vite o PostCSS, las directivas @import, @reference, @plugin y @config admiten importaciones de subrutas (subpath imports) que funcionan de manera similar a los alias de ruta del empaquetador y TypeScript:

{  // ...  "imports": {    "#app.css": "./src/css/app.css"  }}

<template>  <h1>Hello world!</h1></template><style>  @reference "#app.css";  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 los 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 la compatibilidad con Tailwind CSS v3.x.

Las directivas @config y @plugin se pueden usar en conjunto con @theme, @utility y otras características impulsadas por CSS. Esto se puede utilizar para migrar gradualmente tu tema, configuración personalizada, utilidades, variantes y ajustes preestablecidos (presets) a CSS. Las cosas definidas en CSS se fusionarán siempre que sea posible y, de lo contrario, tendrán prioridad sobre aquellas definidas en configuraciones, preajustes y complementos (plugins).

@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 la versión v4.0. Para incluir utilidades en la lista segura (safelist) en la v4, utiliza @source inline().

@plugin

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

@plugin "@tailwindcss/typography";

La directiva @plugin acepta tanto un nombre de paquete como una ruta de acceso local.

theme()

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

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

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