> ## Documentation Index
> Fetch the complete documentation index at: https://extension.js.org/llms.txt
> Use this file to discover all available pages before exploring further.

# Tailwind、ESLint 等整合

> 讓 Extension.js 接上 Tailwind CSS、PostCSS、ESLint、Prettier、Stylelint、Babel 與 shadcn/ui，組成完整的擴充功能開發流程。

讓 Extension.js 接上現代 web 專案常用的格式化、檢查、CSS 工具與 UI 元件流程。

## 依需求選擇

| 需求                                      | 從這裡開始                                                         |
| --------------------------------------- | ------------------------------------------------------------- |
| 加入 SWC（Speedy Web Compiler）之外的自訂轉換      | [Babel](/docs/integrations/babel)                             |
| 強制套用程式碼品質規則                             | [ESLint](/docs/integrations/eslint)                           |
| 維持一致的程式碼格式                              | [Prettier](/docs/integrations/prettier)                       |
| 透過 plugin 轉換 CSS                        | [PostCSS](/docs/integrations/postcss)                         |
| 在持續整合（CI）中檢查樣式表                         | [Stylelint](/docs/integrations/stylelint)                     |
| 建立可組合的 UI 元件                            | [shadcn/ui](/docs/integrations/shadcnui)                      |
| 採用 utility-first 樣式系統                   | [Tailwind CSS](/docs/integrations/tailwindcss)                |
| 透過 Chrome DevTools 讓 AI agent 對擴充功能進行除錯 | [Chrome DevTools MCP](/docs/integrations/chrome-devtools-mcp) |

## 實務上的導入順序

1. 先加入基礎品質工具：ESLint + Prettier。
2. 再加入樣式工具：PostCSS + Stylelint（必要時再加 Tailwind）。
3. 只在真的需要時，才加入框架專屬的工具。

## 下一步

* 在 [Extension 設定](/docs/features/extension-configuration) 中對齊專案預設值。
* 透過 [Workflows](/docs/workflows/index) 驗證變更。

## 影片導覽