Tailwind CSS 排版

Tailwind CSS 提供了一系列强大的排版工具类，可以帮助你快速实现文本的对齐、字体样式、行高、字间距、文本颜色、文本修饰等功能。通过这些工具类，你可以在不写自定义 CSS 的情况下，轻松设计出符合需求的排版效果。

🎯 1. 文本对齐

在 Tailwind 中，你可以通过以下类来控制文本的对齐方式。

1.1 文本对齐类

  • text-left：文本左对齐
  • text-center：文本居中对齐
  • text-right：文本右对齐
  • text-justify：文本两端对齐

1.2 示例

<p class="text-left">这段文字左对齐</p>
<p class="text-center">这段文字居中对齐</p>
<p class="text-right">这段文字右对齐</p>
<p class="text-justify">这段文字两端对齐</p>

🎯 2. 字体大小

通过 Tailwind 的 text-{size} 类，可以快速设置不同的字体大小。

2.1 字体大小类

  • text-xs：超小字体
  • text-sm：小字体
  • text-base：默认字体大小
  • text-lg：大字体
  • text-xl：超大字体
  • text-2xl、text-3xl、text-4xl 等：依次增大的字体大小

2.2 示例

<p class="text-xs">这是超小字体</p>
<p class="text-sm">这是小字体</p>
<p class="text-base">这是默认字体</p>
<p class="text-lg">这是大字体</p>
<p class="text-xl">这是超大字体</p>

🎯 3. 行高（Line Height）

Tailwind 提供了 leading-{size} 类来控制行高。适当的行高能够提高文本的可读性。

3.1 行高类

  • leading-none：行高为 1（紧凑型行高）
  • leading-tight：紧凑的行高
  • leading-normal：正常行高
  • leading-relaxed：较宽松的行高
  • leading-loose：非常宽松的行高

3.2 示例

<p class="leading-none">行高为紧凑型。</p>
<p class="leading-tight">行高为紧凑的行高。</p>
<p class="leading-normal">正常的行高。</p>
<p class="leading-relaxed">行高较宽松。</p>
<p class="leading-loose">行高非常宽松。</p>

🎯 4. 字体粗细

通过 font-{weight} 类，你可以设置文本的粗细。不同的字体粗细能够增强文本的层次感和可读性。

4.1 字体粗细类

  • font-thin：最轻的字体粗细
  • font-extralight：比 font-thin 稍重
  • font-light：轻字体
  • font-normal：正常字体（默认）
  • font-medium：中等粗细
  • font-semibold：较粗字体
  • font-bold：加粗字体
  • font-extrabold：比 font-bold 更粗
  • font-black：最粗字体

4.2 示例

<p class="font-thin">这段文字非常轻</p>
<p class="font-normal">这段文字正常粗细</p>
<p class="font-bold">这段文字加粗</p>
<p class="font-black">这段文字最粗</p>

🎯 5. 字体家族

Tailwind CSS 提供了多个内置的字体家族类，你可以方便地设置字体的样式。

5.1 字体家族类

  • font-sans：无衬线字体（例如 Helvetica, Arial）
  • font-serif：衬线字体（例如 Times New Roman）
  • font-mono：等宽字体（例如 Courier New）

5.2 示例

<p class="font-sans">这段文字使用无衬线字体</p>
<p class="font-serif">这段文字使用衬线字体</p>
<p class="font-mono">这段文字使用等宽字体</p>

🎯 6. 字间距（Letter Spacing）

Tailwind 提供了 tracking-{size} 类来控制文本的字间距。

6.1 字间距类

  • tracking-tighter：紧密字间距
  • tracking-tight：较紧字间距
  • tracking-normal：正常字间距
  • tracking-wide：宽字间距
  • tracking-wider：更宽字间距
  • tracking-wide：非常宽字间距

6.2 示例

<p class="tracking-tighter">字间距更紧凑</p>
<p class="tracking-normal">字间距正常</p>
<p class="tracking-wider">字间距更宽</p>

🎯 7. 文本颜色

Tailwind 提供了 text-{color} 类来设置文本的颜色。

7.1 文本颜色类

  • text-{color}：设置文本颜色，例如 text-red-500、text-blue-600 等。
  • text-transparent：文本颜色为透明。
  • text-current：使用当前文本颜色。

7.2 示例

<p class="text-red-500">这段文字是红色</p>
<p class="text-blue-600">这段文字是蓝色</p>
<p class="text-green-400">这段文字是绿色</p>

🎯 8. 文本修饰

Tailwind 还提供了控制文本修饰的类，如 文本装饰、文本转换、文本缩进 等。

8.1 文本装饰

  • underline：文本下划线
  • line-through：文本删除线
  • no-underline：取消下划线

8.2 文本转换

  • uppercase：将文本转换为大写
  • lowercase：将文本转换为小写
  • capitalize：将文本的每个单词首字母大写

8.3 文本缩进

  • indent-{size}：设置文本的缩进，例如 indent-4、indent-8 等。

8.4 示例

<p class="underline">这段文字有下划线</p>
<p class="line-through">这段文字有删除线</p>
<p class="uppercase">这段文字变为大写</p>
<p class="capitalize">这段文字每个单词首字母大写</p>
<p class="indent-4">这段文字有 1rem 的缩进</p>

🎯 9. 多行文本省略（Text Ellipsis）

如果文本内容过长，可以使用 truncate 类来添加文本省略号。

9.1 文本省略类

  • truncate：使文本超出部分显示为省略号（...）。

9.2 示例

<p class="truncate w-48">这是一个很长的文本，但是它会被截断显示为省略号。</p>
  • w-48：设置宽度为 12rem，以触发文本截断效果。

🎯 10. 响应式排版

Tailwind 支持响应式排版，可以根据不同的屏幕尺寸，调整字体、行高、对齐方式等。

10.1 示例：响应式字体大小

<p class="text-sm md:text-base lg:text-lg">
  在小屏幕下是小字体，中屏幕下是标准字体，大屏幕下是大字体。
</p>
  • text-sm：在小屏幕下字体为小。
  • md:text-base：在中屏幕及以上，字体为标准。
  • lg:text-lg：在大屏幕及以上，字体为大。

🎯 总结

类别类名描述
文本对齐text-left, text-center, text-right, text-justify控制文本对齐方式
字体大小text-xs, text-sm, text-base, text-lg, text-xl设置字体大小
行高leading-none, leading-tight, leading-normal设置行高
字体粗细font-thin, font-normal, font-bold, font-black设置字体粗细
字体家族font-sans, font-serif, font-mono设置字体家族
字间距tracking-tighter, tracking-wide, `tracking-normal

| 设置字间距 | | **文本颜色** |text-{color} | 设置文本颜色 | | **文本修饰** |underline, line-through, capitalize| 设置文本的修饰（下划线、删除线、大写等） | | **响应式排版** |text-sm, md:text-base` | 根据屏幕尺寸设置响应式字体大小等 |

通过这些类，你可以非常方便地控制文本的排版、样式和响应式设计。