TailwindCSS教程

Typography 排版

文本对齐

Tailwind CSS提供了简单易用的类来控制文本对齐方式，帮助你创建更具可读性和视觉吸引力的排版。

基础文本对齐类

text-left文本左对齐
这是使用 text-left 类的文本示例，展示了在 Tailwind CSS 中如何控制文本对齐。
text-center文本居中对齐
这是使用 text-center 类的文本示例，展示了在 Tailwind CSS 中如何控制文本对齐。
text-right文本右对齐
这是使用 text-right 类的文本示例，展示了在 Tailwind CSS 中如何控制文本对齐。
text-justify文本两端对齐，调整字间距使每行长度相等
这是使用 text-justify 类的文本示例，展示了在 Tailwind CSS 中如何控制文本对齐。
text-start文本对齐开始位置（与文字方向相关）
这是使用 text-start 类的文本示例，展示了在 Tailwind CSS 中如何控制文本对齐。
text-end文本对齐结束位置（与文字方向相关）
这是使用 text-end 类的文本示例，展示了在 Tailwind CSS 中如何控制文本对齐。

响应式文本对齐

Tailwind允许你使用响应式前缀（sm:, md:, lg:, xl:）为不同屏幕尺寸设置不同的文本对齐方式。

sm:text-left md:text-center lg:text-right

响应式文本对齐示例：在小屏幕上左对齐，中等屏幕上居中，大屏幕上右对齐

这是一段示例文本，会根据屏幕尺寸改变对齐方式。尝试调整浏览器窗口大小来查看效果。
text-center lg:text-left

响应式文本对齐示例：默认居中，大屏幕上左对齐

这是一段示例文本，会根据屏幕尺寸改变对齐方式。尝试调整浏览器窗口大小来查看效果。

实际应用示例

以下是一些常见的文本对齐应用场景：

标题与正文

标题居中，正文左对齐的常见布局

产品特性

这是一段详细描述产品特性的文本。通常长段落使用左对齐以提高可读性，尤其是在西方语言中。左对齐的文本边缘整齐，便于阅读，符合用户的阅读习惯。

引用与强调

使用居中对齐突出重要信息

在文档中，我们可以使用不同的对齐方式来强调内容：

"设计不仅仅是外观和感觉，设计是如何工作的。"
— 史蒂夫·乔布斯

表单设计

表单中标签与输入框的对齐

响应式文本对齐

根据屏幕尺寸改变文本对齐方式

这段文本在不同屏幕尺寸下有不同的对齐方式：
默认：居中 | SM：左对齐 | MD：右对齐 | LG：居中

文本对齐最佳实践

  • 长段落文本通常使用左对齐提高可读性
  • 标题可以使用居中对齐来强调重要性
  • 表单中的按钮通常右对齐或居中对齐
  • 考虑使用响应式对齐类根据屏幕大小改变对齐方式
  • 阿拉伯语、希伯来语等RTL语言中，使用text-start和text-end更适合国际化

垂直对齐

基础垂直对齐类

align-baseline元素的基线与父元素的基线对齐
文本基线对齐示例参考文本
align-top元素的顶部与行框的顶部对齐
文本基线对齐示例参考文本
align-middle元素的中部与父元素基线加上父元素x-height的一半对齐
文本基线对齐示例参考文本
align-bottom元素的底部与行框的底部对齐
文本基线对齐示例参考文本
align-text-top元素的顶部与父元素字体的顶部对齐
文本基线对齐示例参考文本
align-text-bottom元素的底部与父元素字体的底部对齐
文本基线对齐示例参考文本
align-sub元素的基线与父元素的下标基线对齐
文本基线对齐示例参考文本
align-super元素的基线与父元素的上标基线对齐
文本基线对齐示例参考文本

实际应用场景

表单输入框与标签对齐

使用垂直对齐来优化表单布局

图标与文本对齐

使用垂直对齐使图标与文本完美匹配

align-middle（默认）：图标与文本中部对齐
align-top：图标与文本顶部对齐
align-bottom：图标与文本底部对齐

科学公式与数学表达式

使用上标和下标进行数学表达

水的化学式是 H2O

计算面积：A = πr2

相对论方程式：E = mc2

多行文本与图像对齐

