Tailwind CSS 是最有名，最強(qiáng)大的 CSS 工具類框架。
工具類 CSS 是把常用的樣式封裝成類。如:
.p-0 {
padding: 0;
}
.text-xs {
font-size: 12px;
}
用工具類 CSS 寫(xiě)樣式很快。原因：
- 專注于 HTML，不需要切換到 CSS 文件中。
- 節(jié)約起類名的時(shí)間。
其他優(yōu)點(diǎn):
- CSS 文件總體積比較小。
- 不存全局樣式污染的問(wèn)題。
Tailwind CSS 介紹
Tailwind CSS 是功能強(qiáng)大的 utility-first 的 CSS 類框架。
包含的工具類多
Tailwind CSS 包含幾乎所有的常見(jiàn)工具類。包括:
- 布局: 盒模型，overflow，浮動(dòng)，Position 定位，F(xiàn)lex 布局，Grid 布局等。
- 響應(yīng)式: 定義了5個(gè)斷點(diǎn)(sm, md, lg, xl, 2xl)。
- 尺寸：margin，padding，寬，高。
- 背景和邊框。
- 字體。
- 顏色：定義了至少 80 種顏色。
- 漸變和動(dòng)畫(huà)。
- 偽類：Hover，F(xiàn)ocus 等。
- 暗色模式(Dark Mode)。
其中，響應(yīng)式，偽類的工具類可以其他工具類組合著用。如
<!-- 響應(yīng)式 -->
<img class="w-16 md:w-32 lg:w-48" ... />
<!-- focus 偽類 -->
<input class="border focus:outline-none" .../>
<!-- hover 偽類 -->
<button class="bg-red-500 hover:bg-red-700" ...>
Hover Me
</button>
支持自定義配置
Tailwind CSS 支持某些改樣式的默認(rèn)值。如顏色，尺寸的樣式值。具體見(jiàn)：這里。
刪除沒(méi)用到的樣式代碼
Tailwind CSS 包含那么多的工具類，項(xiàng)目中用到的可能只是一部分。Tailwind CSS 自帶的 Purge 功能，可以刪除沒(méi)用到的樣式代碼。
減少記憶負(fù)擔(dān)
使用 Tailwind CSS 有較大的記憶負(fù)擔(dān)。要記很多類名。
減少記憶負(fù)擔(dān)可以通過(guò)速查表 和 編輯器的智能提示插件: Tailwind CSS IntelliSense。
Tailwind CSS 很強(qiáng)大吧，趕緊用起來(lái)吧~
覺(jué)得本文對(duì)你有幫助。點(diǎn)個(gè)贊，分享給小伙伴們吧~
