# Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/functions-and-directives.mdx

import { CodeExampleStack } from "@/components/code-example";

export const title = "Functions and directives";
export const description = "A reference for the custom functions and directives Tailwind exposes to your CSS.";

## Directives

Directives are custom Tailwind-specific [at-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule) you can use in your CSS that offer special functionality for Tailwind CSS projects.

<h3 id="import-directive">
  <a href="#import-directive">@import</a>
</h3>

Use the `@import` directive to inline import CSS files, including Tailwind itself:

```css
/* [!code filename:CSS] */
@import "tailwindcss";
```

<h3 id="theme-directive">
  <a href="#theme-directive">@theme</a>
</h3>

Use the `@theme` directive to define your project's custom design tokens, like fonts, colors, and breakpoints:

```css
/* [!code filename:CSS] */
@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);

  /* ... */
}
```

Learn more about customizing your theme in the [theme variables documentation](/docs/theme).

<h3 id="source-directive">
  <a href="#source-directive">@source</a>
</h3>

Use the `@source` directive to explicitly specify source files that aren't picked up by Tailwind's automatic content detection:

```css
/* [!code filename:CSS] */
@source "../node_modules/@my-company/ui-lib";
```

Learn more about automatic content detection in the [detecting classes in source files documentation](/docs/detecting-classes-in-source-files).

<h3 id="utility-directive">
  <a href="#utility-directive">@utility</a>
</h3>

Use the `@utility` directive to add custom utilities to your project that work with variants like `hover`, `focus` and `lg`:

```css
/* [!code filename:CSS] */
@utility tab-4 {
  tab-size: 4;
}
```

