---

前言

Tailwind CSS 本質上是一個 PostCSS 插件，其底層工作原理可以拆解為以下幾個關鍵步驟，結合了 PostCSS 的處理能力和 Tailwind 特有的生成邏輯：

---

1. 指令解析與 AST 操作

• 入口指令：當 PostCSS 加載 Tailwind 插件后，會掃描 CSS 文件中的 Tailwind 特定指令（如 @tailwind base;, @tailwind components;, @tailwind utilities;）。
• AST 替換：Tailwind 將這些指令替換為動態生成的 CSS 規則（抽象語法樹節點）。例如：

  /* 輸入 */
  @tailwind utilities;/* 輸出（示例） */
  .p-4 { padding: 1rem; }
  .text-red-500 { color: #ef4444; }
  /* ...數千個實用類 */
  

🚩 核心處理流程

掃描項目文件↓
提取 Tailwind CSS 類名↓
匹配配置 (tailwind.config.js)↓
生成原子化 CSS↓
輸出到最終的 CSS 文件中

🧩 具體流程說明

（1）掃描項目文件

Tailwind 根據配置的 content 項，掃描 HTML、JSX、TSX、Vue 文件，提取出所用到的類名。

// tailwind.config.js
module.exports = {content: ["./src/**/*.{js,jsx,ts,tsx,html,vue}"],
}

例如你在 JSX 中寫：

<div className="text-xl font-bold text-blue-500">Hello</div>

Tailwind 就會提取出類名：

["text-xl", "font-bold", "text-blue-500"]

（2）匹配配置

Tailwind 內部維護一套主題配置（theme）：

theme: {colors: { blue: {500: '#3B82F6'} },fontSize: { xl: '1.25rem' },fontWeight: { bold: 700 },
}

掃描后找到匹配的設計 Token（顏色、字體大小等）。

（3）生成原子化 CSS

每個類名會對應生成一個原子 CSS 類：

.text-xl { font-size: 1.25rem; }
.font-bold { font-weight: 700; }
.text-blue-500 { color: #3B82F6; }

（4）輸出 CSS 文件

最終輸出到 index.css 或 main.css：

.text-xl { font-size: 1.25rem; }
.font-bold { font-weight: 700; }
.text-blue-500 { color: #3B82F6; }

---

2. 配置驅動的樣式生成

• 合并配置：讀取用戶的 tailwind.config.js 并與默認配置合并。
• 設計系統映射：
  • 根據配置中的 theme 部分（如顏色、間距、字體等），生成對應的實用類。
  • 例如：theme.spacing.4 → 生成 .p-4 { padding: 1rem; }。

---

3. JIT 模式（Just-In-Time）的核心邏輯

• 按需生成（現代默認方式）：
  1. 掃描項目文件（HTML/JSX/Vue 等），識別所有用到的 Tailwind 類名（如 class="bg-blue-500"）。
  2. 只生成這些用到的類，而非全量 CSS。
• 動態創建：
  • 當代碼中出現未生成的類（如 mt-[13px]），JIT 引擎實時計算樣式并注入 CSS。

使用：

<div class="w-[243px] bg-[#e6e6e6] text-[17px]">Hello</div>

動態生成：

.w-\[243px\] { width: 243px; }
.bg-\[\#e6e6e6\] { background-color: #e6e6e6; }
.text-\[17px\] { font-size: 17px; }

---

4. 插件與自定義擴展

• 插件系統：通過 plugins: [] 配置加載第三方或自定義插件，動態添加新的實用類。
• @apply 指令：在 CSS 中復用樣式：

  .btn {@apply px-4 py-2 bg-blue-500; /* 解析為組合樣式 */
  }
  

  • 底層實現：查找 .px-4, .py-2, .bg-blue-500 的規則，將其聲明復制到 .btn 中。

Tailwind 本身還可以通過插件機制擴展：

const plugin = require('tailwindcss/plugin')module.exports = {plugins: [plugin(({ addUtilities, addComponents, theme }) => {addUtilities({'.text-shadow': {'text-shadow': '2px 2px #000'}})addComponents({'.btn-primary': {padding: '.5rem 1rem',backgroundColor: theme('colors.blue.500'),color: '#fff'}})})]
}

插件通過：

• addUtilities 添加工具類（例如 .text-shadow）。
• addComponents 添加組件類（例如 .btn-primary）。

---

5. 與 PostCSS 管道的協同

1. 輸入 CSS → PostCSS 解析為 AST。
2. Tailwind 插件：
   • 替換 @tailwind 指令為生成的 CSS 規則。
   • 處理 @apply, @layer 等自定義指令。
3. 其他插件處理：如 Autoprefixer（添加瀏覽器前綴）。
4. 輸出 CSS：將最終 AST 轉換為 CSS 字符串。

---

6. 優化與 Tree Shaking

• 傳統模式：全量生成 CSS → 通過 PurgeCSS 刪除未使用的類（依賴文件掃描）。
• JIT 模式：天生按需生成，無需額外 Tree Shaking。

---

關鍵源碼邏輯（簡化）

// Tailwind 作為 PostCSS 插件的偽代碼
export default postcss.plugin('tailwind', (options) => {return (root, result) => {// 1. 讀取配置const config = resolveConfig(options.config);// 2. 掃描指令（如 @tailwind utilities）root.walkAtRules('tailwind', (rule) => {const layer = rule.params;// 3. 根據層（base/components/utilities）生成 CSSconst generatedRules = generateRulesForLayer(layer, config);// 4. 替換指令為生成的 CSSrule.replaceWith(generatedRules);});// 5. 處理 @apply 等自定義指令processApplyDirectives(root, config);};
});

---

🎯 關鍵技術細節（底層機制總結）

技術點	說明
PostCSS 插件機制	Tailwind 本質就是 PostCSS 插件，利用 AST 生成 CSS
實用類原子化	將樣式拆解為最小顆粒度的類
AST 解析和構建	解析源碼 → 提取類名 → 匹配 Token → 生成 CSS
JIT 模式	按需實時編譯任意值類名 實現極致的性能與體積優化
插件系統	使用 JS API 添加額外工具類、組件類

---

通過這種設計，Tailwind CSS 在保持靈活性的同時，解決了傳統 CSS 框架的冗余問題，成為現代 Web 開發的高效工具。