排版
用于控制文本装饰的工具。
¥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 lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:underline
to only apply the underline
utility on hover.
尝试将鼠标悬停在文本上以查看预期的行为
<a href="#" class="no-underline hover:underline ...">Link</a>
For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.
You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:underline
to apply the underline
utility at only medium screen sizes and above.
<p class="no-underline md:underline">
<!-- ... -->
</p>
To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.