Functions and Directives

Tailwind 5,202 's directives are at-rules its compiler removes: @import (inlines files, including Tailwind), @theme (tokens), @source (scanning), @utility, @custom-variant, @variant and @apply (Adding Custom Styles). @reference "../app.css" exposes your theme and utilities to @apply in Vue 5,482 or Svelte 36,701 <style> blocks and CSS modules without duplicating output. Build-time functions keep custom CSS on the design system: --alpha(var(--color-lime-300) / 50%) becomes color-mix(in oklab, var(--color-lime-300) 50%, transparent), and --spacing(4) becomes calc(var(--spacing) * 4), also inside arbitrary values like py-[calc(--spacing(4)-1px)]. For v3 migrations, @config loads a JavaScript config and @plugin a JavaScript plugin (Plugins and Ecosystem), while the old theme(spacing.12) function still works but is deprecated in favor of theme variables and --spacing(12).