Lzh on GitHub

函数和指令

Tailwind 向你的 CSS 公开的自定义函数和指令的参考。

指令

指令是自定义的、Tailwind 特有的 @ 规则，你可以在你的 CSS 中使用它们，为 Tailwind CSS 项目提供特殊功能。

@import

使用 @import 指令内联导入 CSS 文件，包括 Tailwind 本身：

CSS
@import "../../../../../node_modules/.pnpm/tailwindcss@4.1.11/node_modules/tailwindcss/dist/lib.d.mts";

@theme

使用 @theme 指令定义你项目的自定义 设计令牌，例如字体、颜色和断点：

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);
  
  /* ... */
}

在 主题变量文档 中了解更多关于自定义主题的信息。

@source

使用 @source 指令显式指定 Tailwind 的自动内容检测未拾取的源文件：

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

在 检测源文件中的类名文档 中了解更多关于自动内容检测的信息。

@utility

使用 @utility 指令向你的项目添加自定义工具类，这些工具类可以与 hover、focus 和 lg: 等变体一起使用：

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

在 添加自定义工具类文档 中了解更多关于注册自定义工具类的信息。

@variant

使用 @variant 指令将 Tailwind 变体应用于你的 CSS 样式：

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

在 使用变体文档 中了解更多关于使用变体的信息。

@custom-variant

使用 @custom-variant 指令在你的项目中添加自定义变体：

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

这使你可以编写 theme-midnight:bg-black 和 theme-midnight:text-white 这样的工具类。

在 添加自定义变体文档 中了解更多关于添加自定义变体的信息。

@apply

使用 @apply 指令将任何现有的工具类内联到你自己的自定义 CSS 中：

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 中使用的相同语法时，这非常有用。

@reference

如果你想在 Vue 或 Svelte 组件的 <style> 块中，或者在 CSS 模块中使用 @apply 或 @variant，你需要导入你的主题变量、自定义工具类和自定义变体，以便在该上下文中可以使用这些值。

为了在你的输出中不重复任何 CSS 的情况下执行此操作，请使用 @reference 指令导入你的主样式表以供参考，而无需实际包含这些样式：

Vue
<template>
  <h1>Hello world!</h1>
</template>

<style>
  @reference "../../app.css";

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

如果你仅使用没有自定义的默认主题，则可以直接导入 tailwindcss：

Vue
<template>
  <h1>Hello world!</h1>
</template>

<style>
  @reference "tailwindcss";

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

函数

Tailwind 提供了以下构建时函数，以简化颜色和间距比例的使用。

--alpha()

使用 --alpha() 函数调整颜色的不透明度：

Input CSS
.my-element {
  color: --alpha(var(--color-lime-300) / 50%);
}
Compiled CSS
.my-element {
  color: color-mix(in oklab, var(--color-lime-300) 50%, transparent);
}

--spacing()

使用 --spacing() 函数根据你的主题生成间距值：

Input CSS
.my-element {
  margin: --spacing(4);
}
Compiled CSS
.my-element {
  margin: calc(var(--spacing) * 4);
}

这在任意值中也很有用，尤其是在与 calc() 结合使用时：

HTML
<div class="py-[calc(--spacing(4)-1px)]">
  <!-- ... -->
</div>

兼容性

以下指令和函数仅为了与 Tailwind CSS v3.x 兼容而存在。

@config

使用 @config 指令加载旧的基于 JavaScript 的配置文件：

CSS
@config "../../tailwind.config.js";

v4.0 不支持基于 JavaScript 的配置中的 corePlugins、safelist 和 separator 选项。

@plugin

使用 @plugin 指令加载旧的基于 JavaScript 的插件：

CSS
@plugin "@tailwindcss/typography";

@plugin 指令接受包名或本地路径。

theme()

使用 theme() 函数通过点表示法访问你的 Tailwind 主题值：

CSS
.my-element {
  margin: theme(spacing.12);
}

此函数已弃用，我们建议 改用 CSS 主题变量。