图像与多行文本的不同对齐方式

示例图片

self-start：图像与文本顶部对齐。这种对齐方式在展示文章摘要和缩略图时很常用，使布局看起来整洁有序。

示例图片

self-center：图像与文本中部对齐。这种对齐方式在展示短文本内容时很适合，能使整体布局更加平衡。

示例图片

self-end：图像与文本底部对齐。这种对齐方式在某些特殊设计中使用，可以创造有趣的视觉效果。

垂直对齐最佳实践

  • 在表单设计中，使用 align-middle 使标签和输入框对齐
  • 图标与文本搭配时，使用 align-middle 或 align-text-bottom 获得最佳效果
  • 使用 align-super 和 align-sub 创建上标和下标效果
  • 在 Flexbox 布局中，可以使用 self-start、self-center 和 self-end 代替传统的垂直对齐
  • 记住垂直对齐类主要用于行内元素 (inline) 或表格单元格 (table-cell)

字体家族 (Font Family)

Tailwind CSS提供了三种基本的字体家族类，用于控制文本的字体风格。这些类会应用字体堆栈，确保在不同设备上具有一致的显示效果。

Sans Serif (无衬线字体)

font-sans

无衬线字体具有简洁现代的特性，非常适合用于UI设计和Web页面。

描述： 现代、简洁的字体，适合UI界面和数字产品

示例字体： Helvetica, Arial, sans-serif

Serif (衬线字体)

font-serif

衬线字体在笔画末端有装饰，具有传统优雅的特性，适合长文本和正式内容。

描述： 传统、优雅的字体，适合长文本阅读

示例字体： Georgia, Times New Roman, serif

Monospace (等宽字体)

font-mono

等宽字体中的每个字符占据相同的宽度，特别适合展示代码块和技术内容。

描述： 每个字符宽度相同，适合代码显示

示例字体： Consolas, Courier New, monospace

自定义字体配置

在Tailwind中，你可以通过配置文件自定义字体堆栈，例如：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        'display': ['Poppins', 'system-ui', 'sans-serif'],
        'body': ['Inter', 'system-ui', 'sans-serif'],
      }
    }
  }
}

这将添加额外的字体类：font-display 和 font-body

字体大小 (Font Size)

Tailwind CSS提供了一系列字体大小类，从小到大提供了丰富的选择，可以满足各种UI设计需求。

类名预览
text-xs文本示例
text-sm文本示例
text-base文本示例
text-lg文本示例
text-xl文本示例
text-2xl文本示例
text-3xl文本示例
text-4xl文本示例
text-5xl文本示例
text-6xl文本示例
text-7xl文本示例
text-8xl文本示例
text-9xl文本示例

实际应用示例

博客文章结构

这是文章大标题 (text-4xl)

这是次级标题 (text-2xl)

这是小标题 (text-xl)

这是正文内容，使用基础字体大小 (text-base)。正文通常使用这个尺寸，保证良好的可读性。

这是备注信息，使用小一号字体 (text-sm)。适合次要信息、注释等。

这是额外信息或版权声明 (text-xs)。最小的文本尺寸，通常用于法律声明、版权信息等。

响应式字体大小

Tailwind的响应式前缀可以在不同屏幕尺寸下控制文本大小：

响应式标题

手机屏幕：text-xl

自定义字体大小

你可以在tailwind.config.js中自定义字体大小：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontSize: {
        'tiny': '0.625rem',  // 10px
        'mega': '10rem',     // 160px
      }
    }
  }
}

这将添加 text-tiny 和 text-mega 类供使用

字体粗细 (Font Weight)

Tailwind CSS提供了从最细(100)到最粗(900)的9种字体粗细类，可以精确控制文字的显示效果。

font-thin值: 100
这是示例文本

最细的字体粗细

font-extralight值: 200
这是示例文本

比细体略粗一点

font-light值: 300
这是示例文本

轻量级字体粗细

font-normal值: 400
这是示例文本

标准/正常字体粗细

font-medium值: 500
这是示例文本

中等字体粗细

font-semibold值: 600
这是示例文本

半粗体

font-bold值: 700
这是示例文本

粗体

font-extrabold值: 800
这是示例文本

特粗体

font-black值: 900
这是示例文本

