排版
用于控制文本转换的工具。
¥Basic usage
¥Transforming text
uppercase
和 lowercase
分别将大写和小写文本,而 capitalize
工具将文本转换为标题大写。normal-case
工具可用于保留原始大小写 - 通常用于在不同断点处重置大写。
¥The uppercase
and lowercase
will uppercase and lowercase text respectively, whereas capitalize
utility will convert text to title-case. The normal-case
utility can be used to preserve the original casing — typically to reset capitalization at different breakpoints.
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="normal-case ...">The quick brown fox ...</p>
<p class="uppercase ...">The quick brown fox ...</p>
<p class="lowercase ...">The quick brown fox ...</p>
<p class="capitalize ...">The quick brown fox ...</p>
Tailwind 允许你使用变体修饰符在不同状态下有条件地应用工具类。例如,使用hover:uppercase
仅在 hover 时应用 uppercase
工具。
<p class="capitalize hover:uppercase">
<!-- ... -->
</p>
有关所有可用状态修饰符的完整列表,请查看悬停、聚焦、以及其他状态 文档。
你还可以使用变体修饰符来定位媒体查询,例如响应式断点、暗黑模式、首选减少运动等。例如,使用 md:uppercase
仅在中等屏幕尺寸及以上时应用 uppercase
工具。
<p class="capitalize md:uppercase">
<!-- ... -->
</p>