函数和指令

指令

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

@import

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

CSS

@import "tailwindcss";

@theme

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

CSS

@theme {  --font-display: "Satoshi", "sans-serif";  --breakpoint-3xl: 1920px;  --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 指令来在你的 CSS 中应用 Tailwind 变体：

CSS

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

如果你需要同时应用多个变体，使用嵌套：

CSS

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

在悬停、焦点和其他状态文档中了解更多关于变体的信息。

@custom-variant

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

CSS

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

这让你可以写像 pointer-coarse:size-48 和 theme-midnight:bg-slate-900 这样的工具类。

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

@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 输出中重复 CSS 变量，使用 @reference 指令而不是 @import 指令来导入你的主题：

HTML

<template>  <h1>Hello world!</h1></template><style>  @reference "../../my-theme.css";  h1 {    @apply text-2xl font-bold text-red-500;  }</style>

如果你只是使用默认主题，你可以直接导入 tailwindcss/theme：

HTML

<template>  <h1>Hello world!</h1></template><style>  @reference "tailwindcss/theme";  h1 {    @apply text-2xl font-bold text-red-500;  }</style>

函数

Tailwind 提供以下构建时函数，以使处理颜色和间距比例更容易。

--alpha()

使用 --alpha() 函数来生成一个应用了不透明度的颜色：

CSS

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

--spacing()

使用 --spacing() 函数来基于你的主题生成间距值：

CSS

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

兼容性

以下指令和函数仅用于与 Tailwind CSS v3.x 的兼容性。

@config

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

CSS

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

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

@plugin

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

CSS

@plugin "@tailwindcss/typography";

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

theme()

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

CSS

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

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

指令