> ## 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 项目中常用的格式化、lint、CSS 工具以及 UI 组件工作流连接起来。

## 按需选择

| 需求                                 | 从这里开始                                                         |
| ---------------------------------- | ------------------------------------------------------------- |
| 加入 SWC（Speedy Web Compiler）之外的定制转换 | [Babel](/docs/integrations/babel)                             |
| 强制执行代码质量规则                         | [ESLint](/docs/integrations/eslint)                           |
| 保持格式一致                             | [Prettier](/docs/integrations/prettier)                       |
| 用插件转换 CSS                          | [PostCSS](/docs/integrations/postcss)                         |
| 在持续集成（CI）中对样式表做 lint               | [Stylelint](/docs/integrations/stylelint)                     |
| 搭建可组合的 UI 原子组件                     | [shadcn/ui](/docs/integrations/shadcnui)                      |
| 实用工具优先的样式系统                        | [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. 仅在需要时再加入框架专用工具。

## 下一步

* 在[扩展配置](/docs/features/extension-configuration)中对齐项目默认值。
* 用[工作流](/docs/workflows/index)验证你的修改。

## 视频讲解