如何使用Tailwind CSS快速開發新潮時髦網站

隨著您作為開發人員的進步，您更有可能使用通過編寫更少程式碼來幫助您完成更多工作的技術。像Tailwind CSS這樣可靠的前端框架是實現這一目標的一種方法。

在本文中，我們將瞭解Tailwind CSS——一個有助於構建和設計網頁的CSS框架。我們將首先解釋如何在您的專案中安裝和整合Tailwind CSS，檢視一些實際應用程式，以及如何建立自定義樣式和外掛。

1. 什麼是Tailwind CSS？
2. 什麼是框架？
3. 什麼是實用程式優先的CSS框架？
4. 使用Tailwind CSS的先決條件
5. 如何開始使用Tailwind CSS
6. 如何建立Tailwind CSS外掛

什麼是Tailwind CSS？

Tailwind CSS

Tailwind CSS是一個實用程式優先的CSS（級聯樣式表）框架，帶有預定義的類，您可以使用這些類直接在標記中構建和設計網頁。它允許您以預定義類的形式在HTML中編寫CSS。

我們將定義什麼是框架以及“實用程式優先CSS”的含義，以幫助您更好地理解Tailwind CSS的全部含義。

什麼是框架？

作為一個通用的程式設計術語，框架是一種工具，它提供了從現有工具的特性構建的可重用和現成的元件。建立框架的總體目的是通過減少工作來提高開發速度。

現在我們已經確定了框架的含義，它應該可以幫助您理解Tailwind CSS是基於CSS功能構建的工具。該框架的所有功能都源自以類形式組成的CSS樣式。

什麼是實用程式優先的CSS框架？

當我們說實用程式優先CSS時，我們指的是我們的標記 (HTML)中具有預定義功能的類。這意味著您只需編寫一個附加了預定義樣式的類，這些樣式將應用於元素。

在您使用vanilla CSS（沒有任何框架或庫的CSS）的情況下，您將首先為您的元素指定一個類名，然後將不同的屬性和值附加到該類，這反過來會將樣式應用於您的元素.

我們將向您展示一個示例。在這裡，我們將建立一個帶有圓角的按鈕和一個顯示“Click me”的文字。這是按鈕的樣子：

點選按鈕

我們將首先使用vanilla CSS執行此操作，然後使用Tailwind CSS中可用的實用程式類。

With Vanilla CSS

<button class="btn">Click me</button>

我們已經給按鈕標籤class btn，它將使用外部樣式表進行樣式設定。那是：

.btn {
background-color: #000;
color: #fff;
padding: 8px;
border: none;
border-radius: 4px;
}

With Tailwind CSS

<button class="bg-black p-2 rounded">Click me</button>

這都是實現與vanilla CSS示例相同的效果所必需的。沒有建立您必須編寫樣式的外部樣式表，因為我們使用的每個類名都已經具有預定義的樣式。

使用Tailwind CSS的先決條件

在使用Tailwind CSS之前，您應該考慮滿足一些先決條件，才能毫無困難地使用框架的功能。這裡有幾個：

• 良好的HTML知識、結構和工作原理
• 紮實的CSS基礎——媒體查詢、flexbox和網格系統

Tailwind CSS可以在哪裡使用？

您可以在前端Web專案中使用Tailwind CSS，包括React.js、Next.js、Laravel、Vite、Gatsby等JavaScript框架。

Tailwind CSS的優缺點

以下是使用Tailwind CSS的一些優勢：

1. 更快的開發過程
2. 由於實用程式相似，可幫助您更多地練習CSS
3. 所有實用程式和元件都可以輕鬆定製
4. 生產的整體檔案大小通常很小
5. 如果您已經瞭解CSS，則易於學習
6. 學習的好文件

使用Tailwind CSS的一些缺點包括：

1. 對於大型專案，您的標記可能看起來雜亂無章，因為所有樣式都在HTML檔案中。
2. 如果你對CSS不太瞭解，學習起來並不容易。
3. 您被迫從頭開始構建所有內容，包括您的輸入元素。安裝Tailwind CSS時，它會刪除所有預設CSS樣式。
4. 如果您希望最大限度地減少開發網站前端所花費的時間並且主要關注後端邏輯，那麼Tailwind CSS不是最佳選擇。

