text-decoration-color

Examples （範例）

Basic example （基本範例）

Use utilities like decoration-sky-500 and decoration-pink-500 to change the text decoration color of an element （使用像 decoration-sky-500 和 decoration-pink-500 這樣的工具來更改元素的 文字裝飾 顏色）

<p>  I’m Derek, an astro-engineer based in Tattooine. I like to build X-Wings  at <a class="underline decoration-sky-500">My Company, Inc</a>. Outside  of work, I like to <a class="underline decoration-pink-500">watch pod-racing</a>  and have <a class="underline decoration-indigo-500">light-saber</a> fights.</p>

Changing the opacity （更改不透明度）

Use the color opacity modifier to control the text decoration color opacity of an element （使用顏色不透明度修飾符來控制元素文字裝飾顏色的不透明度）

<p>  I’m Derek, an astro-engineer based in Tattooine. I like to build X-Wings  at <a class="underline decoration-sky-500/30">My Company, Inc</a>. Outside  of work, I like to <a class="underline decoration-pink-500/30">watch pod-racing</a>  and have <a class="underline decoration-indigo-500/30">light-saber</a> fights.</p>

Using a custom value （使用自定義值）

Use the （使用） decoration （裝飾）-[<value>] syntax （語法） to set the （來設定）text decoration color （文字裝飾顏色）based on a completely custom value （基於完全自定義的值）

<p class="decoration-[#50d71e] ...">  <!-- ... --></p>

For CSS variables, you can also use the （對於 CSS 變數，您也可以使用） decoration （裝飾）-(<custom-property>) syntax （語法）

<p class="decoration-(--my-color) ...">  <!-- ... --></p>

This is just a shorthand for （這只是以下的簡寫） decoration （裝飾）-[var(<custom-property>)] that adds the var() function for you automatically. （它會自動為您新增 var() 函數。）

Applying on hover （套用於滑鼠懸停時）

Prefix （使用前綴）a （一個） text-decoration-color utility with a variant like （text-decoration-color 工具，並搭配像這樣的變體：） hover:* to only apply the utility in that state （hover:* 以僅在該狀態下套用該工具）

<p>The <a href="..." class="underline hover:decoration-pink-500 ...">quick brown fox</a> jumps over the lazy dog.</p>

Learn more about using variants in the variants documentation. （在 變體說明文件 中了解有關使用變體的更多資訊。）

響應式設計

Prefix （使用前綴）a （一個） text-decoration-color utility （text-decoration-color 工具） with a breakpoint variant like md: to only apply the utility at （使用像 md: 這樣的斷點變體，以僅在以下情況下套用該工具：）medium （中等） screen sizes and above （螢幕尺寸及以上）

<p class="underline decoration-sky-600 md:decoration-blue-400 ...">  <!-- ... --></p>

Learn more about using variants in the variants documentation. （在 變體說明文件 中了解有關使用變體的更多資訊。）

Customizing your theme （自定義您的主題）

Use the --color-* theme variables to customize the （使用 --color-* 主題變數來自定義）color utilities in your project （專案中的工具）

@theme {  --color-regal-blue: #243c5a; }

Now the （現在） decoration （裝飾）-regal-blue （帝王藍） utility can be used in your markup （工具可以在您的標記中使用）

<p class="decoration-regal-blue">  <!-- ... --></p>

Learn more about customizing your theme in the （在 主題說明文件 中了解有關自定義主題的更多資訊） theme documentation （主題說明文件）.