Capítulo 6 de 29
This is the reference index for every custom at-rule ("directive") and build-time function Tailwind adds to CSS — @import/@theme/@source/@utility/@variant/@custom-variant/@apply/@reference plus the legacy-compat @config/@plugin, and the --alpha()/--spacing()/theme() functions.
@import "tailwindcss": inlines Tailwind (and any other CSS file) at build time — no separate preprocessor import step needed.@theme: defines custom design tokens (colors, fonts, breakpoints) as CSS custom properties (full mechanics in the Theme chapter).@source "<path>": registers extra files/directories for class detection beyond Tailwind's automatic scan (e.g. a node_modules UI package).@utility: registers a custom utility class that gets variant support (hover:, focus:, lg:) automatically.@variant: applies a built-in Tailwind variant inside hand-written CSS, e.g. @variant dark { background: black; } inside a rule.@custom-variant: defines a brand-new variant, e.g. @custom-variant theme-midnight (&:where([data-theme="midnight"] *));, enabling theme-midnight:bg-black.@apply: inlines existing utility classes into hand-written CSS (@apply rounded-b-lg shadow-md;) — useful for overriding third-party library styles while still using Tailwind's design tokens/syntax.@reference: imports a stylesheet for reference only (no output duplication) so @apply/@variant can resolve theme values inside a Vue/Svelte <style> block or a CSS Module, which are otherwise processed in isolation. If the project uses only the unmodified default theme, @reference "tailwindcss"; alone is enough — otherwise reference the actual project stylesheet (e.g. @reference "../../app.css";).@import, @reference, @plugin, and @config all support Node.js-style subpath imports ("imports": {"#app.css": "./src/css/app.css"} in package.json) when using the CLI, Vite, or PostCSS — works like a bundler/TS path alias.--alpha(): adjusts a color's opacity at build time, e.g. --alpha(var(--color-lime-300) / 50%) compiles to color-mix(in oklab, var(--color-lime-300) 50%, transparent).--spacing(): generates a value from the spacing scale, e.g. --spacing(4) compiles to calc(var(--spacing) * 4); combines with calc() inside arbitrary values (py-[calc(--spacing(4)-1px)]).@config (v3 compat): loads a legacy JS-based tailwind.config.js; can be combined with @theme/@utility to migrate incrementally (CSS-defined values are merged where possible and take precedence over the config file). corePlugins, safelist, and separator config options are not supported in v4 — use @source inline() for safelisting instead.@plugin (v3 compat): loads a legacy JS plugin by package name or local path, e.g. @plugin "@tailwindcss/typography";.theme() function (deprecated): dot-notation access to theme values, e.g. theme(spacing.12) — superseded by referencing the generated CSS variables directly (var(--spacing-12)).| Directive/Function | Purpose | Status |
|---|---|---|
@import | Inline CSS files, including Tailwind itself | Current |
@theme | Define design tokens | Current |
@source | Register extra scan paths | Current |
@utility | Register a custom utility | Current |
@variant | Apply a variant inside CSS | Current |
@custom-variant | Define a new variant | Current |
@apply | Inline utility classes into custom CSS | Current |
@reference | Import a stylesheet for theme access only, no output | Current |
--alpha() | Adjust a color's opacity | Current |
--spacing() | Compute a value from the spacing scale | Current |
@config | Load a legacy tailwind.config.js | v3 compatibility only |
@plugin | Load a legacy JS plugin | v3 compatibility only |
theme() | Dot-notation theme value access | Deprecated — use CSS variables |
@theme/@utility/@custom-variant/@variant, see Adding Custom Styles; for @source, see Detecting Classes in Source Files.@reference is specifically for scoped-CSS contexts (Vue/Svelte <style>, CSS Modules) that don't automatically see the project's @theme — without it, @apply/@variant in those files can't resolve custom tokens.@config/@plugin/theme() exist only to ease migration from Tailwind v3 — new projects should use @theme/@utility/CSS variables instead, and corePlugins/safelist/separator config options have no v4 equivalent via @config.@theme, @utility (including --value()/--modifier()), and @custom-variant.@theme tokens generate and how to reference them as CSS variables (the replacement for the deprecated theme() function).@reference is the same fix recommended there for CSS Modules and framework <style> blocks.