1. 排版
  2. 文本转换

Quick reference

属性
uppercasetext-transform: uppercase;
lowercasetext-transform: lowercase;
capitalizetext-transform: capitalize;
normal-casetext-transform: none;

基本用法

¥Basic usage

转换文本

¥Transforming text

uppercaselowercase 分别将大写和小写文本,而 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.

normal-case

The quick brown fox jumps over the lazy dog.

uppercase

The quick brown fox jumps over the lazy dog.

lowercase

The quick brown fox jumps over the lazy dog.

capitalize

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>

要了解更多信息,请查看有关 响应式设计暗黑模式、以及 其他媒体查询修饰符 的文档。