何時使用Tailwind CSS

Tailwind CSS最適合通過編寫更少的程式碼來加快開發過程。它帶有一個設計系統，有助於保持各種設計要求（如填充、間距等）的一致性；有了這個，您不必擔心建立您的設計系統。

如果您希望使用易於配置的框架，您也可以使用Tailwind CSS，因為它不會強制您始終以相同的方式使用元件（導航欄、按鈕、表單等）；您可以選擇元件的外觀。但是，如果您沒有學習和實踐過CSS，則永遠不應該使用Tailwind。

Tailwind CSS與其他CSS框架的異同

以下是一些相似之處：

1. 它們可以幫助您更快地完成工作。
2. 它們帶有預定義的類。
3. 它們是建立在CSS規則之上的。
4. 它們都易於學習和使用，具有CSS的工作知識。

現在讓我們看看其中的一些區別：

1. Tailwind與大多數框架不同，因為您必須建立自己的元件。例如，Bootstrap具有導航欄、按鈕等元件，但使用Tailwind，您必須自己構建所有這些。
2. 像Bootstrap這樣的一些框架不容易定製，所以你不得不使用它們的設計模式。在Tailwind中，您可以控制一切的流程。
3. 使用Tailwind需要深入的CSS知識。編寫類名是不夠的，因為您必須將它們組合起來，就好像您正在編寫vanilla CSS一樣才能獲得相同的結果。在大多數其他框架中，您只需要知道使用類名時將構建什麼元件。

如何開始使用Tailwind CSS

在安裝Tailwind CSS並將其整合到您的專案中之前，請確保：

1. 您已在計算機上安裝了Node.js，以使用終端中的Node包管理器 (npm)。
2. 您的專案已全部設定為您建立的檔案。

這是我們目前的專案結構：

-Tailwind-tutorial
-public
-index.html
-styles.css
-src
-styles.css

接下來，為您的專案啟動一個終端並執行以下命令：

    npm install -D tailwindcss

上述命令將安裝Tailwind CSS框架作為依賴項。接下來，通過執行以下命令生成tailwind.config.js檔案：

    npm install -D tailwindcss

tailwind.config.js檔案在建立時將為空，因此我們必須新增一些程式碼行：

module.exports = {
content: ["./src/**/*.{html,js}", "./public/*.html"],
theme: {
extend: {},
},
plugins: [],
};

內容陣列中提供的檔案路徑將使Tailwind能夠在構建期間清除/刪除任何未使用的樣式。

接下來要做的是將“@tailwind”指令新增到src資料夾中的CSS檔案中 – 這是Tailwind為您生成所有預定義實用程式樣式的地方：

@tailwind base;
@tailwind components;
@tailwind utilities;

最後要做的是通過在終端中執行以下命令來啟動構建過程：

    npx tailwindcss -i ./src/styles.css -o ./public/styles.css --watch

在上面的程式碼中，我們告訴Tailwind我們的輸入檔案是src資料夾中的樣式表，並且我們使用的任何樣式都必須構建到public資料夾中的輸出檔案中。--watch允許Tailwind監視您的檔案以進行自動構建過程的更改；省略它意味著我們每次想要構建程式碼並檢視所需的輸出時都必須執行該指令碼。

使用Tailwind CSS

現在我們已經為我們的專案安裝並設定了Tailwind CSS，讓我們看一些示例來全面瞭解它的應用程式。

Flexbox示例

要在Tailwind CSS中使用flex，您需要新增一個flex類，然後新增flex項的方向：

    <div class="flex flex-row">
<button> Button 1 </button>
<button> Button 2 </button>
<button> Button 3 </button>
</div>

三個紫色按鈕

使用flex-row-reverse將反轉按鈕出現的順序。

flex-col將它們堆疊在一起。這是一個例子：

<div class="flex flex-col">
<button> Button 1 </button>
<button> Button 2 </button>
<button> Button 3 </button>
</div>

三個紫色按鈕

就像前面的例子一樣，flex-col-reverse顛倒順序。

Grid示例

在網格系統中指定列和行時，我們採用不同的方法，通過傳入一個數字來確定元素如何佔用可用空間：

