可客制化的设计系统------Tailwind
在 Tailwind 中，一切的功能性 Class 随你安排，从空间、间距、颜色、变化模式 (Variants) 等等都是可以自订义的，你可以自订整套系统能使用的样式有哪些，也可以基于预设值额外新增你自己想要的数值设定。
- 功能优先 (Utility First)
- 变化模式 (Variants)
- Hover、Focus 以及其他状态
- 响应式设计 (RWD)
- 深色模式
- 客制化
- 提取成元件
- 函数与指令
- 增加基底样式和新功能
| 功能性 class | 一般 class | |
|---|---|---|
| 职责 | 职责单纯 只负责单一种样式的呈现 | 职责较复杂 一个 class 可能出现多种不同用途的样式 |
| 名称 | 名称即用途 看到名称就知道效果 | 名称较抽象 名称通常与样式效果无关，较冗长 |
<div align="left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua.
</div>
<div align="right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua.
</div>
<div align="center">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua.
</div>
<div align="justify">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua.
</div>
这是基于 modern-normalize 所延伸出来的一个特性，而因为每一家浏览器的预设样式都不太相同，所以确保你的设计系统所呈现出来的样式能在各浏览器保持一致性、不用去为了哪一家特别撰写什么样式，所以统一把预设样式都全部清除了哦！
字体大小 ( font-size )
藉由 text-{尺寸} 这个功能，我们可以设定 / 改变文字大小，例如 text-base 功能是将文字大小设定为 1rem。(相当于 16px)
| 班级 | 特性 |
|---|---|
| text-xs | font-size: 0.75rem; /* 12px / line-height: 1rem; / 16px */ |
| text-sm | font-size: 0.875rem; /* 14px / line-height: 1.25rem; / 20px */ |
| text-base | font-size: 1rem; /* 16px / line-height: 1.5rem; / 24px */ |
| text-lg | font-size: 1.125rem; /* 18px / line-height: 1.75rem; / 28px */ |
| text-xl | font-size: 1.25rem; /* 20px / line-height: 1.75rem; / 28px */ |
| text-2xl | font-size: 1.5rem; /* 24px / line-height: 2rem; / 32px */ |
| text-3xl | font-size: 1.875rem; /* 30px / line-height: 2.25rem; / 36px */ |
| text-4xl | font-size: 2.25rem; /* 36px / line-height: 2.5rem; / 40px */ |
| text-5xl | font-size: 3rem; /* 48px */ line-height: 1; |
| text-6xl | font-size: 3.75rem; /* 60px */ line-height: 1; |
| text-7xl | font-size: 4.5rem; /* 72px */ line-height: 1; |
| text-8xl | font-size: 6rem; /* 96px */ line-height: 1; |
| text-9xl | font-size: 8rem; /* 128px */ line-height: 1; |
字体粗细、字重 ( font-weight )
藉由 font-{粗細} 这个功能，我们可以设定 / 改变文字粗细，例如 font-bold 功能是将字重设为 700。
文字对齐 ( text-align )
透过 text-{方向} 这个功能，我们可以设定 / 改变文字对齐的方向，例如 text-right 功能是将文字置右。
文字色彩 (text-color)
透过 text-{颜色}-{深浅度} 这个功能，我们可以设定 / 改变文字颜色，例如 text-red-500 功能是将文字色彩设定为深浅度 500 的红色。(#EF4444)。
以下是预设可以使用的文字色彩功能：
注意：还有些颜色不具深浅度，如白色 (
text-white)、黑色 (text-black)，透明 (text-transparent)
清单样式 (list-style-type)
透过 list-{样式类型} 这个功能，我们可以设定清单符号的样式，例如 list-disc 功能是将清单符号设定为一个圆点。
以下是预设可以使用的清单样式功能：
- list-none
- list-disc
- list-decimal
接着我们用 list-decimal 把清单内容弄得有先后顺序
文字装饰 (text-decoration)
透过文字装饰这个功能，我们可以设定文字上的小特效，例如 line-through 功能是将文字画上删除线。
以下是预设可以使用的文字装饰功能：
- underline
- line-through
- no-underline
接着我们把按钮的文字变成蓝色，并且用 underline 把它做的像超连结吧：
成品
<div class="text-center text-2xl font-bold text-yellow-400">consectetur adipiscing</div>
<ul class="list-inside list-disc">
<li>Lorem ipsum dolor sit</li>
<li>sed do eiusmod tempor incididunt</li>
</ul>
<button class="text-blue-400 underline">联系我</button>
