> ## 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.
# 在浏览器扩展中使用 PostCSS
> 用 Autoprefixer 等 PostCSS 插件在扩展页面和 content script 中统一转换 CSS。Extension.js 会自动识别你的配置并接入相应的 loader。
用同一条管线，在扩展页面和 content script 中以一致的方式转换 CSS。当你需要 Autoprefixer 之类的插件或现代 CSS 转换时，就该用 PostCSS。
Extension.js 会检测 PostCSS 配置，并在需要时自动应用 `postcss-loader`。
## 什么场景适合用 PostCSS
* 你需要在扩展样式里做自动前缀或现代 CSS 转换。
* 你希望在 popup/options/sidebar/content script 中共用一条 CSS 转换管线。
* 你正在使用 Tailwind 或基于插件的样式处理。
## PostCSS 的能力
| 能力 | 它能带来什么 |
| ------------- | ----------------------------------------------- |
| 共用的 CSS 管线 | 在 popup、options、新标签页以及 content script 之间使用同一套转换 |
| 灵活的配置发现 | 从专用配置文件或 `package.json` 中加载 PostCSS 配置 |
| 与 Tailwind 兼容 | 通过 PostCSS 插件，与基于 Tailwind 的方案协同工作 |
| 基于插件的转换 | 引入 `autoprefixer`、`postcss-preset-env` 等工具 |
## 模板示例
### Tailwind + PostCSS 起步模板
当你想要一套可用的 PostCSS 设置，并搭配 Tailwind 与组件化 UI 时，用这个模板。
```bash npm theme={null}
npx extension@latest create my-extension --template=sidebar-shadcn
```
```bash pnpm theme={null}
pnpx extension@latest create my-extension --template=sidebar-shadcn
```
```bash yarn theme={null}
yarn dlx extension@latest create my-extension --template=sidebar-shadcn
```
```bash bun theme={null}
bunx extension@latest create my-extension --template=sidebar-shadcn
```
```bash bun theme={null}
bunx extension@latest create my-extension --template=sidebar-shadcn
```
仓库：[examples/sidebar-shadcn](https://github.com/extension-js/examples/tree/main/examples/sidebar-shadcn)
## 检测和配置文件
Extension.js 会检查以下 PostCSS 配置文件：
* `.postcssrc`
* `.postcssrc.json`
* `.postcssrc.yaml`
* `.postcssrc.yml`
* `postcss.config.mjs`
* `.postcssrc.js` / `.postcssrc.cjs`
* `postcss.config.js` / `postcss.config.cjs`
它也能识别 `package.json` 中的 `postcss` 配置。
## 在现有扩展中使用 PostCSS
安装 PostCSS 依赖：
### 创建 `postcss.config.js`
```js theme={null}
export default {
plugins: {
autoprefixer: {},
},
};
```
## 用法
在扩展页面中按常规方式导入样式：
```ts theme={null}
import "./styles/globals.css";
```
对于 content script，在 content script 入口里用同样的方式导入：
```ts theme={null}
import "./styles/content.css";
```
Extension.js 在这两种上下文中都会应用 PostCSS，但打包方式不同（页面走 `css` 管线，content script 走资源管线）。
## 与 Tailwind 的相互作用
* 检测到 Tailwind 时，Extension.js 可以自动触发 PostCSS 设置。
* Extension.js 同时支持 Tailwind v3 和 v4，会根据检测到的版本选择相应插件。
* 在 ECMAScript 模块（ESM）项目里，如果 PostCSS 配置使用了不兼容的 CommonJS（CJS）模式，Extension.js 可能会绕过你的配置，转而注入兼容性插件。
## 最佳实践
* 让插件链保持精简、显式（例如 `autoprefixer`、`postcss-preset-env`）。
* 确认配置文件格式（`.mjs`/`.cjs`）与项目的 module type 一致。
* 让 Tailwind 与 PostCSS 的版本保持对齐，以避免插件解析错配。
* 优先使用共享的样式入口文件，让各个扩展界面的处理结果保持一致。
## 下一步
* 配合 PostCSS 配置 [Tailwind CSS](/docs/integrations/tailwindcss)。
* 用 [Stylelint](/docs/integrations/stylelint) 给样式表做 lint。