仅供参考

---

一、什么是Tailwind Css

Tailwind CSS 是一个功能类优先的 CSS 框架，它直接在 HTML 标签中提供了大量预定义的工具类，让开发者无需编写传统 CSS 即可快速构建和定制界面。与其他框架不同（如 Bootstrap 提供预制组件），Tailwind 专注于提供底层的样式工具类，使界面设计更加灵活和一致。

---

二、为什么要使用Tailwind Css

简单地说，使用Tailwind Css可以更方便的编写CSS样式

在之前，我们要给一个 div 添加样式时，需要使用多个选择器，什么类选择器、id选择器、标签选择器、伪类选择器等等，并且得写多行代码

.header {
width: 100px;
heigth: 100px;
overflow: hidden;
...
}

当我们使用Tailwind Css后，只需要一行代码即可，比如：

<div class="w-32 h-32 bg-blue-300">宽高为8rem、背景色为浅蓝色的div</div>

---

三、Tailwind Css语法

1、有关 text 的样式

1.1 文本颜色

text - {颜色} - {颜色强度}
每种颜色分为10个等级，从50到950；500 是中间值，通常代表该颜色的标准 / 主色调；数字越小，颜色越浅；数字越大，颜色越深

<p class="text-red-500">红色文本</p>
<p class="text-blue-600">蓝色文本</p>
<p class="text-gray-800">灰色文本</p>

1.2 文本大小

text - {大小}

<p class="text-xs">超小文本 (0.75rem/12px)</p>
<p class="text-sm">小文本 (0.875rem/14px)</p>
<p class="text-base">基础文本 (1rem/16px)</p>
<p class="text-lg">大文本 (1.125rem/18px)</p>
<p class="text-xl">特大文本 (1.25rem/20px)</p>
<p class="text-2xl">2倍大文本 (1.5rem/24px)</p>
<p class="text-3xl">3倍大文本 (1.875rem/30px)</p>
<p class="text-4xl">4倍大文本 (2.25rem/36px)</p>
<p class="text-5xl">5倍大文本 (3rem/48px)</p>
<p class="text-6xl">6倍大文本 (3.75rem/60px)</p>
<p class="text-7xl">7倍大文本 (4.5rem/72px)</p>
<p class="text-8xl">8倍大文本 (6rem/96px)</p>
<p class="text-9xl">9倍大文本 (8rem/128px)</p>

1.3 文本对齐

text - {对齐方式}

<p class="text-left">左对齐文本</p>
<p class="text-center">居中对齐文本</p>
<p class="text-right">右对齐文本</p>
<p class="text-justify">两端对齐文本</p>

1.4 文本装饰

<p class="underline">下划线文本</p>
<p class="line-through">删除线文本</p>
<p class="no-underline">无装饰文本</p>

1.5 文本转换

<p class="uppercase">全大写文本</p>
<p class="lowercase">全小写文本</p>
<p class="capitalize">首字母大写文本</p>
<p class="normal-case">正常大小写文本</p>

1.6 文本行高

leading - {高度}

<p class="leading-none">无行高</p>
<p class="leading-tight">紧凑行高</p>
<p class="leading-snug">适中行高</p>
<p class="leading-normal">正常行高</p>
<p class="leading-relaxed">宽松行高</p>
<p class="leading-loose">松散行高</p>

1.7 文本间距

tracking - {间距}

<p class="tracking-tight">紧密字母间距</p>
<p class="tracking-normal">正常字母间距</p>
<p class="tracking-wide">宽松字母间距</p>

1.8 文本溢出

<div class="w-40 overflow-hidden truncate">
  这是一段会被截断的长文本，超出容器宽度的部分将被省略号替代。
</div>

1.9 多行文本溢出

<div class="w-40 overflow-hidden line-clamp-2">
  这是一段会被截断的长文本，超出容器宽度的部分将被省略号替代。
</div>

---

2、有关 font 的样式

2.1 家族字体

font - {字体}

<p class="font-sans">无衬线字体 (默认)</p>
<p class="font-serif">衬线字体</p>
<p class="font-mono">等宽字体</p>

自定义字体：在 tailwind.config.js 中扩展配置

2.2 字体粗细

font - {粗细}

<p class="font-thin">极细字体 (100)</p>
<p class="font-extralight">超轻字体 (200)</p>
<p class="font-light">细字体 (300)</p>
<p class="font-normal">正常字体 (400)</p>
<p class="font-medium">中等字体 (500)</p>
<p class="font-semibold">半粗字体 (600)</p>
<p class="font-bold">粗字体 (700)</p>
<p class="font-extrabold">极粗字体 (800)</p>
<p class="font-black">黑体 (900)</p>

2.3 字体样式

<p class="italic">斜体文本</p>
<p class="not-italic">非斜体文本</p>