什麼是Tailwind CSS？輕鬆認識Tailwind CSS

本篇是Tailwind CSS系列文章的第一篇，就用輕鬆的閒聊方式來認識一下Tailwind CSS，讓你知道它的魅力所在。

嗨歡迎閱讀我的文章，這系列的主題是Tailwind CSS，內容涵蓋基礎設定到各種客製化應用。

系列文需要有一定的CSS，HTML基礎認識。

什麼是Tailwind CSS？輕鬆認識Tailwind CSS封面圖片

一分鐘認識Tailwind CSS

Tailwind CSS是一種「Utility-First」的CSS設計模式，提供非常多預先定義好的class給開發者使用，直接加在HTML上就能直接使用，協助開發者更快的開發現代化網站。

Tailwind CSS官網

和一般使用的class不一樣的地方，Tailwind CSS把每一個class的顆粒度切到最小，一個class就僅代表一個CSS樣式，例如想在要呈現一個背景漸層色，在Tailwind CSS中就要撰寫以下內容：

漸層底色

<div class="h-14 bg-gradient-to-r from-purple-500 to-pink-500"></div>

這段呈現了Tailwind CSS最大的優勢，提供開發者最好的開發體驗。所有CSS都已經預先產出，開發者只需要提取需要的部分，大大簡化開發過程，更能專注於開發客製化樣式設計上。

另一大優點就是輕量化，Tailwind CSS在打包的時候會自動移除未使用的class，對於網頁的載入速度和效能有很大的幫助，也因為class的顆粒度小，複用性大大提升。

Tailwind CSS痛點？

Tailwind CSS的優點和痛點都顯而易見。

最常被提起的點莫過於在HTML內被寫滿長長的class，讓HTML看起來變得複雜；而另一個點則是覺得預設的斷點並不完全符合需求，無法深度自定義。

隨著版本的更新，官方也針對這些開發者痛點不斷地推出插件和魔術般的Utility，所以Tailwind CSS在前端越來越熱門自然是有它的原因在。

系列文章規劃

預計這個系列會集中在介紹Tailwind CSS的開發環境設定、必須安裝的插件介紹、深入介紹如何在Tailwind CSS中使用CSS變數、介紹一些魔術般的Utility等等內容。