Tailwind CSS 簡介 – 實用程式優先的框架

在本文中，我們將探索 Tailwind CSS，這是一個流行的實用程式優先 CSS 框架，可讓您快速建立現代網站，而無需編寫自訂 CSS。與傳統的 CSS 框架不同，Tailwind 不附帶預先設計的元件，而是提供實用程式類，讓您直接在 HTML 中設定元素的樣式。

1.什麼是 Tailwind CSS？

Tailwind CSS 是一個實用程式優先的框架，這意味著它專注於為您提供小型、可重複使用的類別來應用樣式。您無需編寫自訂樣式，而是使用預先定義的類別來建立佈局和元件。

例子：

    Click Me

在這裡，您可以看到正在使用的多個實用程式類別：

• bg-blue-500：設定背景顏色。
• text-white：應用白色文字。
• font-bold：使文字加粗。
• py-2 px-4：新增垂直和水平填充。
• rounded：使按鈕的角變圓。

2.為什麼選擇順風？

Tailwind 的方法不同於 Bootstrap 等傳統 CSS 框架。它不提供預先建置的元件，而是鼓勵開發人員透過編寫實用程式類別來創建自訂設計。這將帶來更靈活和可自訂的工作流程。

優點：

• 更快的開發：無需編寫自訂CSS。
• 設計一致性：實用程式允許設計一致性，而無需重複樣式。
• No Dead CSS：在生產中可以輕鬆清除未使用的樣式。

缺點：

• 類重的 HTML：您的 HTML 可能會充滿類，一開始可能會讓人不知所措。
• 學習曲線：需要學習 Tailwind 特定的實用程式。

3.設定 Tailwind CSS

要開始使用 Tailwind CSS，您可以使用 CDN（對於簡單專案）或 透過 npm 安裝它（對於更複雜的工作流程）。

CDN 設定：

您可以透過在 HTML 檔案中新增以下連結來快速開始使用 Tailwind：

npm 設定（對於較大的項目）：

如果您正在開發一個更大的項目，您可能需要透過 npm 安裝 Tailwind CSS：

npm install tailwindcss

安裝後，您可以產生 tailwind.config.js 檔案來自訂您的設定並將其與建置流程整合。

結論

Tailwind CSS 是一款遊戲規則改變者，適用於尋求簡化方法來快速建立自訂設計的開發人員。它允許您透過直接在 HTML 中編寫小型實用程式類別來建立響應靈敏、靈活且一致的網站。

在 LinkedIn 上關注我

裡多伊‧哈桑