函数和指令

指令

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

@import

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

CSS

@import "tailwindcss";

@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，你需要导入你的主题变量、自定义工具类和自定义变体，以便在该上下文中使用那些值。

为此，请使用 @reference 指令来导入你的主要样式表，以便参考而不实际包含样式，避免在输出中重复任何 CSS：

Vue

<template>  <h1>你好，世界！</h1></template><style>  @reference "../../app.css";  h1 {    @apply text-2xl font-bold text-red-500;  }</style>

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

Vue

<template>  <h1>你好，世界！</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";

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

@plugin

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

CSS

@plugin "@tailwindcss/typography";

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

theme()

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

CSS

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

此函数已被弃用，并建议使用 CSS 主题变量代替。

目录