字符大小设置

要设置字体大小，请使用 text- {size}。大小可以取 13 个值。相应的 CSS 样式在括号中。

.text-sm（字体大小：.875rem；）
.text-base（字体大小：1rem;）
.text-lg（字体大小：1.125rem；）
.text-xl（字体大小：1.25rem；）
.text-2xl（字体大小：1.5rem；）
.text-3xl（字体大小：1.875rem；）
.text-4xl（字体大小：2.25rem；）
.text-5xl（字体大小：3rem；）
.text-6xl（字体大小：4rem；）
.text-7xl（字体大小：4.5rem；）
.text-8xl（字体大小：6rem；）
.text-9xl（字体大小：8rem；）

当实际应用于html时，它将如下所示:

<p class="text-xs">前端晚间课</p>
    <p class="text-sm">前端晚间课</p>
    <p class="text-base">前端晚间课</p>
    <p class="text-lg">前端晚间课</p>
    <p class="text-xl">前端晚间课</p>
    <p class="text-2xl">前端晚间课</p>
    <p class="text-3xl">前端晚间课</p>
    <p class="text-4xl">前端晚间课</p>
    <p class="text-5xl">前端晚间课</p>
    <p class="text-6xl">前端晚间课</p>
</div>

字符粗细设置

要设置字符粗细，请使用 font- {thickness}。厚度可以取 9 个值。相应的 CSS 样式在括号中。

.font-thin (font-weight: 100;)
.font-extralight (font-weight: 200;)
.font-light (font-weight: 300;)
.font-normal (font-weight: 400;)
.font-medium (font-weight: 500;)
.font-semibold (font-weight: 600;)
.font-bold（font-weight：700；）
.font-extrabold（font-weight：800；）
.font-black（font-weight：900；）

<div class="text-center mt-10">
    <p class="font-thin">前端晚间课</p>
    <p class="font-extralight">前端晚间课</p>
    <p class="font-light">前端晚间课</p>
    <p class="font-normal">前端晚间课</p>
    <p class="font-medium">前端晚间课</p>
    <p class="font-semibold">前端晚间课</p>
    <p class="font-bold">前端晚间课</p>
    <p class="font-extrabold">前端晚间课</p>
    <p class="font-black">前端晚间课</p>
</div>

文字颜色设置

要设置文本颜色，请使用 text- {color}-{color depth}。颜色可以设置为白色、黑色、红色、蓝色、靛蓝色……等。颜色强度可以取 9 个值。例如，在绿色的情况下，如下所示。

text-green-100（颜色：# f0fff4;）
text-green-200（颜色：#c6f6d5；）
text-green-300（颜色：#9ae6b4；）
text-green-400（颜色：#68d391；）
text-green-500（颜色：#48bb78；）
text-green-600（颜色：#38a169；）
text-green-700（颜色：#2f855a；）
text-green-800（颜色：#276749；）
text-green-900（颜色：#22543d；）
复制代码

如果要将文本颜色更改为红色而不是绿色，可以像 text-red-500 一样更改它。如果要更改背景颜色，可以使用 bg-red-500 进行设置。

<div class="text-center mt-10">
    <p class="text-green-100">前端晚间课</p>
    <p class="text-green-200">前端晚间课</p>
    <p class="text-green-300">前端晚间课</p>
    <p class="text-green-400">前端晚间课</p>
    <p class="text-green-500">前端晚间课</p>
    <p class="text-green-600">前端晚间课</p>
    <p class="text-green-700">前端晚间课</p>
    <p class="text-green-800">前端晚间课</p>
    <p class="text-green-900">前端晚间课</p>
</div>

也可以使用诸如边距、填充和 flexbox 之类的实用程序类。您可以在官方文档中查看每个Utilize Class。