Learn more about registering custom utilities in the [adding custom utilities documentation](/docs/adding-custom-styles#adding-custom-utilities).

<h3 id="variant-directive">
  <a href="#variant-directive">@variant</a>
</h3>

Use the `@variant` directive to apply a Tailwind variant to styles in your CSS:

```css
/* [!code filename:CSS] */
.my-element {
  background: white;

  /* [!code highlight:4] */
  @variant dark {
    background: black;
  }
}
```

Learn more using variants in the [using variants documentation](/docs/adding-custom-styles#using-variants).

<h3 id="custom-variant-directive">
  <a href="#custom-variant-directive">@custom-variant</a>
</h3>

Use the `@custom-variant` directive to add a custom variant in your project:

```css
/* [!code filename:CSS] */
@custom-variant theme-midnight (&:where([data-theme="midnight"] *));
```

This lets you write utilities `theme-midnight:bg-black` and `theme-midnight:text-white`.

Learn more about adding custom variants in the [adding custom variants documentation](/docs/adding-custom-styles#adding-custom-variants).

<h3 id="apply-directive">
  <a href="#apply-directive">@apply</a>
</h3>

Use the `@apply` directive to inline any existing utility classes into your own custom CSS:

```css
/* [!code filename:CSS] */
.select2-dropdown {
  /* [!code highlight:2] */
  @apply rounded-b-lg shadow-md;
}

.select2-search {
  /* [!code highlight:2] */
  @apply rounded border border-gray-300;
}

.select2-results__group {
  /* [!code highlight:2] */
  @apply text-lg font-bold text-gray-900;
}
```

This is useful when you need to write custom CSS (like to override the styles in a third-party library) but still want to work with your design tokens and use the same syntax you’re used to using in your HTML.

<h3 id="reference-directive">
  <a href="#reference-directive">@reference</a>
</h3>

If you want to use `@apply` or `@variant` in the `<style>` block of a Vue or Svelte component, or within CSS modules, you will need to import your theme variables, custom utilities, and custom variants to make those values available in that context.

To do this without duplicating any CSS in your output, use the `@reference` directive to import your main stylesheet for reference without actually including the styles:

```html
<!-- [!code filename:Vue] -->
<template>
  <h1>Hello world!</h1>
</template>

<style>
  /* [!code highlight:2] */
  @reference "../../app.css";

  h1 {
    @apply text-2xl font-bold text-red-500;
  }
</style>
```

If you’re just using the default theme with no customizations (e.g. by using things like `@theme`, `@custom-variant`, `@plugin`, etc…), you can import `tailwindcss` directly:

```html
<!-- [!code filename:Vue] -->
<template>
  <h1>Hello world!</h1>
</template>

<style>
  /* [!code highlight:2] */
  @reference "tailwindcss";

  h1 {
    @apply text-2xl font-bold text-red-500;
  }
</style>
```

### Subpath Imports

When using the CLI, Vite, or PostCSS the directives `@import`, `@reference`, `@plugin`, and `@config` all support [subpath imports](https://nodejs.org/api/packages.html#subpath-imports) which work similarly to bundler and TypeScript path aliases:

```json
// [!code filename:package.json]
{
  // ...
  "imports": {
    /* [!code highlight:2] */
    "#app.css": "./src/css/app.css"
  }
}
```

```html
<!-- [!code filename:Vue] -->
<template>
  <h1>Hello world!</h1>
</template>

<style>
  /* [!code highlight:2] */
  @reference "#app.css";

  h1 {
    @apply text-2xl font-bold text-red-500;
  }
</style>
```

## Functions

Tailwind provides the following build-time functions to make working with colors and the spacing scale easier.

<h3 id="alpha-function">
  <a href="#alpha-function">--alpha()</a>
</h3>

Use the `--alpha()` function to adjust the opacity of a color:

<CodeExampleStack>

```css
/* [!code filename:Input CSS] */
.my-element {
  /* [!code highlight:2] */
  color: --alpha(var(--color-lime-300) / 50%);
}
```

```css
/* [!code filename:Compiled CSS] */
.my-element {
  color: color-mix(in oklab, var(--color-lime-300) 50%, transparent);
}
```

</CodeExampleStack>

<h3 id="spacing-function">
  <a href="#spacing-function">--spacing()</a>
</h3>

Use the `--spacing()` function to generate a spacing value based on your theme:

<CodeExampleStack>

```css
/* [!code filename:Input CSS] */
.my-element {
  /* [!code highlight:2] */
  margin: --spacing(4);
}
```

```css
/* [!code filename:Compiled CSS] */
.my-element {
  margin: calc(var(--spacing) * 4);
}
```

</CodeExampleStack>

This can also be useful in arbitrary values, especially in combination with `calc()`:

```html
<!-- [!code filename:HTML] -->
<!-- [!code classes:py-[calc(--spacing(4)-1px)]] -->
<div class="py-[calc(--spacing(4)-1px)]">
  <!-- ... -->
</div>
```

## Compatibility

The following directives and functions exist solely for compatibility with Tailwind CSS v3.x.

The `@config` and `@plugin` directives may be used in conjunction with `@theme`, `@utility`, and other CSS-driven features. This can be used to incrementally move over your theme, custom configuration, utilities, variants, and presets to CSS. Things defined in CSS will be merged where possible and otherwise take precedence over those defined in configs, presets, and plugins.

<h3 id="config-directive">
  <a href="#config-directive">@config</a>
</h3>

Use the `@config` directive to load a legacy JavaScript-based configuration file:

```css
/* [!code filename:CSS] */
@config "../../tailwind.config.js";
```

The `corePlugins`, `safelist`, and `separator` options from the JavaScript-based config are not supported in v4.0. To safelist utilities in v4 use [`@source inline()`](/docs/detecting-classes-in-source-files#safelisting-specific-utilities).

<h3 id="plugin-directive">
  <a href="#plugin-directive">@plugin</a>
</h3>

Use the `@plugin` directive to load a legacy JavaScript-based plugin:

```css
/* [!code filename:CSS] */
@plugin "@tailwindcss/typography";
```

The `@plugin` directive accepts either a package name or a local path.

<h3 id="theme-function">
  <a href="#theme-function">theme()</a>
</h3>

Use the `theme()` function to access your Tailwind theme values using dot notation:

```css
/* [!code filename:CSS] */
.my-element {
  /* [!code highlight:2] */
  margin: theme(spacing.12);
}
```

This function is deprecated, and we recommend [using CSS theme variables](/docs/theme#using-your-theme-variables) instead.