Tailwind CSS - 排版
Tailwind CSS 排版 涵盖了广泛的预定义类，可帮助您直接在网页上设置文本样式。它包含字体选择、文本大小、行距等选项。
Tailwind CSS 排版参考
以下主题可以帮助您为元素创建有效的排版。
| 主题 | 描述 | 示例 |
|---|---|---|
| Tailwind CSS - 字体系列 | 字体系列用于定义网页上字符的样式和外观页面。 |
|
| Tailwind CSS - 字体大小 | 字体大小控制网页上文本的大小显示。 |
|
| Tailwind CSS - 字体平滑 | 字体平滑使网页上的文本看起来更流畅，更易于阅读。 |
|
| Tailwind CSS - 字体样式 | 字体样式通过调整文本的外观来改变文本的外观。 |
|
| Tailwind CSS - 字体粗细 | 字体粗细控制着网页上文本的粗细程度。 |
|
| Tailwind CSS - 字体变体(数字) | 字体变体使用 Tailwind CSS，数字可更改文本中数字字符的显示方式。 |
|
| Tailwind CSS - 字母间距 | 使用 Tailwind CSS，字母间距可控制文本中字符之间的距离。 |
|
| Tailwind CSS - 行距 | 在 Tailwind 中，行距功能可将文本限制为固定行数CSS。 |
|
| Tailwind CSS - 行高 | 使用 Tailwind CSS，行高设置文本中行之间的垂直距离。 |
|
| Tailwind CSS - 列表样式图片 | 使用 Tailwind CSS，列表样式图片将列表中的默认项目符号替换为自定义图片。 |
|
| Tailwind CSS - 列表样式位置 | "列表样式位置"通过设置列表项标记在列表中的对齐方式来控制其位置。 |
|
| Tailwind CSS - 列表样式类型 | "列表样式类型"使用 Tailwind CSS 设置列表中项目符号或标记的类型。 |
|
| Tailwind CSS - 文本对齐 | 文本对齐使用 Tailwind CSS 设置文本的水平位置。 |
|
| Tailwind CSS - 文本颜色 | 文本颜色通过应用 Tailwind CSS 中的各种颜色类来定义文本的颜色。 |
|
| Tailwind CSS - 文本装饰 | 文本装饰在 Tailwind 中为文本应用下划线、上划线和划线等样式效果CSS。 |
|
| Tailwind CSS - 文本装饰颜色 | "文本装饰颜色"可更改 Tailwind CSS 中文本样式(例如下划线和划线)的颜色。 |
|
| Tailwind CSS - 文本装饰样式 | "文本装饰样式"负责设计文本样式效果，例如下划线、划线和更多。 |
|
| Tailwind CSS - 文本装饰粗细 | 文本装饰粗细控制文本样式(例如下划线、删除线等)的粗细。 |
|
| Tailwind CSS - 文本下划线偏移 | 文本下划线偏移使用 Tailwind 控制下划线和文本字符之间的垂直距离CSS。 |
|
| Tailwind CSS - 文本转换 | 文本转换功能可在 Tailwind CSS 中将文本转换为大写、小写或首字母大写。 |
|
| Tailwind CSS - 文本溢出 | 在 Tailwind CSS 中，文本溢出控制文本溢出容器时的显示方式。 |
|
| Tailwind CSS - 文本换行 | 文本换行控制文本在 Tailwind CSS 中如何换行以及如何适应指定尺寸。 |
|
| Tailwind CSS - 文本缩进 | 文本缩进定义在 Tailwind CSS 中，第一行文本开始前添加的间距。 |
|
| Tailwind CSS - 垂直对齐 | 使用 Tailwind CSS，"垂直对齐"控制元素在其容器内的垂直定位方式。 |
|
| Tailwind CSS -空格 | 空格控制 Tailwind CSS 中文本元素之间的间距。 |
|
| Tailwind CSS - 分词 | 分词定义了 Tailwind CSS 中长单词及其换行的处理方式。 |
|
| Tailwind CSS - 连字符 | 连字符控制在 Tailwind 中将连字符插入单词以管理换行CSS。 |
|
| Tailwind CSS - 内容 | Tailwind CSS 中的内容控制在元素之前或之后添加哪些文本或元素。 |
|
Tailwind CSS 排版示例
在下面的示例中，我们将介绍上面提到的一些 Tailwind CSS 排版类。
示例 1
<!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 Typography Examples
</h2>
<p class="underline font-bold mb-2">Using Font-Mono</p>
<p class="font-mono mb-6">
This paragraph uses a monospaced font styled with Tailwind CSS.
</p>
<p class="underline font-bold mb-2">Applying Underline Offset</p>
<p class="underline underline-offset-8 mb-8">
This paragraph has an underline with an offset of 8px.
</p>
<p class="underline font-bold mb-2">
Applying Text Alignment and Line Height
</p>
<div class="max-w-md border border-black p-4">
<p class="text-left leading-8 mb-2">
<strong>Left-aligned text:</strong>
Having a sense of purpose gives us direction and fulfillment.
</p>
<p class="text-right leading-8">
<strong>Right-aligned text:</strong>
Having a sense of purpose gives us direction and fulfillment.
</p>
</div>
<p class="text-blue-700">
<strong>In this example, we use classes for font,
underline offset, text alignment, line height,
and apply blue text color to this text.</strong>
</p>
</body>
</html>
示例 2
在下面的示例中，我们将仔细研究一些额外的 Tailwind CSS 排版类。
<!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 Typography Examples
</h2>
<p class="underline font-bold mb-2">
Applying Text decoration style and color
</p>
<p class="underline decoration-wavy decoration-red-500 mb-8">
This paragraph has a wavy underline from text decoration style.
</p>
<p class="underline font-bold mb-2">
Applying Letter Spacing
</p>
<p class="tracking-wider mb-6">
This paragraph has wider letter spacing for better readability.
</p>
<p class="underline font-bold mb-2">
Applying Text Indentation
</p>
<div class="max-w-xs border border-black p-4 mb-6">
<p class="indent-8 mb-4">
This paragraph has an indentation of 2rem
(32px) from the left.
</p>
</div>
<p class="underline font-bold mb-2">
Applying Word Break
</p>
<div class="max-w-xs border border-black p-4 mb-6">
<p class="break-words">
This paragraph text wraps where long words like<strong>
pneumonoultramicroscopicsilicovolcanoconiosiss</strong>
or URLs break to fit within the container.
</p>
</div>
<p>
<strong>This example uses classes for text decoration,
color, indentation, word breaking, line height,
and letter spacing.</strong>
</p>
</body>
</html>