最粗的字体粗细

实际应用示例

文档层级结构

主标题使用font-black (900)

次标题使用font-extrabold (800)

小标题使用font-bold (700)

第四级标题使用font-semibold (600)

第五级标题使用font-medium (500)

正文内容使用font-normal (400)，这是默认的字体粗细。

次要内容可以使用font-light (300)来降低视觉重要性。

UI元素中的应用

标签文本 (font-medium)

卡片标题 (font-bold)

卡片内容使用正常粗细 (font-normal)

链接文本 (font-medium)

强调与对比

在同一段文本中，你可以使用不同的字体粗细来强调重点内容，或者创建正常与超重文本之间的对比。

价格: ¥199.00
配送: 免费
状态: 有货

响应式字体粗细

你可以结合Tailwind的响应式前缀来控制不同屏幕尺寸下的字体粗细：

<!-- 移动设备使用普通粗细，平板及以上使用加粗 -->
<h2 class="font-normal md:font-bold">响应式标题</h2>

这种方式可以确保在小屏幕上文字不会显得过重，而在大屏幕上有足够的视觉冲击力。

行高 (Line Height)

Tailwind CSS提供了多种行高控制类，从紧凑到宽松，可以根据不同的设计需求和内容类型调整文本行间距。

leading-none值: 1
这是一段示例文本，用于展示不同行高设置的效果。这段文本足够长，可以跨越多行，以便清楚地看到行高的差异。行高对于提高文本的可读性非常重要，特别是在长篇文章或密集信息显示中。
描述: 无行高（行高值为1）适用场景: 适用于单行显示的标题或标签
leading-tight值: 1.25
这是一段示例文本，用于展示不同行高设置的效果。这段文本足够长，可以跨越多行，以便清楚地看到行高的差异。行高对于提高文本的可读性非常重要，特别是在长篇文章或密集信息显示中。
描述: 紧凑行高适用场景: 适用于较长标题
leading-snug值: 1.375
这是一段示例文本，用于展示不同行高设置的效果。这段文本足够长，可以跨越多行，以便清楚地看到行高的差异。行高对于提高文本的可读性非常重要，特别是在长篇文章或密集信息显示中。
描述: 舒适紧凑行高适用场景: 适用于短段落和卡片内容
leading-normal值: 1.5
这是一段示例文本，用于展示不同行高设置的效果。这段文本足够长，可以跨越多行，以便清楚地看到行高的差异。行高对于提高文本的可读性非常重要，特别是在长篇文章或密集信息显示中。
描述: 标准行高适用场景: 适用于常规正文内容
leading-relaxed值: 1.625
这是一段示例文本，用于展示不同行高设置的效果。这段文本足够长，可以跨越多行，以便清楚地看到行高的差异。行高对于提高文本的可读性非常重要，特别是在长篇文章或密集信息显示中。
描述: 宽松行高适用场景: 适用于较长的阅读内容
leading-loose值: 2
这是一段示例文本，用于展示不同行高设置的效果。这段文本足够长，可以跨越多行，以便清楚地看到行高的差异。行高对于提高文本的可读性非常重要，特别是在长篇文章或密集信息显示中。
描述: 非常宽松的行高适用场景: 适用于需要最大可读性的内容

实际应用示例

博客文章排版

这是一个使用leading-tight的博客标题

这是一个使用leading-snug的副标题

这是使用默认leading-normal的正文段落。这种设置适用于大多数文本内容，提供了良好的可读性和舒适的阅读体验。 正文通常需要适当的行间距来确保读者可以轻松地从一行移动到下一行，不会感到文字拥挤或过于分散。

这是一段使用leading-relaxed的引用文本。引用通常使用较宽松的行高，使其在视觉上与正文区分开来，并增强其可读性。 当引用较长时，较大的行间距有助于减轻阅读疲劳。

UI元素中的行高应用

卡片标题 (leading-tight)

卡片内容使用标准行高 (leading-normal)，确保在有限空间内的最佳可读性。

标签 (leading-none)
¥1,299.00
单行元素或较短内容使用紧凑行高，节省空间并保持视觉整洁。
表单元素

表单说明文本使用leading-snug，在提供充分信息的同时保持紧凑。

