近年來，在前端領域最熱門且備受爭議的 CSS 框架之一是 Tailwind CSS，這個面向初學者的 Tailwind CSS 教程將嘗試讓您快速了解它的全部內容。
我將介紹基礎知識，以及為什麼您可能希望使用 Tailwind CSS 之類的工具來構建您的網頁，以及 Tailwind 如何改變您對 HTML 和 CSS 的整體看法。
我還將向您展示如何自動優化您的 Tailwind 構建，以確保您不使用不需要的 CSS。
📚 目錄：
- 背景：原子 CSS #
- 為什麼選擇原子 CSS？#
- 什麼是順風 CSS？#
- Tailwind 開發者模式入門 #
- 使用 Tailwind 的實用程序類 #
- 學習 Tailwind 的「語言」#
- 使用 Tailwind 對重複樣式進行分組 #
- 安裝 Tailwind 的完整工具集 #
- 配置 Tailwind 項目 #
- 生成 Tailwind 構建 #
回到頂部
背景：原子 CSS
為了更好地理解 Tailwind，讓我們稍微備份一下，以確保本 Tailwind CSS 教程對您有意義。
Tailwind 的概念植根於通常稱為 Atomic CSS 的東西，有時也稱為 CSS 實用程序類。這是一個 CSS 概念，其中單個 HTML 類將單個 CSS 屬性/值對應用於元素。這裡有幾個例子：
.wp-block-code {
邊框：0;
填充：0；
}
.wp-block-code > div {
溢出：自動；
}
.shcb 語言 {
邊界：0；
剪輯：矩形（1px，1px，1px，1px）；
-webkit 剪輯路徑：插入（50%）；
剪輯路徑：插圖（50%）；
高度：1px；
邊距：-1px；
溢出：隱藏；
填充：0；
位置：絕對；
寬度：1px；
自動換行：正常；
斷字：正常；
}
.hljs {
框尺寸：邊框框；
}
.hljs.shcb-code-table {
顯示：表；
寬度：100%；
}
.hljs.shcb-code-table > .shcb-loc {
顏色：繼承；
顯示：表格行；
寬度：100%；
}
.hljs.shcb-code-table .shcb-loc > span {
display: table-cell;
}
.wp-block-code code.hljs:not(.shcb-wrap-lines) {
white-space: pre;
}
.wp-block-code code.hljs.shcb-wrap-lines {
white-space: pre-wrap;
}
.hljs.shcb-line-numbers {
邊框間距：0；
計數器複位：線；
}
.hljs.shcb-line-numbers > .shcb-loc {
counter-increment: line;
}
.hljs.shcb-line-numbers .shcb-loc > span {
padding-left: 0.75em;
}
.hljs.shcb-line-numbers .shcb-loc::before {
border-right: 1px solid #ddd;
內容：計數器（行）；
顯示：表格單元格；
填充：0 0.75em；
文本對齊：右；
-webkit 用戶選擇：無；
-moz 用戶選擇：無；
-ms 用戶選擇：無；
用戶選擇：無；
空白：nowrap；
寬度：1%；
}
.font-weight-bold {
字體粗細：粗體；
}
.color-hotpink {
顏色：hotpink; 代碼語言：CSS（css
）
然後在您的 HTML 中，您將使用這些類：
<p class=”font-weight-bold color-hotpink”>一些示例文本。</p>
代碼語言：HTML、XML (xml)
如果您以前從未像這樣編寫過 HTML 和 CSS，那麼我不會責怪您對上面的代碼感到厭惡。將每個可能的屬性/值對隔離為單個類名似乎適得其反。但在本 Tailwind CSS 教程中，您將了解為什麼這是一種有益的方法。
返回頂部
為什麼選擇原子 CSS？
當您可以通過單一用途的實用程序類訪問每個可能的屬性/值對時，就像前面示例中所示的那樣，您有一些好處：
- 您不必擔心 CSS 的特殊性。每個「實用程序」都是一個類名，因此它們都處於同一級別的特異性。
- 根本不需要寫任何CSS；您只能在 HTML 中構建具有類名的元素。
- 除了 HTML，您幾乎可以構建任何東西。
從表面上看，原子 CSS 和 Tailwind CSS 之類的庫似乎使您的 HTML 變得龐大且有些笨拙。但與我上面提到的好處相比，這是一個小障礙。
這應該足以介紹原子 CSS。要了解更多歷史，您可以查看這篇文章，甚至可以查看啟動原子 CSS 運動的文章。在本面向初學者的 Tailwind CSS 教程的其餘部分中，我將介紹 Tailwind 究竟是什麼以及如何使用該庫。
返回頂部
什麼是 Tailwind CSS？
Tailwind 是一個原子 CSS 規則庫（即單一用途的實用程序類），可幫助您構建 HTML 頁面而無需觸及 CSS。但 Tailwind 不僅僅是 CSS。除了框架本身，Tailwind 還包括一個 CLI 以及各種配置和主題選項。這些允許您自動化和擴展您的構建，從而在不犧牲性能和可維護性的情況下充分利用 Tailwind 的功能。
在我解釋這個面向初學者的 Tailwind CSS 教程中的 CLI 和構建選項之前，讓我們首先考慮庫本身的特性（即原子類）。這將展示使用 Tailwind 構建東西是多麼容易。
轉至頂部
Tailwind 開發人員模式入門
由於 Tailwind 旨在讓您在不接觸 CSS 的情況下構建頁面，這自然會使完整的 Tailwind 庫成為您永遠不想包含在真實網站構建中的大文件。
就本 Tailwind CSS 教程而言，為了學習和試驗該庫，您可以在 HTML 的 <head> 中使用以下代碼來包含 Tailwind 的所有實用程序類：
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<script src=”https://cdn.tailwindcss.com%20″></script>
</head>
代碼語言：HTML、XML(xml)
上述代碼包含一個稱為 Tailwind Play CDN 的腳本。此腳本僅用於學習和實驗，絕不能用於實時站點。稍後我將討論如何通過構建過程將 Tailwind 正確地包含在您的項目中。目前，這適用於嘗試 Tailwind 並開始添加類以設置 HTML 元素的樣式。
轉至頂部
使用 Tailwind 的實用程序類
一旦您擁有可訪問特定頁面的 Tailwind 實用程序庫，您就可以開始向您想要設置樣式的任何元素添加類。
這是一個 CodePen 示例，其中包含一些頁面元素，包括一個按鈕，使用一些 Tailwind 類進行樣式設置：
請參閱 Louis Lazaris 在 CodePen 上的 Pen Tailwind 基本示例。
HTML 看起來像這樣（為簡潔起見，刪除了文本）：
<main class=”my-0 mx-auto max-w-3xl text-center”>
<h2 class=”p-6 text-4xl”>…</h2>
<p class=”px-10 pb-10 text-left”>…</p>
<button class=”bg-sky-600 hover:bg-sky-700 px-5 py-3 text-white rounded-lg”>…</button>
</main>
代碼語言：HTML、XML(xml )
如您所見，Tailwind 的實用程序類或多或少有自己的語言，基於它們在自然 CSS 中表示的每個屬性/值對。
起初這可能有點嚇人，當然並不適合所有人。但許多開發人員發現，這與 Tailwind 的工具一起，是構建更易於維護的大型項目的可擴展且高效的方式。
Go to top
學習 Tailwind 的「語言」
像這樣面向初學者的 Tailwind CSS 教程不可能涵蓋實用程序類命名方式的所有不同細微差別。這是你必須隨著時間的推移學習的東西，但我會儘力為你提供一些資源來幫助你。
Tailwind 文檔提供了大量關於類名的信息。您可以從「布局」部分開始並逐步完成。任何時候您想將特定的 CSS 屬性添加到元素並且不確定值時，您可以使用互動式頁面搜索功能。它位於左側導航的頂部或使用鍵盤上的 CTRL-K (CMD-K)。
鍵入您想要的關鍵字（例如，您想要使用的 CSS 屬性），搜索模式將向您顯示來自文檔的相關結果。
Tailwind 實用程序類語法中的一些常見模式示例包括：
- 用於大小調整的縮寫詞，例如 w、h、sm、md 和 lg
- 接近字面意義的 CSS 等價物，如 float-left、clear-both、overflow-auto 等
- 使用 x 和 y 的垂直和水平指示器
- 最小/最大尺寸指標，例如 min-w 和 max-h
- 字體堆棧縮寫，如 font-sans 和 font-mono
這只是一個小樣本。Tailwind 涵蓋了 CSS 中的所有內容，包括與 Flexbox 和 CSS Grid 相關的所有功能的實用程序。如前所述，這裡無法涵蓋所有內容，但這應該足以讓您了解要添加到元素中的類的種類。如果您使用過更傳統的 CSS 框架，例如 Bootstrap，那麼您已經在較少粒度的級別上完成了此類事情。Tailwind 將其提升到更原子的級別，以便對您的樣式進行更細粒度的控制，就像您直接編寫 CSS 一樣。
當然，你永遠不會記住所有的類名，所以這裡有一些工具可能會有所幫助：
- Tailwind 組件網站上的 Tailwind 備忘單。
- Tailwind CSS Cheatsheet，Tailwind 類的可列印備忘單
- Umesh Kadam 的 Tailwindcss 備忘單
使用 Tailwind對重複樣式進行分組
早些時候，我向您展示了一個 HTML 示例，其中到處都是 Tailwind 實用程序類。您可能已經對必須以這種方式設置每個元素的樣式是多麼低效感到不安——即使重複相同的樣式！
例如，如果我在同一個頁面上有五個按鈕，它們都看起來像這樣：
<button class=”bg-sky-600 hover:bg-sky-700 px-5 py-3 text-white rounded-lg”>…</button>
代碼語言: HTML, XML (xml)
如果按鈕一個接一個出現，那麼如果我需要進行任何更改，我可以在我的文本編輯器中利用多游標編輯。我也可以使用模板語言（在前端或後端）動態地包含重複的元素，這意味著我只需在一個地方更改它們。但是，如果元素不是靠得很近或者位於不同的頁面上並且上述解決方案沒有幫助怎麼辦？
對於跨項目重複部分，Tailwind 的文檔強烈建議通過利用 React 等庫中的組件或 Twig 等庫中的模板部分來構建頁面。這意味著您的樣式將 100% 僅使用實用程序類構建，這是理想的。
話雖如此，Tailwind 具有稱為 @tailwind、@layer 和 @apply 的指令，允許您創建更小、可重用的實用程序類集合。這些組件（通常是單個元素）對於完整的庫級抽象來說太小了，但又太笨拙以至於不得不在其他地方重複（類似於上面的按鈕示例）。
使用上述指令，我可以將按鈕示例轉換為以下簡單的 HTML：
<button class=”btn-main”>…</button>
代碼語言：HTML、XML(xml)
這個單一的 HTML 類代表了我之前包含在按鈕中的所有實用程序類。這是在我的 CSS 中使用以下內容完成的：
@尾風基地；
@tailwind 組件；
@tailwind 實用程序；
@layer components {
.btn-main {
@apply bg-sky-600 hover:bg-sky-700 px-5 py-3 text-white rounded-lg;
}
}
請注意我如何將所有實用程序類移動到以@apply 開頭的行。上面的代碼執行以下操作：
- 將 Tailwind 的基礎、組件和實用程序樣式插入 CSS
- 使用@layer 在組件「bucket」中包含 btn-main 類
- 將選定的實用程序類分配給 btn-main 類名
有了它，我可以在任何我想要的地方使用 .btn-main 並且所有按鈕都將繼承相同的樣式。您可以在我使用 Tailwind 的官方遊樂場創建的這個演示中看到這一點。單擊 CSS 選項卡可查看將所有按鈕類封裝到 .btn-main 中的代碼。
轉至頂部
安裝 Tailwind 的完整工具集
如前所述，到目前為止我向您展示的示例並不理想。例如，CodePen 使用 Tailwind Play CDN，這意味著所有 Tailwind 的類都包含在頁面中，儘管我只使用了一些。
為了正確使用 Tailwind，讓我們安裝它並將其配置為僅構建我需要的 CSS。在我的項目文件夾中，我將在終端中運行以下兩個命令：
npm install -D tailwindcss
這會在我的項目文件夾中安裝 Tailwind 及其所有依賴項。接下來，我想啟動 Tailwind 來創建我的配置文件：
npx tailwindcss 初始化
這會在我的項目文件夾的根目錄中生成一個名為 tailwind.config.js 的文件，其中包含以下內容：
module.exports = {
content: [],
theme: {
extend: {},
},
plugins: [],
}
代碼語言：JavaScript (javascript)
向該文件中添加任何內容是可選的。如果您將任何部分留空，Tailwind 將使用其默認配置選項，您可以在此處查看。Tailwind 文檔建議僅填寫您想要更改的選項，而不是包含完整的默認配置文件（您可以在啟動項目時使用 npx tailwindcss init –full 來完成）。
轉至頂部
配置 Tailwind 項目
進入高級自定義超出了本 Tailwind CSS 初學者教程的範圍，但這裡是您可以在配置文件中執行的一些操作的基本概述：
- 內容 – 定義 HTML 模板、JavaScript 組件和其他使用 Tailwind 類名稱的文件的路徑。
- 主題 – 定義與頁面和組件設計相關的默認主題選項（顏色、字體等）。
- plugins – 包括擴展 Tailwind 的插件。
- 預設 – 定義您自己的基本配置，而不是使用 Tailwind 的默認配置。
- prefix – 定義將出現在每個 Tailwind 實用程序類前面的自定義前綴。這對於克服類命名衝突很有用。
- 重要 – 強制使用 !important 標記 Tailwind 的所有實用程序類，如果您將 Tailwind 添加到使用大量高特異性選擇器的遺留項目中，這可能會有所幫助。
有關可用配置選項的完整信息，請參閱 Tailwind 文檔。
出於演示目的，讓我們假設一個簡單的配置文件定義了我的內容的位置：
module.exports = {
內容：[
‘./pages/**/*.{html,js}’,
‘./components/**/*.{html,js}’
]，
主題：{
擴展：{} ,
},
插件: [],
}
代碼語言: JavaScript (javascript)
這告訴 Tailwind 我將 Tailwind 類包含在兩個文件夾中的 .html 和 .js 文件中：頁面和組件。我包含了 JavaScript 文件，因為 Tailwind 可以識別通過 JavaScript 動態添加和刪除的類，其中一些僅存在於 .js 文件中，而不存在於 HTML 中。
在某些情況下，我可能會使用在許多項目中常見的 src 文件夾和公共 HTML 入口點。看起來像這樣：
module.exports = {
content: [
‘./public/index.html’,
‘./src/**/*.{html,js}’,
],
主題: {
extend: {},
},
插件: [ ],
}
代碼語言：JavaScript (javascript)
這完全取決於您如何構建項目和相關的內容文件。你也可能正在使用一個處理器，比如 PostCSS，你可以在這裡閱讀。
作為警告：確保您在識別配置中的內容頁面時不要過於籠統。例如，您不想在任何地方都使用通配符，從而使 Tailwind 在 node_modules 或它不應該遍歷的其他文件夾中查找。
轉至頂部
生成 Tailwind 構建
將所有類添加到 HTML 和 JavaScript 頁面並在 Tailwind 的配置選項中確定頁面的位置後，您希望構建項目以僅包含您指定的 CSS。
對於我的示例，我將在項目的根文件夾中運行以下命令：
npx tailwindcss -o ./css/styles.min.css –minify
這使用 -o 命令告訴 Tailwind 在指定文件夾中以縮小格式輸出我的 CSS。這確保了我的項目中不會存在未使用的 CSS。如果我在我的 HTML 中只使用了 30 個 Tailwind 類，那麼我的 CSS 中只會生成這些實用程序。從那裡，我只需要確保任何使用 Tailwind 類的 HTML 頁面都包含對我的樣式表的引用。
當然，這只是構建和文件夾結構的一個示例。根據您使用的是 React 還是 Vue 之類的庫，或者您是否每次都在構建特定的自定義設置，您將在構建步驟中對配置文件和任何關聯的 npm 命令進行必要的調整。
轉至頂部
Tailwind CSS 教程結論
這應該足以讓您在進入更複雜的構建之前啟動並運行 Tailwind。您可以選擇使用僅限開發人員的 Play CDN 來試驗和學習 Tailwind 實用程序類語言。到了構建步驟時，您可以將 Tailwind 配置為讀取您的 HTML 和 JavaScript 文件以僅構建您正在使用的 CSS。
一旦掌握了這些基本概念，您就可以開始整合不同的 Tailwind 工具，利用 Tailwind 的響應式設計功能，使用各種組件庫、插件等。Tailwind 適合所有人嗎？不，對於較小的項目來說，這可能有點矯枉過正。除非您首先學習 CSS，否則我不建議您使用 Tailwind。但我在這裡介紹的內容應該足以讓您在今天開始使用 Tailwind 項目。
如果您喜歡這個面向初學者的 Tailwind CSS 教程，您可能也會喜歡這些：
- 👉 CSS 變數初學者指南
- 👉 Webpack 初學者教程
…
不要忘記加入我們關於加快 WordPress 網站速度的速成課程。通過一些簡單的修復，您甚至可以將載入時間減少 50-80%：
Karol K. 的布局和演示。