直到幾年前，當涉及前端樣式時，通常的做法是根據 BEM 等命名約定提出唯一的類別名稱，並透過往返 CSS 檔案來建立設計。 但現在，「Tailwind CSS」的出現徹底改變了這種情況。為什麼實用優先的概念吸引瞭這麼多的開發商？
這次，對於那些正在考慮實作Tailwind CSS的人，我們將徹底分析它的優點和缺點。
好處1：免去對類別名稱的深切擔憂
“我們應該為這個按鈕的包裝元素命名什麼……‘button-container’？‘action-wrapper’？” 你是否曾經因為這些無用的想法而浪費過時間？ Tailwind 將簡短的預先定義實用程式類別（「flex」、「p-4」、「text-center」等）直接加入 HTML 中，完全消除了命名類別的心理負擔。
好處 2：消除上下文切換
在傳統開發中，不可避免地要在編寫 HTML（或 JSX）、開啟 CSS 檔案和返回 HTML 之間來回切換。 Tailwind 直接在標記中編寫樣式，減少了眼球移動和文件導航，讓您可以在不中斷思考的情況下組裝組件。這比你想像的更快的開發速度。
缺點 1：HTML 看起來“髒”
Tailwind 的一個常見批評是 HTML 類別屬性變得太長，降低了可讀性。 確實，一個複雜的組件有幾十個類，乍看之下很難理解發生了什麼。為了避免這種情況，React和Vue等框架需要劃分為元件單元，並進行設計以防止單一檔案變得太大。
缺點2：很難獲得獨特的CSS知識
因為我們過度依賴方便的實用程式類，所以我們往往忽略了對底層原始 CSS（Flexbox 規範、Grid 機制等）的理解。如果您不理解和使用 Tailwind 的類別名稱（它們所對應的 CSS 屬性），您在創建自己的複雜動畫和佈局時可能會陷入困境。
項目適宜性診斷
那麼，Tailwind CSS適合什麼樣的專案呢？ 總之，任何使用以元件為導向的現代框架（例如 React/Next.js/Vue/Nuxt）的專案幾乎肯定會受益。另一方面，如果您有一個僅使用舊的 HTML 檔案建立的靜態站點，或者一個沒有重複使用元件概念的環境，則結果可能只是更長的程式碼。
了解優勢和劣勢，並在正確的地方使用這個強大的武器。