Tailwind CSS 基础工具类：文字与颜色

文字工具类

Tailwind 把常用文字样式都做成了工具类，直接拼在 class 上。

字号

用 text-<size> 控制字号，尺寸从 text-xs 到 text-9xl：

<p class="text-sm">小号文字</p>
<p class="text-base">默认文字</p>
<p class="text-lg">大一点</p>
<p class="text-3xl">标题级别</p>

字重

用 font-<weight> 控制粗细：

<p class="font-thin">极细</p>
<p class="font-normal">常规</p>
<p class="font-bold">加粗</p>
<p class="font-black">特粗</p>

行高

用 leading-<value> 控制行高：

<p class="leading-tight">紧凑行高</p>
<p class="leading-relaxed">宽松行高</p>

对齐

用 text-<align> 控制文字对齐：

<p class="text-left">左对齐</p>
<p class="text-center">居中</p>
<p class="text-right">右对齐</p>

字间距

用 tracking-<value> 控制字母间距：

<p class="tracking-tight">紧凑</p>
<p class="tracking-wide">宽松</p>

字体

用 font-<family> 切换字体族：

<p class="font-sans">无衬线</p>
<p class="font-serif">衬线</p>
<p class="font-mono">等宽</p>

字体平滑

用 antialiased 开启抗锯齿渲染，让文字边缘更柔和。subpixel-antialiased 恢复为系统默认的亚像素渲染。Mac 上差异较明显，Windows 下通常看不出区别。

<p class="antialiased">抗锯齿渲染，边缘更平滑</p>
<p class="subpixel-antialiased">亚像素渲染（默认效果）</p>

多数项目会在全局基础样式里统一加一次 antialiased，不必在每个元素上重复写。

颜色工具类

Tailwind 自带一套调色板，颜色名 + 色阶（50 到 950）就能用。

文字颜色

用 text-<color>-<shade>：

<p class="text-red-500">红色文字</p>
<p class="text-blue-600">蓝色文字</p>
<p class="text-emerald-700">翠绿文字</p>

背景颜色

用 bg-<color>-<shade>：

<div class="bg-blue-100">浅蓝背景</div>
<div class="bg-emerald-500 text-white">绿底白字</div>

默认调色板

常用的颜色名有：red、orange、amber、yellow、green、emerald、teal、cyan、blue、indigo、purple、pink、gray、slate。每个都有 50–950 的色阶。

透明度修饰

在颜色后面加 /<值> 控制不透明度：

<div class="bg-black/50">半透明黑底</div>
<p class="text-red-500/70">70% 不透明度的红字</p>

一组可运行示例

把下面内容放进已接入 Tailwind 的页面里看效果：

<h1 class="text-3xl font-bold text-indigo-700 text-center p-4">
  文字与颜色示例
</h1>
<p class="text-base leading-relaxed tracking-wide text-gray-600 p-4">
  这是一段正文，行高宽松、字间距稍宽。
</p>
<button class="bg-indigo-600 text-white font-bold px-4 py-2 rounded m-4 hover:bg-indigo-700">
  提交
</button>