Tailwind CSS 主頁
  1. 排版
  2. 文字裝飾

快速參考

類別
屬性
underlinetext-decoration-line：underline；
overlinetext-decoration-line：overline；
line-throughtext-decoration-line：line-through；
no-underlinetext-decoration-line：none；

基本用法

設定文字裝飾

使用 underline、no-underline 和 line-through 工具控制文字裝飾方式。

underline

The quick brown fox jumps over the lazy dog.

overline

The quick brown fox jumps over the lazy dog.

line-through

The quick brown fox jumps over the lazy dog.

no-underline

The quick brown fox jumps over the lazy dog. 

<p class="underline ...">The quick brown fox ...</p>
<p class="overline ...">The quick brown fox ...</p>
<p class="line-through ...">The quick brown fox ...</p>
<p class="no-underline ...">The quick brown fox ...</p>

條件式套用

游標移入、焦點和其他狀態

Tailwind 讓你使用變體修改器在不同狀態中條件式套用工具程式類別。例如，使用 hover:underline 僅在游標移入時套用 underline 工具程式。

試試將游標移到文字上，看看預期的行為

沒有底線的連結 
<a href="#" class="no-underline hover:underline ...">Link</a>

如需所有可用狀態修改器的完整清單，請查看 游標移入、焦點和其他狀態 文件。

斷點和媒體查詢

你也可以使用變體修改器來鎖定媒體查詢，例如回應式斷點、暗色模式、偏好減少動畫等。例如，使用 md:underline 來僅在中型螢幕大小及以上套用 underline 工具程式。

<p class="no-underline md:underline">
  <!-- ... -->
</p>

如需瞭解更多資訊，請查看 回應式設計、 暗色模式 和 其他媒體查詢修改器 的文件。