核心概念
Tailwind 向 CSS 提供的自定义函数和指令参考文档。
指令是 Tailwind 特有的自定义 @规则，可以在 CSS 中使用，为 Tailwind CSS 项目提供特殊功能。
使用 @import 指令内联导入 CSS 文件，包括 Tailwind 本身：
@import "tailwindcss";使用 @theme 指令定义项目的自定义设计标记（design tokens），如字体、颜色和断点：
@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); /* ... */}了解更多关于主题定制的信息，请参阅主题变量文档。
使用 @source 指令显式指定未被 Tailwind 自动内容检测捕获的源文件：
@source "../node_modules/@my-company/ui-lib";了解更多关于自动内容检测的信息，请参阅在源文件中检测类名文档。
使用 @utility 指令向项目添加自定义工具类，这些工具类可以与 hover、focus 和 lg 等变体一起使用：
@utility tab-4 { tab-size: 4;}了解更多关于注册自定义工具类的信息，请参阅添加自定义工具类文档。
使用 @variant 指令将 Tailwind 变体应用到 CSS 中的样式：
.my-element { background: white; @variant dark { background: black; }}了解更多关于使用变体的信息，请参阅使用变体文档。
使用 @custom-variant 指令在项目中添加自定义变体：
@custom-variant theme-midnight (&:where([data-theme="midnight"] *));这允许你编写 theme-midnight:bg-black 和 theme-midnight:text-white 这样的工具类。
了解更多关于添加自定义变体的信息，请参阅添加自定义变体文档。
使用 @apply 指令将任何现有的工具类内联到你的自定义 CSS 中：
.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;}这在需要编写自定义 CSS（例如覆盖第三方库的样式）但仍希望使用设计标记和熟悉的 HTML 语法时非常有用。
如果要在 Vue 或 Svelte 组件的 <style> 块中，或在 CSS 模块中使用 @apply 或 @variant，需要导入主题变量、自定义工具类和自定义变体以使这些值在该上下文中可用。
为了避免在输出中重复任何 CSS，可以使用 @reference 指令导入主样式表进行引用而不实际包含样式：
<template> <h1>Hello world!</h1></template><style> @reference "../../app.css"; h1 { @apply text-2xl font-bold text-red-500; }</style>如果只使用默认主题且没有自定义，可以直接导入 tailwindcss：
<template> <h1>Hello world!</h1></template><style> @reference "tailwindcss"; h1 { @apply text-2xl font-bold text-red-500; }</style>Tailwind 提供了以下构建时函数，使处理颜色和间距比例更加便捷。
使用 --alpha() 函数调整颜色的不透明度：
.my-element { color: --alpha(var(--color-lime-300) / 50%);}.my-element { color: color-mix(in oklab, var(--color-lime-300) 50%, transparent);}使用 --spacing() 函数根据主题生成间距值：
.my-element { margin: --spacing(4);}.my-element { margin: calc(var(--spacing) * 4);}这在任意值中特别有用，尤其是与 calc() 结合使用时：
<div class="py-[calc(--spacing(4)-1px)]"> <!-- ... --></div>以下指令和函数仅用于保持与 Tailwind CSS v3.x 版本的兼容性。
使用 @config 指令来加载旧版的基于 JavaScript 的配置文件：
@config "../../tailwind.config.js";在 v4.0 中不支持来自 JavaScript 配置的 corePlugins、safelist 和 separator 选项。
使用 @plugin 指令来加载旧版的基于 JavaScript 的插件：
@plugin "@tailwindcss/typography";@plugin 指令可以接受包名或本地路径作为参数。
使用 theme() 函数通过点表示法访问你的 Tailwind 主题值：
.my-element { margin: theme(spacing.12);}该函数已被弃用，我们建议改为使用 CSS 主题变量。