通常我們在撰寫 HTML 及 CSS 時有兩種不同的方式進行開發：
- HTML 為主體，CSS 依賴它
- CSS 為主體，HTML 依賴它
這兩種不同的開發方式有什麼區別呢？以下將根據此兩種狀況分別敘述，最後告訴你我們為什麼需要 Tailwind！
一、HTML 為主體，CSS 依賴它
上圖的 HTML 檔案透過履歷化的方式，去定義每個 Class 的名稱，可以看見：上半部為 Article，下半部為 Header。
對於 CSS 來說，根據 HTML 定義上的每個 Class 名稱，去寫什麼樣的 CSS，這樣的好處是：在寫 HTML 的時候可以很明白每個區塊的作用，且排版不會去變動，一但定義好規則，CSS 檔案照著跑每個 CLASS 的樣式即可。
壞處則是，在寫 Class 檔案的時候即使有幾乎一模一樣的樣式，卻不能重複使用，要遵循語意化規則，在寫 CSS 的時候一樣的東西必須分別寫在不同的 Class 裡頭。
然而，因為不需要動到 HTML，在改變網站時，可以只去更動 CSS 檔案就可以快速切換。
這樣的網站比較適合有主題性，版面沒有太大變動的網站，排版一樣、樣式多樣，例如：購物商城、拍賣平台⋯⋯等。
二、CSS 為主體，HTML 依賴它
與前一種方式不同，不在以語意化方式定義 Class 名稱，然而 CSS 檔案卻是重複使用各種需要的項目，會在CSS定義。
在這種情況裡，先寫好常常需要共用的 CSS 樣式，在撰寫 HTML 的時候，再根據CSS 拼湊出想要的樣子，在這種情況下CSS 檔案的重用性非常高。如上圖所示，只需要寫四種不一樣的 CSS，卻可以利用 HTML 寫出各種不同的樣子。
這種方式的好處是 CSS 因為只提供樣式，檔案容量大幅精簡；缺點則是需要不斷更動 HTML 檔案。
這種方式適合希望 CSS 打包之後的檔案較小、或者需要最大程度共用各種樣式的開發情形。
兩種方式該怎麼選
個人開發應該選擇怎麼樣的方式，可以依照個人使用習慣去做選擇；然而若是團隊一起開發，則不只是技術層面，也需要考慮團隊各種效益：現實問題、執行成本，以及專案本身的類型⋯⋯等。
為什麼我們需要 Tailwind？
最後來談談，為什麼我們需要 Taiwind 呢？
因為 Tailwind 是根據上述第二種 「CSS 為主體，HTML 依賴 CSS」 的寫法，所開發出的一套框架，Tailwind 已經幫我們寫好各種常見的 CSS utilities，可以幫助我們節省寫 CSS、建立 utilities 的時間，節省開發成本，只需要專注在開發內容上。
掌握 Tailwind 就是現在
你決定好要用 Bootstrap 5 還是 Tailwind CSS 作為 CSS 的框架了嗎？小孩子才做選擇！小編兩個都要學！
現任 Tiktok 前端工程師帶你掌握 2021 前端工程師必學的 CSS 最新框架技術，用正確的姿勢提早完成專案
▍你的痛我們都懂！
近來我們觀察到許多前端工程師不熟悉 Bootstrap 5，導致想調整組件樣式，但不知道該從何切入，又或是想使用近期崛起的 Tailwind CSS，卻不知道如何導入專案
因此，我們準備了「Bootstrap 5」+「Tailwind CSS」系列課程，帶你告別跟一大堆 CSS 奮鬥的苦日子！
▍疑難雜症一次解決
- 從零開始教核心概念，例如：組件、layout、自訂義等
- 了解兩種框架適合的使用情境 & 區別
- Bootstrap 4、5 的比較
- 網頁排版規劃撇步
- 實作出業界常見的排版「電商網站、仿 FB」UI
一起去看看 布魯斯框架雙刀流！