CSS 框架通過提供預置元件和樣式，改變了開發人員的網路開發方式。然而，許多框架都帶有主觀設計和臃腫的樣式表，從而限制了定製。
尾風 CSS 採用了不同的方法。作為一個實用工具優先的 CSS 框架，它提供了低階實用工具類，允許開發人員構建自定義設計，而不受預定義元件的限制。
目前已有超過 675,375 個網站使用了 Tailwind CSS，依賴庫數量超過 861 萬個，Tailwind 已不僅僅是另一個 CSS 框架。
在本文中，我們將介紹 Tailwind CSS 的概念、設定過程和實際使用方法，讓你無需學習 CSS 即可開始構建漂亮的自定義使用者介面。
什麼是 Tailwind CSS？
Tailwind CSS 是一個高度可定製的底層 CSS 框架，它提供了一組實用工具類，用於快速構建自定義使用者介面。它由 Adam Wathan 於 2017 年首次開發併發布。
從那時起，使用 Tailwind 庫構建的網站呈現出上升趨勢。
雖然根據 BuiltWith 的圖表，目前的增長速度似乎有所放緩，但該框架本身會定期更新，增加新功能、新類等。
根據 BuiltWith 的技術堆疊資料，僅在美國就有超過 10 萬個網站使用 Tailwind 構建使用者介面，英國、印度尼西亞、德國和其他國家也是該庫的前 10 大使用者。
Tailwind CSS 背後的核心理念是為開發人員提供一套構建模組，而不是預製元件。這些構建模組是小型、單一用途的實用工具類，它們可以組合起來建立複雜的響應式佈局。
這種方法使設計更具靈活性和可控性，你可以定製使用者介面的方方面面，而不會受到框架風格的限制。
Tailwind CSS 有何與眾不同？
傳統上，在使用 CSS 時，開發人員會在單獨的樣式表中編寫自定義類，以便為 HTML 元素設計樣式。這種方法會導致大量的 CSS 檔案，並使整個專案中樣式的維護和更新變得十分困難。
尾風提供了一整套可直接應用於HTML元素的實用工具類。這些類具有很強的可組合性，允許開發人員在不編寫一行自定義 CSS 的情況下構建複雜的自定義設計。
例如，您可以使用尾風的預定義類，而無需編寫自定義 CSS 類來設計按鈕樣式：
<button> Button </button>
這種方法有幾個好處：
- 開發速度更快：預定義的類可幫助開發人員快速構建和迭代設計，而無需在 HTML 和 CSS 檔案之間不斷切換。
- 風格一致：Tailwind 提供了一套標準化的類，有助於在整個專案中保持設計的一致性。
- 更小的 CSS 檔案：由於樣式直接應用於HTML，因此不需要大型的自定義CSS檔案。
- 更易於維護：由於樣式是在 HTML 中定義的，因此可以更輕鬆地檢視更改對特定元素的影響，而無需查詢單獨的 CSS 檔案。
- 效能更佳：許多現代樣式系統（如 Emotion 或 Styled Components）都依賴於 javascript（通常在執行時，效能較慢）來呈現 CSS。Tailwind 最終只是一個 CSS。
Tailwind 把我變成了一個完整的堆疊開發者 🤝 — Boris Lepikhin
Tailwind CSS 入門
在開始舉例之前，讓我們先用 Tailwind CSS 建立一個基本專案。我們假設你對 HTML 和 CSS 有一定的瞭解。此外，你還需要在系統中安裝 npm。完成後，就可以開始了！
為你的專案建立一個新目錄，並導航進入：
mkdir my-tailwind-project cd my-tailwind-project
初始化一個新的 npm 專案並安裝 Tailwind CSS：
npm init -y npm install -D tailwindcss
建立 tailwind.config.js 檔案：
npx tailwindcss init
建立 input.css 檔案並新增以下內容：
@tailwind base; @tailwind components; @tailwind utilities;
更新 tailwind.config.js 檔案，以處理輸入的 css：
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
在 src 目錄中建立一個 index.html 檔案，並新增以下內容：
<!DOCTYPE html> <html> <head> <link href="/dist/output.css" rel="stylesheet"> </head> <body> <h1 class="text-3xl font-bold text-center mt-4">Welcome to Tailwind CSS!</h1> </body> </html>
建立 CSS：
npx tailwindcss -i ./src/input.css -o ./src/output.css --watch
現在，當你在瀏覽器中開啟 index.html 時，你應該會看到一個粗體的大標題，上面寫著 Welcome to Tailwind CSS!
恭喜您，您已經建立了第一個 Tailwind 專案！
Tailwind CSS Utility 類
Tailwind CSS 提供了大量實用類，涵蓋了樣式設計的各個方面，如佈局、間距、排版、顏色等。這些類遵循的命名規則可以讓你直觀地瞭解它們的用途。
讓我們來探討一下 Tailwind CSS 中的一些常用實用類。
Tailwind 佈局類
- flex：應用彈性容器。
- grid：應用網格容器。
- block：將元素顯示為塊級元素。
- inline：將元素顯示為內聯級元素。
舉例說明：
<div> <div>Item 1</div> <div>Item 2</div> </div>
Tailwind 間距類
- m-{size}：在所有邊上應用頁邊距。
- p-{size}：在所有邊上應用 padding。
- mx-{size}：在左右兩側應用頁邊距。
- py-{size}：在頂部和底部應用填充。
舉例說明：
<div> Content with margin and padding </div>
Tailwind 排版類
- text-{size}：設定字型大小。
- font-{weight}：設定字型重量。
- text-{color}：設定文字顏色。
- uppercase, lowercase, capitalize：轉換文字大小寫。
舉例說明：
<p> Styled text </p>
Tailwind Colors
Tailwind CSS 提供了可自定義的預設調色盤。顏色由顏色名稱和陰影組合而成。
- bg-{color}-{shade}：設定背景顏色。
- text-{color}-{shade}：設定文字顏色。
- border-{color}-{shade}：設定邊框顏色。
舉例說明：
<button> Button </button>
用於響應式設計的 Tailwind 類
Tailwind 通過為大多數實用工具類提供響應式變體，使建立響應式設計變得更加容易。這些變體允許您為不同的螢幕尺寸指定不同的樣式。
Tailwind 使用的是移動優先的方法，即基礎樣式適用於所有螢幕尺寸，然後使用響應字首針對較大的螢幕尺寸：
- sm：將樣式應用於小螢幕及以上（640px 及以上）。
- md：將樣式應用於中型及以上螢幕（768px 及以上）。
- lg：將樣式應用於大螢幕及以上（1024px 及以上）。
- xl：將樣式應用於超大螢幕及以上（1280px 及以上）。
- 2xl：將樣式應用於超大螢幕及以上（1536px 及以上）。
要使用這些響應式變體，只需在實用工具類字首上所需的螢幕尺寸即可：
<div> <!-- Content --> </div>
在本例中，div 在小螢幕上的背景為藍色，在中螢幕上的背景為綠色，在大螢幕上的背景為紅色。
您還可以使用響應式變體來控制元素的佈局：
<div> <div>Column 1</div> <div>Column 2</div> <div>Column 3</div> </div>
在這裡，小螢幕上的列將垂直堆疊，中螢幕上顯示為兩列，大螢幕上顯示為三列。
自定義 Tailwind CSS 的預設類
定製選項是 Tailwind CSS 的優勢之一。你可以根據專案的設計要求，輕鬆定製預設配置。您可以通過 tailwind.config.js 檔案擴充套件或覆蓋預設設定。
以下是一些常見的自定義選項。您完全可以自定義 Tailwind 的每個部分，因此這並不是一個詳盡的列表。
顏色
Tailwind CSS開箱即提供了豐富的調色盤，但您也可以根據專案的品牌或設計要求進行輕鬆定製。通過 tailwind.config.js 檔案，您可以擴充套件或覆蓋預設調色盤。要新增自定義顏色，可以使用 colors 物件中的 extend 屬性：
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
'brand-primary': '#ff5a5f',
'brand-secondary': '#484848',
'brand-accent': '#ffcc00',
},
},
},
}
在本例中，我們新增了三種自定義顏色：品牌主色、品牌次色和品牌中心色。
這些顏色現在可以與 bg-brand-primary、text-brand-secondary、border-brand-accent 等實用工具類一起使用。您還可以修改現有色調，或在預設調色盤中新增新的色調：
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
blue: {
'100': '#e6f0ff',
'200': '#c3d9ff',
'300': '#a1c2ff',
'400': '#7eabff',
… and so on …
},
},
},
},
}
Font Family
Tailwind CSS 使用預設的字型家族堆疊，但與顏色類似，您可以更改這些預設值，以匹配您專案的排版風格。
您可以在 tailwind.config.js 檔案中擴充套件或替換預設的 Font Family。要新增自定義 Font Family，請使用 fontFamily 物件中的 extend 屬性：
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
sans: ['Poppins', 'sans-serif'],
serif: ['Merriweather', 'serif'],
mono: ['Fira Code', 'monospace'],
},
},
},
}
您也可以省略 extend 屬性，完全替換預設 Font Family：
// tailwind.config.js
module.exports = {
theme: {
fontFamily: {
'body': ['Open Sans', 'sans-serif'],
'heading': ['Montserrat', 'sans-serif'],
},
},
}
響應式斷點
Tailwind CSS提供了開箱即用的響應式設計系統，但您還可以對其進行進一步定製，以滿足您專案的特定斷點和響應式要求。
通過修改 tailwind.config.js 檔案中的 screens 物件，你可以定義自定義斷點，並根據螢幕尺寸應用不同的樣式。
例如，假設您在 1440px 處有一個獨特的斷點，您希望在該斷點應用特定的樣式：
// tailwind.config.js
module.exports = {
theme: {
screens: {
'xs': '480px',
'sm': '640px',
'md': '768px',
'lg': '1024px',
'xl': '1440px',
},
},
}
定義了自定義斷點後，您就可以使用xl:text-lg、xl:flex、xl:w-1/2 等響應式實用工具類，為寬於 1440px 的螢幕專門應用樣式。
間距
Tailwind CSS為 margins、paddings 和其他與間距相關的實用工具提供了一套全面的間距值。您可以自定義這些值，以滿足專案的佈局要求。要新增自定義間距值，請使用間距物件中的擴充套件屬性：
// tailwind.config.js
module.exports = {
theme: {
extend: {
spacing: {
'13': '3.25rem',
'15': '3.75rem',
'128': '32rem',
'144': '36rem',
},
},
},
}
整合第三方庫
Tailwind CSS 可與 React、Vue 和 Angular 等流行的前端庫和框架整合。在使用這些庫時，您可以利用 Tailwind 的實用工具類來設計您的元件，以建立一致且可維護的使用者介面。例如，在 React 元件中，您可以將 Tailwind 實用工具類直接應用於 JSX 元素：
import React from 'react';
const Card = () => {
return (
<div className="bg-white shadow-md rounded-lg p-6">
<h2 className="text-2xl font-bold mb-4">Card Title</h2>
<p className="text-gray-600">Card content goes here...</p>
</div>
);
};
export default Card;
這種多框架方法可以讓您輕鬆彙集所有領域的精華，幫助您建立一個精美的應用程式，幾乎不費吹灰之力。
使用 Tailwind CSS 建立一個簡單的應用程式
假設你正在為一個名為 LearnHub 的虛構線上課程平臺建立一個簡單的登陸頁面，並使用 Tailwind 為整個頁面設計樣式。
第 1 步：設定 HTML 結構
首先，讓我們為登陸頁面建立基本的 HTML 結構：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="output.css" rel="stylesheet"> <title>LearnHub - Online Course Platform</title> </head> <body> <header> <!-- Navigation menu will go here --> </header> <main> <!-- Main content will go here --> </main> <footer> <!-- Footer content will go here --> </footer> </body> </html>
在這一步中，我們建立了 HTML 文件的基本結構。我們在 <head> 部分加入了必要的元標記，並連結到 CSS 檔案(output.css)。在<body> 中，我們有<header>、<main> 和 <footer> 部分，我們將在其中新增內容。
第 2 步：建立導航選單
現在，讓我們使用 Tailwind CSS 工具類在 <header> 部分新增一個簡單的導航選單：
<header> <nav> <a href="#">LearnHub</a> <ul> <li><a href="#">Courses</a></li> <li><a href="#">Pricing</a></li> <li><a href="#">About</a></li> </ul> </nav> </header>
以下是每個類的作用：
- bg-blue-600：將標題的背景顏色設定為藍色。
- text-white：將文字顏色設為白色。
- py-4：為頁首的頂部和底部新增填充。
- 容器 mx-auto：使導航選單水平居中。
- flexjust-between-items-center：使用 flexbox 均衡徽標和選單項的間距，並使其垂直對齊。
- text-2xl font-bold：使徽標文字變大並加粗。
- flex space-x-4：使用 flexbox 在選單項之間新增間距。
- hover:text-blue-200：當滑鼠懸停在選單項上時，將文字顏色更改為淺藍色。
第 3 步：新增主要內容
讓我們在著陸頁的 <main> 部分新增一些內容：
<main> <section> <h1>Welcome to LearnHub</h1> <p>Discover a world of knowledge with our online courses.</p> <a href="#">Start Learning</a> </section> <section> <h2>Featured Courses</h2> <div> <!-- Course cards will go here --> </div> </section> </main>
以下是每個類的作用：
- container mx-auto：使主要內容水平居中。
- mt-8：為主內容頂部新增邊距。
- bg-gray-100 rounded-lg p-6：為歡迎部分新增淺灰色背景、圓角和填充。
- text-3xl font-bold mb-4：將標題文字放大、加粗，並在底部新增邊距。
- text-gray-700 MB-6：將文字顏色設定為深灰色，並在段落底部新增頁邊距。
- bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700：將 “Start Learning” 按鈕樣式設定為藍色背景、白色文字、襯墊、圓角，並在懸停時設定為深藍色背景。
- text-2xl font-bold mb-4：將 “Featured Courses” 標題放大、加粗，並在底部新增邊距。
- grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4：為課程卡片建立響應式網格佈局。在小螢幕上顯示一列，在中螢幕上顯示兩列，在大螢幕上顯示三列，卡片之間留有間隙。
將標題和主程式碼放在一起，應該會有如下輸出：
第 4 步：新增頁尾
最後，為我們的著陸頁新增一個簡單的頁尾：
<footer> <div> <p>© 2023 LearnHub. All rights reserved.</p> </div> </footer>
以下是每個類的作用：
- bg-gray-800 text-white：將頁尾的背景顏色設為深灰色，文字顏色設為白色。
- py-4：為頁尾頂部和底部新增填充。
- mt-8：為頁尾頂部新增邊距。
- container mx-auto：使頁尾內容水平居中。
- text-center：使頁尾文字居中。
將所有內容放在一起
下面是最終的程式碼組合：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link href="output.css" rel="stylesheet" /> <title>LearnHub - Online Course Platform</title> </head> <body> <header class="bg-blue-600 py-4 text-white"> <nav class="container mx-auto flex items-center justify-between"> <a href="#" class="text-2xl font-bold">LearnHub</a> <ul class="flex space-x-4"> <li><a href="#" class="hover:text-blue-200">Courses</a></li> <li><a href="#" class="hover:text-blue-200">Pricing</a></li> <li><a href="#" class="hover:text-blue-200">About</a></li> </ul> </nav> </header> <main class="container mx-auto mt-8"> <section class="rounded-lg bg-gray-100 p-6"> <h1 class="mb-4 text-3xl font-bold">Welcome to LearnHub</h1> <p class="mb-6 text-gray-700">Discover a world of knowledge with our online courses.</p> <a href="#" class="rounded bg-blue-600 px-4 py-2 text-white hover:bg-blue-700">Start Learning</a> </section> <section class="mt-8"> <h2 class="mb-4 text-2xl font-bold">Featured Courses</h2> <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3"> <!-- Course cards will go here --> </div> </section> </main> <footer class="mt-8 bg-gray-800 py-4 text-white"> <div class="container mx-auto text-center"> <p>© 2023 LearnHub. All rights reserved.</p> </div> </footer> </body> </html>
要向使用者顯示輸出結果，您需要在專案中正確設定 Tailwind CSS。請確保您已經按照前面提到的安裝步驟進行了設定，包括建立 tailwind.config.js 檔案和使用 Tailwind 處理 CSS。
設定好 Tailwind CSS 後，就可以將程式碼儲存到 HTML 檔案（如index.html）中，並在網路瀏覽器中開啟。瀏覽器將呈現使用 Tailwind CSS 實用工具類應用樣式的登陸頁面。如果你只是想測試一下 Tailwind，你可以使用 Tailwind 的小工具–Tailwind Play，在這裡你可以玩轉不同的類。
就是這樣！我們使用 Tailwind CSS 工具類為我們虛構的線上課程平臺建立了一個簡單的登陸頁面。
小結
既然你已經見識到了 Tailwind CSS 的強大功能和靈活性，你就會知道這裡有無限的可能性。從簡單的登陸頁面到複雜的網路應用程式，它的靈活和可定製特性都能幫助你構建出簡潔一致的設計。
以下是一些讓你開始使用的想法：
- 建立一個作品集網站：用令人驚歎的作品集展示你的技能和專案。
- 建立部落格：使用 Tailwind 設計的美觀實用的部落格，與世界分享您的想法和創意。
- 開發網路應用程式：Tailwind CSS 是為各種網路應用程式構建使用者介面的完美工具。
無論您建立什麼網站，Tailwind CSS 都能幫助您建立一個令人驚歎且功能完善的網站。
只需掌握最基本的 CSS 知識，即可開始建立精美的使用者介面！
評論留言