函式與指令（Functions and directives）

指令（Directives）

指令是你可以在 CSS 中使用的自訂 Tailwind 特定 at-rules，為 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，你需要匯入你的主題變數、自訂通用類別和自訂變體，以便在該上下文中使用這些值。

若要在不重複輸出任何 CSS 的情況下執行此操作，請使用 @reference 指令匯入你的主樣式表以供參照，而不實際包含樣式：

Vue

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

如果你只是使用預設主題而沒有任何自訂設定（例如沒有使用 @theme、@custom-variant、@plugin 等），你可以直接匯入 tailwindcss：

Vue

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

子路徑匯入（Subpath Imports）

當使用 CLI、Vite 或 PostCSS 時，@import、@reference、@plugin 和 @config 指令都支援子路徑匯入，其運作方式類似於打包器和 TypeScript 路徑別名：

package.json

{  // ...  "imports": {    "#app.css": "./src/css/app.css"  }}

Vue

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

函式（Functions）

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>

相容性（Compatibility）

以下指令和函式僅為與 Tailwind CSS v3.x 相容而存在。

@config 和 @plugin 指令可以與 @theme、@utility 和其他 CSS 驅動功能一起使用。這可用於逐步將你的主題、自訂設定、通用類別、變體和預設值遷移到 CSS。在 CSS 中定義的內容將盡可能合併，否則會優先於在設定檔、預設值和插件中定義的內容。

@config

使用 @config 指令載入舊版基於 JavaScript 的設定檔：

CSS

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

v4.0 不支援基於 JavaScript 設定中的 corePlugins、safelist 和 separator 選項。若要在 v4 中使用安全清單通用類別，請使用 @source inline()。

@plugin

使用 @plugin 指令載入舊版基於 JavaScript 的插件：

CSS

@plugin "@tailwindcss/typography";

@plugin 指令接受套件名稱或本地路徑。

theme()

使用 theme() 函式以點號語法存取你的 Tailwind 主題值：

CSS

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

此函式已被棄用，我們建議改用使用 CSS 主題變數。

On this page