1. 開發方式

1.1 傳統 CSS

• 手寫 CSS：你需要手動編寫 CSS 規則，定義類名、ID 或元素選擇器，并為每個元素編寫樣式。

• 分離式開發：HTML 和 CSS 通常是分離的，HTML 中通過類名或 ID 引用 CSS 文件中的樣式。

• 示例：

  • <div class="card">Hello World</div>
    

  • .card {padding: 1rem;background-color: white;border-radius: 0.5rem;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    

1.2 Tailwind CSS

• 實用類優先：Tailwind 提供了大量的實用類（utility classes），你直接在 HTML 中使用這些類來構建樣式，而不需要手寫 CSS。

• 原子化 CSS：每個實用類只負責一個小的樣式功能（如 p-4 表示 padding: 1rem），通過組合這些類來實現復雜的設計。

• 示例：

  • <div class="p-4 bg-white rounded-lg shadow-sm">Hello World</div>
    

2. 設計理念

2.1 傳統 CSS

• 語義化：傳統 CSS 強調語義化的類名（如 .card、.button），類名通常與組件的功能或內容相關。
• 可復用性：通過定義通用的類名，可以在多個地方復用樣式。
• 靈活性：你可以完全控制樣式的細節，但需要手動管理樣式的組織和維護。

2.2 Tailwind CSS

• 功能優先：Tailwind 的類名直接描述樣式功能（如 text-center、bg-blue-500），而不是語義。
• 原子化設計：通過組合多個實用類來實現樣式，避免了重復定義樣式規則。
• 約束性設計：Tailwind 提供了一套設計系統（如顏色、間距、字體大小等），幫助你保持設計的一致性。

3. 代碼量

3.1 傳統 CSS

• CSS 文件較大：你需要為每個組件或頁面編寫獨立的 CSS 規則，可能會導致 CSS 文件體積較大。
• 重復代碼：如果多個組件有相似的樣式，可能會導致代碼重復。

3.2 Tailwind CSS

• HTML 文件較大：由于直接在 HTML 中使用實用類，HTML 文件可能會顯得臃腫。
• CSS 文件較小：Tailwind 通過 PurgeCSS 移除未使用的樣式，最終生成的 CSS 文件通常較小。

4. 維護性

4.1 傳統 CSS

• 維護成本較高：隨著項目規模的增長，CSS 文件可能會變得難以維護，尤其是當多個開發者共同維護時。
• 命名沖突：需要小心管理類名，避免全局樣式沖突。

4.2 Tailwind CSS

• 維護成本較低：由于樣式是通過實用類直接應用的，減少了全局樣式的沖突問題。
• 一致性：Tailwind 的設計系統確保了樣式的一致性，減少了樣式不一致的問題。

5. 學習曲線

5.1 傳統 CSS

• 學習曲線較低：傳統 CSS 是 Web 開發的基礎，幾乎所有開發者都熟悉。
• 靈活性高：你可以完全控制樣式的細節，但需要掌握 CSS 的各種特性（如 Flexbox、Grid、動畫等）。

5.2 Tailwind CSS

• 學習曲線較高：需要熟悉 Tailwind 的實用類命名規則和設計系統。
• 快速開發：一旦熟悉 Tailwind，可以快速構建復雜的界面，減少上下文切換（不需要在 HTML 和 CSS 文件之間來回切換）。

6. 適用場景

6.1 傳統 CSS

• 適合小型項目：對于小型項目或簡單的頁面，傳統 CSS 可能更直接。
• 高度定制化：如果你需要完全自定義樣式，傳統 CSS 提供了更大的靈活性。

6.2 Tailwind CSS

• 適合中大型項目：Tailwind 的設計系統和實用類非常適合需要快速迭代和保持一致性的項目。
• 組件化開發：與 React、Vue 等框架結合使用時，Tailwind 可以很好地支持組件化開發。

7. 性能

7.1 傳統 CSS

• 性能依賴優化：如果 CSS 文件未經優化，可能會導致性能問題（如未使用的樣式）。
• 全局樣式：全局樣式可能會導致不必要的樣式覆蓋和沖突。

7.2 Tailwind CSS

• 性能優化：通過 PurgeCSS 移除未使用的樣式，生成的 CSS 文件通常較小。
• 局部樣式：樣式直接應用于 HTML 元素，減少了全局樣式的影響。

8. 生態系統

8.1傳統 CSS

• 生態系統豐富：有許多 CSS 預處理器（如 Sass、Less）和框架（如 Bootstrap、Foundation）可供選擇。
• 工具鏈復雜：可能需要配置 PostCSS、Autoprefixer 等工具。

8.2 Tailwind CSS

• 生態系統完善：Tailwind 有豐富的插件（如 @tailwindcss/forms、@tailwindcss/typography）和社區支持。
• 工具鏈簡單：Tailwind 提供了開箱即用的工具鏈（如 CLI、PostCSS 插件）。

9. 總結對比表

特性	傳統 CSS	Tailwind CSS
開發方式	手寫 CSS，分離式開發	實用類優先，原子化 CSS
設計理念	語義化，強調可復用性	功能優先，強調一致性
代碼量	CSS 文件較大，HTML 文件較小	HTML 文件較大，CSS 文件較小
維護性	維護成本較高，容易沖突	維護成本較低，減少沖突
學習曲線	較低	較高
適用場景	小型項目，高度定制化	中大型項目，快速迭代
性能	依賴優化	通過 PurgeCSS 優化
生態系統	豐富，但工具鏈復雜	完善，工具鏈簡單

10. 選擇建議

• 如果你需要快速構建一致性的界面，并且喜歡在 HTML 中直接編寫樣式，Tailwind CSS 是一個很好的選擇。
• 如果你需要完全控制樣式細節，或者項目規模較小，傳統 CSS 可能更適合。
• 兩者并不是互斥的，你可以在同一個項目中結合使用 Tailwind CSS 和傳統 CSS，根據具體需求選擇最合適的工具。

11. 擴展

1. 如果你要在項目中使用 Tailwind CSS, 可以結合 (shadcn/ui 、Headless UI ) 這些無頭用戶界面，無 UI 組件, 來定制 構建你的業務組件。
2. 換句話說，無頭組件庫，就是提供了一種方式來構建只包含邏輯和功能的組件，而內部不實現具體的 UI。它們包含了一些交互邏輯和狀態管理，但沒有任何與視覺樣式相關的代碼。
3. 傳統的 UI 組件、通常被拆分為兩大部分： 外觀樣式、邏輯部分， 當你要為業務，修改某個組件的樣式就要通過 CSS 破壞的方式來實現， 而這些無頭組件庫的出現，恰恰解決了這一痛點。 可以讓你更快，更好解決：樣式難以定制、耦合性高、創意受限、依賴過多等問題 。

Headless UI 初探

• 完全自定義：開發者需要從頭開始設計組件的外觀。
• 靈活性高：適合需要獨特設計風格的項目。

shadcn/ui 初探

• 基于 Tailwind CSS：可以通過修改 Tailwind 配置文件或直接覆蓋類名來自定義樣式。

• 開箱即用：默認樣式已經足夠美觀，適合快速開發。

• 它不是 一個組件庫，它是可重用組件的集合，您可以將其復制并粘貼到應用中。

• 不是組件庫意味著什么 ?

  • 無需將其安裝為依賴項。它無法通過 npm 分發。
  • 選擇您需要的組件，將代碼復制并粘貼到項目中，并根據需要進行自定義。
  • 以此作為構建自己的組件庫的參考。

• FAQ : 為什么要復制/粘貼而不是打包成依賴項？

  • 這背后的想法是賦予您對代碼的所有權和控制權，允許你決定如何構建組件和設置樣式。

  • 從一些合理的默認值開始，然后根據你的需要自定義組件。

  • 將組件打包到 npm 包中的缺點之一是樣式與實現耦合。組件的設計應與其實現分開。

使用 shadcn/ui 、Headless UI 的注意點：

• 對開發者能力要求高，需要較強的組件抽象設計能力。

• 對使用者：UI 層完全自定義，存在一定開發成本。

• 對使用者：新的編碼風格需要一定的學習成本。