Tailwind CSS 排版

排版是任何设计的基础，它极大地影响着内容的可读性和用户体验。Tailwind 提供了一套丰富的排版工具类，让你能够精细地控制文本的每一个方面。

Font Family (字体族)

使用 font-{family} 来设置字体。

• font-sans: 应用 UI 无衬线字体族。
• font-serif: 应用 UI 衬线字体族。
• font-mono: 应用 UI 等宽字体族。

你可以在 tailwind.config.js 的 theme.extend.fontFamily 中轻松添加自定义字体。

Font Size (字号)

使用 text-{size} 来控制字号。Tailwind 提供了一个从 text-xs (超小) 到 text-9xl (巨大) 的、和谐的字号比例尺。

• text-sm: 0.875rem
• text-base: 1rem (默认)
• text-lg: 1.125rem
• text-2xl: 1.5rem
• text-5xl: 3rem

Font Weight (字重)

使用 font-{weight} 来控制字体的粗细。

• font-thin: 100
• font-light: 300
• font-normal: 400 (默认)
• font-medium: 500
• font-semibold: 600
• font-bold: 700
• font-black: 900

Text Color (文本颜色)

使用 text-{color} 来设置文本颜色。你可以使用调色板中的任何颜色。

• text-black, text-white
• text-slate-500
• text-sky-600
• text-transparent

Text Alignment (文本对齐)

使用 text-{alignment} 来控制文本的水平对齐方式。

• text-left: 左对齐
• text-center: 居中对齐
• text-right: 右对齐
• text-justify: 两端对齐

Line Height (行高)

使用 leading-{height} 来控制行高，改善文本的可读性。

• leading-none: 1
• leading-tight: 1.25
• leading-normal: 1.5 (默认)
• leading-loose: 2

Letter Spacing (字间距)

使用 tracking-{spacing} 来控制字符之间的间距。

• tracking-tighter: -0.05em
• tracking-normal: 0em (默认)
• tracking-wider: 0.05em

Text Decoration (文本装饰)

• underline: 添加下划线。
• overline: 添加上划线。
• line-through: 添加删除线。
• no-underline: 移除文本装饰。

你还可以组合使用 decoration-{style} 和 decoration-{color} 来设置装饰线的样式和颜色。

<p class="text-lg font-semibold text-slate-800 leading-relaxed">
  这是一段精心排版的文字，它使用了合适的字号、字重和行高，以确保最佳的可读性。
</p>

<a href="#" class="underline decoration-sky-500 decoration-2 hover:decoration-blue-400">
  一个带样式的链接
</a>

通过组合这些排版工具，你可以创造出丰富、清晰且富有表现力的文本内容。