响应式行高设置

你可以结合Tailwind的响应式前缀来控制不同屏幕尺寸下的行高：

<!-- 移动设备使用较宽松行高，大屏幕使用较紧凑行高 -->
<p class="leading-relaxed md:leading-normal">
  响应式文本内容
</p>

在小屏幕上使用较大的行高可以提高可读性，而在大屏幕上可以使用较紧凑的行高以适应更多内容。

自定义行高

除了预设的行高类外，你还可以在tailwind.config.js中自定义行高：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      lineHeight: {
        'extra-loose': '2.5',
        '12': '3rem',
      }
    }
  }
}

这样你就可以使用leading-extra-loose和leading-12这样的自定义类。

字母间距 (Letter Spacing)

Tailwind CSS提供了多种字母间距控制类，从紧凑到宽松，可以根据不同的设计需求和内容类型调整文本字符间的距离。

tracking-tighter值: -0.05em
这是一段示例文本，用于展示不同字母间距设置的效果。
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
描述: 非常紧凑的字母间距适用场景: 适用于大号标题，使文本更加紧凑
tracking-tight值: -0.025em
这是一段示例文本，用于展示不同字母间距设置的效果。
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
描述: 紧凑的字母间距适用场景: 适用于标题文本
tracking-normal值: 0
这是一段示例文本，用于展示不同字母间距设置的效果。
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
描述: 默认字母间距适用场景: 适用于常规正文文本
tracking-wide值: 0.025em
这是一段示例文本，用于展示不同字母间距设置的效果。
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
描述: 宽松的字母间距适用场景: 适用于需要增强可读性的文本
tracking-wider值: 0.05em
这是一段示例文本，用于展示不同字母间距设置的效果。
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
描述: 更宽松的字母间距适用场景: 适用于需要强调的文本或小号文本
tracking-widest值: 0.1em
这是一段示例文本，用于展示不同字母间距设置的效果。
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
描述: 最宽松的字母间距适用场景: 适用于徽章、标签和大写文本

实际应用示例

品牌与标题设计

LOGO设计 (tracking-tighter)
主标题设计 (tracking-tight)
副标题设计 (tracking-normal)
段落标题设计 (tracking-wide)

UI元素中的字母间距应用

按钮设计
徽章与标签
新特性已确认紧急热门
产品分类
电子产品家居用品户外装备

正文内容中的应用

标准正文 (tracking-normal)

标准正文通常使用默认的字母间距（tracking-normal）。这为读者提供了最佳的阅读体验，特别是对于较长的文本段落。 默认间距不会让文字显得太紧凑也不会太松散，适合日常阅读。

增强可读性 (tracking-wide)

对于较小的文本或需要增强可读性的内容，可以使用较宽的字母间距（tracking-wide）。 这种设置使字母之间有更多的空间，特别适合小字体大小的文本，可以减轻眼睛疲劳并提高可读性。

强调重点 (tracking-wider)

某些情况下，你可能想要强调特定内容， 这时可以为这部分文本应用更宽的字母间距（tracking-wider），使其在视觉上更加突出。

响应式字母间距设置

你可以结合Tailwind的响应式前缀来控制不同屏幕尺寸下的字母间距：

<!-- 移动设备使用较宽字母间距，大屏幕使用标准间距 -->
<h1 class="tracking-wider md:tracking-normal">
  响应式标题
</h1>

在小屏幕上使用较宽的字母间距可以提高可读性，而在大屏幕上可以使用较紧凑的间距以适应更优雅的排版。

自定义字母间距

除了预设的字母间距类外，你还可以在tailwind.config.js中自定义字母间距：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      letterSpacing: {
        'super-wide': '0.2em',
        'ultra-wide': '0.3em',
      }
    }
  }
}

这样你就可以使用tracking-super-wide和tracking-ultra-wide这样的自定义类。

了解更多排版技巧

Tailwind CSS提供了丰富的排版工具，可以精确控制文本样式和布局效果。

字体系列

Sans-serif 字体

Serif 字体

等宽字体

字体大小

超小文本 (xs)

小文本 (sm)

基本文本 (base)

大文本 (lg)

超大文本 (xl)

文本装饰

下划线文本

删除线文本

无下划线文本

上划线文本