第 011 期 用 Tailwind CSS 來快速寫樣式

Tailwind CSS 是最有名，最強大的 CSS 工具類框架。

工具類 CSS 是把常用的樣式封裝成類。如:

.p-0 {
  padding: 0;
}

.text-xs {
  font-size: 12px;
}

用工具類 CSS 寫樣式很快。原因：

• 專注於 HTML，不需要切換到 CSS 文件中。
• 節約起類名的時間。

其他優點:

• CSS 文件總體積比較小。
• 不存全局樣式污染的問題。

Tailwind CSS 介紹

Tailwind CSS 是功能強大的 utility-first 的 CSS 類框架。

包含的工具類多

Tailwind CSS 包含幾乎所有的常見工具類。包括:

• 佈局: 盒模型，overflow，浮動，Position 定位，Flex 佈局，Grid 佈局等。
• 響應式: 定義了5個斷點(sm, md, lg, xl, 2xl)。
• 尺寸：margin，padding，寬，高。
• 背景和邊框。
• 字體。
• 顏色：定義了至少 80 種顏色。
• 漸變和動畫。
• 僞類：Hover，Focus 等。
• 暗色模式(Dark Mode)。

其中，響應式，僞類的工具類可以其他工具類組合着用。如

<!-- 響應式 -->
<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 支持某些改樣式的默認值。如顏色，尺寸的樣式值。具體見：這裏。

刪除沒用到的樣式代碼

Tailwind CSS 包含那麼多的工具類，項目中用到的可能只是一部分。Tailwind CSS 自帶的 Purge 功能，可以刪除沒用到的樣式代碼。

減少記憶負擔

使用 Tailwind CSS 有較大的記憶負擔。要記很多類名。

減少記憶負擔可以通過速查表 和 編輯器的智能提示插件: Tailwind CSS IntelliSense。

Tailwind CSS 很強大吧，趕緊用起來吧~

覺得本文對你有幫助。點個贊，分享給小夥伴們吧~

參考文檔

• Tailwind CSS