Tailwind CSS - Text Transform
Tailwind CSS 文本转换 是一组预定义类，可简化更改 HTML 元素内文本大小写的过程。
Tailwind CSS Text Transform 文本转换类
以下是 Tailwind CSS Text Transform 文本转换类的列表，这些类的属性可通过转换文本样式来修改文本外观。
| 类 | CSS 属性 |
|---|---|
| uppercase | text-transform: uppercase; |
| lowercase | text-transform: lowercase; |
| capitalize | text-transform: capitalize; |
| normal-case | text-transform: none; |
Tailwind CSS 文本转换类的功能
- uppercase 此类将文本转换为全部大写字母。
- lowercase 此类将文本转换为全部小写字母。
- capitalize 此类将文本中每个单词的首字母大写。
- normal-case 此类使文本以其默认样式显示，包括小写字母和正确大写的首字母。
设置文本转换
以下是 Tailwind CSS 文本转换类的示例，展示了如何在各种情况下使用这些转换。
使用 Tailwind CSS 应用文本转换
此示例展示了 Tailwind CSS 文本转换类如何用于将不同的文本转换样式应用于 HTML 元素。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4">
<h1 class="text-3xl font-bold mb-6">
Tailwind CSS Text Transform
</h1>
<p class="underline">uppercase</p>
<p class="uppercase text-lg mb-4">
This text is transformed to uppercase.
</p>
<p class="underline">lowercase</p>
<p class="lowercase text-lg mb-4">
THIS TEXT IS TRANSFORMED TO LOWERCASE.
</p>
<p class="underline">capitalized</p>
<p class="capitalize text-lg mb-4">
this text will be capitalized.
</p>
<p class="underline">normal text</p>
<p class="normal-case text-lg mb-4">
tHis TExT will reVert tO its dEfault capItalIzatIon.
</p>
</body>
</html>
悬停时有条件地进行文本转换
此示例展示了如何使用 Tailwind CSS 文本转换实用程序类，根据悬停状态有条件地应用文本转换样式。例如，"hover:uppercase"会在悬停时将文本转换为大写。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4">
<h2 class="text-2xl font-bold mb-6">
Tailwind CSS Text Transform
</h2>
<h2 class="font-bold text-lg">
Hover Over The Text to See Transformations.
</h2>
<p class="lowercase text-lg hover:uppercase mb-4">
Hover to see it transform to uppercase.
</p>
<p class="uppercase text-lg hover:lowercase mb-4">
Hover to see it transform to lowercase.
</p>
<p class="lowercase text-lg hover:capitalize mb-4">
hover to see it transform to Capitalize.
</p>
<p class="normal-case text-lg hover:uppercase mb-4">
Text remains in normal case,
but transforms to uppercase on hover.
</p>
</body>
</html>
