核心概念
Tailwind 向您的 CSS 公开的自定义函数和指令的参考。
指令是自定义的 Tailwind 特有 at-rules,您可以在 CSS 中使用它们,为 Tailwind CSS 项目提供特殊功能。
使用 @import
指令内联导入 CSS 文件,包括 Tailwind 本身
@import "tailwindcss";
使用 @theme
指令定义您的项目的自定义设计令牌,例如字体、颜色和断点
@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 主题变量。