Functions & Directives

Tailwind exposes custom directives (at-rules) and functions you can use in your CSS.

Directives

@import - inline import Tailwind itself:

css
@import "tailwindcss";

@theme - define design tokens (see the previous lesson).

@source - explicitly add source files not auto-detected:

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

@utility - add a custom utility that works with variants:

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

@variant - apply a variant to styles in your CSS:

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

@custom-variant - add a custom variant:

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

Now theme-midnight:bg-black works.

@apply - inline existing utilities into your own CSS:

css
.select2-dropdown {
  @apply rounded-b-lg shadow-md;
}

@reference - import your stylesheet for reference (Vue/Svelte style blocks) without duplicating CSS.

Functions

- alpha() - adjust color opacity:

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

- spacing() - generate a spacing value:

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

Compatibility (v3 → v4)

@config loads a legacy JS config, @plugin loads a legacy JS plugin, and theme() accesses theme values via dot notation. These exist only for v3 compatibility - prefer CSS variables.

TL;DR

• @import "tailwindcss" boots the framework.
• @theme, @utility, @variant, @custom-variant extend it.
• @apply inlines utilities into custom CSS.
• - alpha() and - spacing() are build-time functions.