<div class="grid grid-cols-3">
<button> Button 1 </button>
<button> Button 2 </button>
<button> Button 3 </button>
<button> Button 4 </button>
<button> Button 5 </button>
<button> Button 6 </button>
</div>

六個紫色按鈕

顏色

Tailwind帶有許多預定義的顏色。每種顏色都有一組不同的變化，最淺的變化是50，最暗的變化是900。

這是一張包含多種顏色的圖片及其HTML十六進位制程式碼來說明這一點

從Tailwind的預設調色盤自定義顏色。（圖片來源）

我們將舉例說明如何使用上面的紅色為按鈕元素提供背景顏色：

<button class="bg-red-50">Click me</button>
<button class="bg-red-100">Click me</button>
<button class="bg-red-200">Click me</button>
<button class="bg-red-300">Click me</button>
<button class="bg-red-400">Click me</button>
<button class="bg-red-500">Click me</button>
<button class="bg-red-600">Click me</button>
<button class="bg-red-700">Click me</button>
<button class="bg-red-800">Click me</button>
<button class="bg-red-900">Click me</button>

此語法對於Tailwind中的所有顏色都是相同的，除了黑色和白色，它們的書寫方式相同，但不使用數字：bg-black和bg-white.

要新增文字顏色，請使用類text-{color}：

<p class="text-yellow-600">Hello World</p>

Padding

Tailwind已經有一個設計系統，可以幫助您在設計中保持一致的規模。您只需要知道應用每個實用程式的語法。

以下是用於向元素新增填充的實用程式：

• p表示整個元素的填充。
• py表示 padding padding-top和padding-bottom。
• px表示 padding-left和padding-right。
• pt表示填充頂部。
• pr表示填充權。
• pb表示填充底部。
• pl表示向左填充

要將它們應用於您的元素，您必須使用Tailwind提供的適當數字——有點類似於上一節中表示顏色變體的數字。這就是我們的意思：

<button class="p-0">Click me</button>
<button class="pt-1">Click me</button>
<button class="pr-2">Click me</button>
<button class="pb-3">Click me</button>
<button class="pl-4">Click me</button>

Margin

用於填充和邊距的預定義實用程式非常相似。您必須將 替換p為m：

• m
• my
• mx
• mt
• mr
• mb
• ml

如何建立Tailwind CSS外掛

儘管Tailwind CSS已經為您構建了大量實用程式和設計系統，但您仍然可能擁有想要新增的特定功能來擴充套件Tailwind的用途。Tailwind CSS允許我們通過建立外掛來做到這一點。

讓我們通過建立一個新增淺綠色的外掛和一個將元素在 X 軸上旋轉 150º 的旋轉實用程式來弄髒我們的手。我們將使用一點JavaScript在tailwind.config.js檔案中建立這些實用程式。

現在，讓我們分解一下。我們做的第一件事是匯入Tailwind的外掛函式：

const plugin = require("tailwindcss/plugin");

然後我們繼續在plugins陣列中建立我們的外掛：

  plugins: [
plugin(function ({ addUtilities }) {
const newUtilities = {
".bg-aqua": { background: "aqua" },
".rotate-150deg": {
transform: "rotateX(150deg)",
},
};
addUtilities(newUtilities);
}),
],

製作外掛後，您可能必須重新執行構建指令碼。

現在外掛已經準備好了，我們可以測試它們：

<button class="bg-aqua rotate-150deg">Click me</button>

如果你做的一切都正確，你應該有一個淺綠色的按鈕，文字在X軸上旋轉到150º。

小結

在加快您的工作流程時，框架是一個非常寶貴的選擇。它們可以幫助您構建美觀且專業的網頁，同時保持設計的一致性。Tailwind CSS提供了許多實用的CSS類來幫助您將網頁設計和開發提升到一個新的水平。

這篇文章告訴我們什麼是Tailwind CSS以及是什麼使它成為一個框架。然後，我們檢視了安裝過程並檢視了一些示例，這些示例展示了我們如何建立自定義外掛來擴充套件現有功能。

如果您已經跟進了這一點，那麼您現在對Tailwind的工作原理有了基本但紮實的瞭解。但是，為了更好地使用這種實用程式優先的框架，如果您還沒有紮實的基礎，則必須繼續練習並增加對CSS的瞭解。