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>
打印页面
上一页
下一页
广告