排版
用于控制文本装饰的工具。
¥Basic usage
¥Setting the text decoration
使用 underline
、no-underline
和 line-through
工具控制文本的修饰方式。
¥Control how text is decorated with the underline
, no-underline
, and line-through
utilities.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
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
仅在 hover 时应用 underline
工具。
尝试将鼠标悬停在文本上以查看预期的行为
<a href="#" class="no-underline hover:underline ...">Link</a>
有关所有可用状态修饰符的完整列表,请查看悬停、聚焦、以及其他状态 文档。
你还可以使用变体修饰符来定位媒体查询,例如响应式断点、暗黑模式、首选减少运动等。例如,使用 md:underline
仅在中等屏幕尺寸及以上时应用 underline
工具。
<p class="no-underline md:underline">
<!-- ... -->
</p>