核心概念
新增自訂樣式
在 Tailwind 專案中新增自訂樣式的最佳實踐。
在使用框架時，最大的挑戰通常是了解當您需要框架無法處理的功能時，應該怎麼做。
Tailwind 從一開始就被設計成可擴展和自訂，因此無論您要建構什麼，都不會覺得在與框架對抗。
本指南涵蓋了自訂設計符記、在必要時如何突破這些限制、新增您自己的自訂 CSS，以及使用外掛程式擴展框架等主題。
自訂您的主題
如果您想要變更顏色調色盤、間距比例、排版比例或中斷點等項目，請在 CSS 中使用 @theme 指令新增您的自訂項目
@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); /* ... */}在主題變數文件中了解更多關於自訂主題的資訊。
使用任意值
雖然您通常可以使用一組受限的設計符記來建構大部分精心設計的設計，但偶爾您需要突破這些限制才能使事情達到像素級完美。
當您發現自己真的需要類似 top: 117px 的東西才能將背景圖片放在正確的位置時，請使用 Tailwind 的方括號表示法來動態產生具有任何任意值的類別
<div class="top-[117px]"> <!-- ... --></div>這基本上就像內嵌樣式，主要好處是您可以將其與互動式修飾符（如 hover）和響應式修飾符（如 lg）組合使用
<div class="top-[117px] lg:top-[344px]"> <!-- ... --></div>這適用於框架中的所有內容，包括背景顏色、字體大小、偽元素內容等
<div class="bg-[#bada55] text-[22px] before:content-['Festivus']"> <!-- ... --></div>如果您正在將 CSS 變數作為任意值引用，則可以使用自訂屬性語法
<div class="fill-(--my-brand-color) ..."> <!-- ... --></div>這只是 fill-[var(--my-brand-color)] 的簡寫，會自動為您新增 var() 函式。
任意屬性
如果您需要使用 Tailwind 沒有現成可用的工具類別的 CSS 屬性，您也可以使用方括號表示法來編寫完全任意的 CSS
<div class="[mask-type:luminance]"> <!-- ... --></div>這真的就像內嵌樣式，但同樣具有可以使用修飾符的好處
<div class="[mask-type:luminance] hover:[mask-type:alpha]"> <!-- ... --></div>這對於 CSS 變數等項目也很有用，尤其是在它們需要在不同條件下變更時
<div class="[--scroll-offset:56px] lg:[--scroll-offset:44px]"> <!-- ... --></div>任意變體
任意變體就像任意值一樣，但用於即時修改選擇器，就像您可以使用內建的偽類變體，例如 hover:{utility} 或響應式變體，例如 md:{utility}，但直接在您的 HTML 中使用方括號表示法。
<ul role="list"> {#each items as item} <li class="lg:[&:nth-child(-n+3)]:hover:underline">{item}</li> {/each}</ul>請在任意變體文件中了解更多資訊。
處理空白
當任意值需要包含空格時，請改用底線 (_)，Tailwind 會在建置時自動將其轉換為空格。
<div class="grid grid-cols-[1fr_500px_2fr]"> <!-- ... --></div>在底線很常見但空格無效的情況下，Tailwind 會保留底線而不是將其轉換為空格，例如在 URL 中。
<div class="bg-[url('/what_a_rush.png')]"> <!-- ... --></div>在極少數情況下，您確實需要使用底線，但因為空格也有效而產生歧義時，請使用反斜線來跳脫底線，Tailwind 就不會將其轉換為空格。
<div class="before:content-['hello\_world']"> <!-- ... --></div>如果您正在使用類似 JSX 的東西，其中反斜線會從呈現的 HTML 中移除，請使用 String.raw()，這樣反斜線就不會被視為 JavaScript 的跳脫字元。
<div className={String.raw`before:content-['hello\_world']`}> <!-- ... --></div>解決歧義
Tailwind 中的許多工具都共享一個通用的命名空間，但會對應到不同的 CSS 屬性。例如，text-lg 和 text-black 都共享 text- 命名空間，但一個用於 font-size，另一個用於 color。
使用任意值時，Tailwind 通常可以根據您傳入的值自動處理這種歧義。
<!-- Will generate a font-size utility --><div class="text-[22px]">...</div><!-- Will generate a color utility --><div class="text-[#bada55]">...</div>但有時確實會產生歧義，例如在使用 CSS 變數時。
<div class="text-(--my-var)">...</div>在這些情況下，您可以在值之前添加 CSS 資料類型，來「提示」Tailwind 底層的類型。
<!-- Will generate a font-size utility --><div class="text-(length:--my-var)">...</div><!-- Will generate a color utility --><div class="text-(color:--my-var)">...</div>使用自訂 CSS
雖然 Tailwind 的設計旨在處理您大部分的樣式需求，但在您需要時，沒有任何東西可以阻止您直接撰寫純 CSS。
@import "tailwindcss/";.my-custom-style { /* ... */}添加基礎樣式
如果您只是想為頁面設定一些預設值（例如文字顏色、背景顏色或字體系列），最簡單的方法就是直接將一些類別添加到 html 或 body 元素。
<!doctype html><html lang="en" class="bg-gray-100 font-serif text-gray-900"> <!-- ... --></html>這可以讓您的基礎樣式決策與所有其他樣式一起保留在您的標記中，而不是將它們隱藏在單獨的檔案中。
如果您想為特定的 HTML 元素添加自己的預設基礎樣式，請使用 @layer 指令將這些樣式添加到 Tailwind 的 base 層。
@layer base { h1 { font-size: var(--text-2xl); } h2 { font-size: var(--text-xl); }}添加元件類別
對於您想要添加到專案中，但仍然可以使用工具類別覆寫的任何更複雜的類別，請使用 components 層。
傳統上，這些類別會是像是 card、btn、badge 之類的東西。
@layer components { .card { background-color: var(--color-white); border-radius: var(--rounded-lg); padding: var(--spacing-6); box-shadow: var(--shadow-xl); }}透過在 components 層中定義元件類別，您仍然可以在必要時使用工具類別來覆寫它們。
<!-- Will look like a card, but with square corners --><div class="card rounded-none"> <!-- ... --></div>使用 Tailwind 時，您可能不需要像您想像的那樣頻繁使用這些類型的類別。請閱讀我們的 管理重複 指南，了解我們的建議。
components 層也是放置您正在使用的任何第三方元件的自訂樣式的好地方。
@layer components { .select2-dropdown { /* ... */ }}添加自訂工具
簡單工具
除了使用 Tailwind 隨附的工具之外，您還可以添加自己的自訂工具。當您想要在專案中使用 Tailwind 沒有現成工具的 CSS 功能時，這會很有用。
請使用 @utility 指令將自訂工具添加到您的專案。
@utility content-auto { content-visibility: auto;}您現在可以在您的 HTML 中使用這個工具。
<div class="content-auto"> <!-- ... --></div>它也適用於 hover、focus 和 lg 等變體。
<div class="hover:content-auto"> <!-- ... --></div>自訂工具會與框架中的所有內建工具一起自動插入到 utilities 層。
複雜工具
如果您的自訂工具比單個類別名稱更複雜，請使用巢狀結構來定義工具。
@utility scrollbar-hidden { &::-webkit-scrollbar { display: none; }}函數式工具
除了使用 @utility 指令註冊簡單工具之外，您還可以註冊接受參數的函數式工具。
@utility tab-* { tab-size: --value(--tab-size-*);}特殊的 --value() 函數用於解析工具值。
比對主題值
使用 --value(--theme-key-*) 語法，針對一組主題鍵解析工具值。
@theme { --tab-size-2: 2; --tab-size-4: 4; --tab-size-github: 8;}@utility tab-* { tab-size: --value(--tab-size-*);}這會比對諸如 tab-1、tab-4 和 tab-github 之類的工具。
裸值
若要將值解析為裸值，請使用 --value({type}) 語法，其中 {type} 是您想要驗證裸值所屬的資料類型。
@utility tab-* { tab-size: --value(integer);}這會比對諸如 tab-1 和 tab-76 之類的工具。
任意值
若要支援任意值，請使用 --value([{type}]) 語法（請注意方括號）來告知 Tailwind 哪些類型作為任意值受支援。
@utility tab-* { tab-size: --value([integer]);}這會比對諸如 tab-[1] 和 tab-[76] 之類的工具。如果您想要支援任何資料類型，可以使用 --value([*])。
同時支援主題、裸值和任意值
--value() 函數的三種形式都可以在規則內用作多個宣告，任何無法解析的宣告都會在輸出中省略。
@theme { --tab-size-github: 8;}@utility tab-* { tab-size: --value([integer]); tab-size: --value(integer); tab-size: --value(--tab-size-*);}這使得在必要時可以在每個案例中以不同的方式處理值，例如將裸整數轉換為百分比。
@utility opacity-* { opacity: --value([percentage]); opacity: calc(--value(integer) * 1%); opacity: --value(--opacity-*);}--value() 函數也可以接受多個參數，如果您不需要在不同情況下以不同的方式處理回傳值，則會從左到右解析它們。
@theme { --tab-size-github: 8;}@utility tab-* { tab-size: --value(--tab-size-*, integer, [integer]);}@utility opacity-* { opacity: calc(--value(integer) * 1%); opacity: --value(--opacity-*, [percentage]);}負值
若要支援負值，請將單獨的正數和負數工具註冊到單獨的宣告中。
@utility inset-* { inset: calc(--var(--spacing) * --value([percentage], [length]));}@utility -inset-* { inset: calc(--var(--spacing) * --value([percentage], [length]) * -1);}修飾詞
修飾詞是使用 --modifier() 函數處理，其運作方式與 --value() 函數完全相同，但會對修飾詞（如果存在）進行操作。
@utility text-* { font-size: --value(--font-size-*, [length]); line-height: --modifier(--line-height-*, [length], [*]);}如果修飾詞不存在，任何取決於修飾詞的宣告就不會包含在輸出中。
分數
為了處理分數，我們依賴 CSS 的 ratio 資料類型。如果與 --value() 一起使用，這會向 Tailwind 發出訊號，將值和修飾詞視為單個值。
@utility aspect-* { aspect-ratio: --value(--aspect-ratio-*, ratio, [ratio]);}這會比對諸如 aspect-square、aspect-3/4 和 aspect-[7/9] 之類的工具。
添加自訂變體
請使用 @variant 指令，在自訂 CSS 中套用 Tailwind 變體。
.my-element { background: white; @variant dark { background: black; }}如果您需要同時套用多個變體，請使用巢狀結構。
@variant dark { @variant hover { background: black; }}