函式和指令

指令

指令是自定義的 Tailwind 特定 at-rules，你可以在 CSS 中使用，為 Tailwind CSS 專案提供特殊功能。

@import

使用 @import 指令來 inline 導入 CSS 檔案，包括 Tailwind 本身

CSS

@import "tailwindcss";

@theme

使用 @theme 指令來定義你專案的自定義設計符記 (design tokens)，例如字體、顏色和斷點

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";

在偵測原始碼中的 Class 文件中了解更多關於自動內容檢測的資訊。

@utility

使用 @utility 指令來添加自定義 utility 到你的專案，這些 utility 可以與 hover、focus 和 lg 等變體一起使用

CSS

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

在新增自定義樣式文件中了解更多關於註冊自定義 utility 的資訊。

@variant

使用 @variant 指令將 Tailwind 變體應用於 CSS 中的樣式

CSS

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

如果你需要同時應用多個變體，請使用巢狀結構

CSS

@variant dark {  @variant hover {    background: black;  }}

在Hover、Focus 和其他狀態文件中了解更多關於變體的資訊。

@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 這樣的 utility。

在新增自定義樣式文件中了解更多關於添加自定義變體的資訊。

@apply

使用 @apply 指令將任何現有的 utility class inline 到你自己的自定義 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 modules 中使用 @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);}

此函式已被棄用，我們建議改為參考主題變數。

指令