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è)贊疫剃，分享給小伙伴們吧~
