文本与背景

字体样式表现

调整字体的尺寸大小、预设文字的粗细程度，以及调整文本的行高与字间距风格。

类名	效果说明
text-sm	小号字体显示
text-base	默认的基础字体大小
text-3xl	超大号字体尺寸选项
font-light	设置为极细的字体粗细
font-extrabold	极粗宽体表现
leading-loose	设置更为宽松的文字行高
tracking-tight	设置更紧凑的字母间隔

<div class="text-sm font-light">细体阅读文本示例</div>
<div class="text-base font-normal leading-loose">常规带宽松行高的阅读体验展现，<br/>第二行测试文字间距情况。</div>
<div class="text-lg font-bold tracking-tight">大号的紧凑排列粗体阅读示例</div>
<div class="text-3xl font-extrabold text-blue-600 dark:text-blue-400">3xl强调标语</div>

细体阅读文本示例

常规带宽松行高的阅读体验展现，
第二行测试文字间距情况。

大号的紧凑排列粗体阅读示例

3xl强调标语

文本对齐与修饰处理

用于段落排版对齐方法以及溢出省略号等修饰逻辑。

类名	效果说明
text-left	使用左对齐的方式处理文本段落
text-center	让文本片段保持水平居中对应
text-red-500	为文字本身上色设定
underline	增加文本底部的下划线特性
line-clamp-1	设置文本在一行结束并强制带出省略号结构

<div class="text-left text-gray-500 dark:text-gray-300">此段说明为普通左对齐显示。</div>
<div class="text-center text-red-500 dark:text-red-400">警告类型信息并居中。</div>
<div class="text-right text-green-600 dark:text-green-400 underline text-underline-offset-4">带有下划线要素的右对齐文本</div>
<div class="w-32 mt-4 text-slate-800 dark:text-gray-200 line-clamp-1">这句话非常长，实在是非常非常长，如果长到了连一行空间都已经装不下的地步便会被截断且强制填充省略号。</div>

此段说明为普通左对齐显示。

警告类型信息并居中。

带有下划线要素的右对齐文本

这句话非常长，实在是非常非常长，如果长到了连一行空间都已经装不下的地步便会被截断且强制填充省略号。

背景色彩模式

处理基础容器组件的底层色彩支持属性，或添加诸如多色渐变的效果配合图形化背景。

类名	效果说明
bg-gray-100	铺垫常规无渐变的普通色标卡片基础填充
bg-gradient-to-r	声明色彩过度逻辑方向由屏幕左端伸向屏幕右端边界
from-purple-500	配合渐变功能并确立最起始左段位置的渲染初始颜色
to-pink-500	将结束坐标最右侧的淡出渲染完成为设定颜色
bg-[url(/assets/samples/lPVgCTbtvttdBsw.webp)]	支持以本地资源配置提供图片充当主要视觉填充

<div class="bg-gray-100 text-black p-4 mb-2 shadow">日常普通的素色基础背景环境设计</div>
<div class="bg-linear-to-r from-purple-500 to-pink-500 text-white p-4 font-bold mb-4">
  多色彩混合叠加交汇的绚丽表现层方案
</div>
<div class="h-24 bg-[url(/assets/samples/lPVgCTbtvttdBsw.webp)] bg-cover bg-center text-white flex items-center justify-center font-bold drop-shadow-md">
  将图面视觉内容填充入区块环境做成背景资源利用
</div>

单色背景

渐变色混合叠加交汇

将图片内容当背景使用