# @aphrody/bun-plugin-tailwind 中文文档

规范地址：https://npmcn.com/package/%40aphrody/bun-plugin-tailwind/

版本：1\.4\.7
npm 元数据更新时间：2026-10-23T02:17:33.680Z
中文译文更新时间：2026-11-06T15:43:10.212Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40aphrody/bun-plugin-tailwind
原文对照：https://npmcn.com/package/%40aphrody/bun-plugin-tailwind/?lang=original

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：33.7 kB，8 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：6 个
- peer 依赖：postcss ^8
- 首次发布：2026-10-08T22:15:34.253Z
- 最新版本发布：2026-10-23T02:17:33.477Z
- 近 30 天下载量：2862（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：10（近 12 个月 10 个）

## 中文简介

Bun: Bun. building、 HTML dev 服务器和 Bun. serve、 同一引擎上的 PostCSS 插件和 材料 3 预设

## 安装

```sh
npm install @aphrody/bun-plugin-tailwind
```

也可以使用：`pnpm add @aphrody/bun-plugin-tailwind`、`yarn add @aphrody/bun-plugin-tailwind`、`bun add @aphrody/bun-plugin-tailwind`

## README

# @aphrody/bun-plugin-尾风

Bun 的尾风 CSS v4, 打开 `@tailwindcss/node` 和有节点的氧化物扫描仪:

-   `Bun.build` 插头, `Bun.serve` HTML 导入和 `bun ./index.html` dev 服务器( 有热重装) ,
-   同一引擎上的 PostCSS 插件 (`@aphrody/bun-plugin-tailwind/postcss`用于涡轮包装、网络包装和Vite,
-   a 材料3预设(`theme: "m3"`从 `@aphrody/m3-tokens` 财务报告和审定财务报表 `@aphrody/m3-tailwind`。 。 。 .

```sh
bun add -d @aphrody/bun-plugin-tailwind
```

`tailwindcss` 本身不需要安装 : `@import "tailwindcss"` 从项目中解析,然后 从插件本身的依赖性.

## Bun. 建设

```ts
import tailwind from "@aphrody/bun-plugin-tailwind";

await Bun.build({
  entrypoints: ["./index.html"],
  outdir: "./dist",
  plugins: [tailwind],
});
```

```css
/* style.css */
@import "tailwindcss";
```

使用 Tailwind 特性的任何样式表都会编译 : `@import "tailwindcss"`, (中文(简体) ), `@source` (包括 `not` 财务报告和审定财务报表 `inline(…)`, (中文(简体) ), `@plugin`, (中文(简体) ), `@config` (Tailwind v3 JavaScript configs), (简体中文), `@theme`, (中文(简体) ), `@utility`, (中文(简体) ), `@variant`, (中文(简体) ), `@custom-variant`, (中文(简体) ), `@apply`, (中文(简体) ), `@reference` 财务报告和审定财务报表 `theme()`其他样式表留给 Bun .

班级候选人来自两个地方:

1.  Tailwind 的自动源代码检测 `root` (或工作目录),荣誉 `.gitignore`,加上每个 `@source`。 。 。 .
2.  每个文件的构建负载(JavaScript, TypeScript, HTML, Vue, Svelte, Astro, MDX, .), 所以分类为 a gi或 `node_modules` 应用程序导入的组件也找到 .

## Dev 服务器

```toml
# bunfig.toml
[serve.static]
plugins = ["@aphrody/bun-plugin-tailwind"]
```

```sh
bun ./index.html
```

相同的设置适用于服务于 HTML 的导入 `Bun.serve({ routes: { "/": html } })`在发展过程中,编辑a 源文件重建样式表并热重装; 编辑样式表、 a `@plugin` 或一个 `@config` 文件 重编该根.

## 选项

```ts
import { tailwind } from "@aphrody/bun-plugin-tailwind";

tailwind({
  base: import.meta.dir, // automatic source detection root (default: build root, else cwd)
  sources: ["../ui/src/**/*.tsx", "!**/*.test.tsx"], // extra sources, `!` excludes
  optimize: true, // Lightning CSS pass (`optimize` of @tailwindcss/node); `{ minify: false }` to keep it readable
  minify: true, // shorthand for `optimize: { minify: true }`
  sourcemap: true, // inline source map to the original stylesheets
  moduleGraph: { exclude: /node_modules/ }, // or `false` to scan only the sources
  theme: "m3", // Material 3 preset, see below
  schemeImport: id => sheets[id], // CSS of `@import "m3:theme.css"`-style imports, compiled with the root
});
```

`Bun.build({ minify: true })` 已修改 CSS Bun 输出; `optimize` 用于插件本身的输出(用于 以 PostCSS 插件为例. `sourcemap` 默认为建筑 `sourcemap` 选项: `Bun.build({ sourcemap: "linked" })` (或 `"external"`, (中文(简体) ), `"inline"`),邦用自己的图作"Tailwind",所以CSS 在您的样式表和Tailwind的地图点.

一个 `@import` 用于另一个插件方案`@import "m3:theme.css";`继续导入捆绑者通过 插件,所以Tailwind 从来没有看到它的内容。 当内容保持 `@theme`, (中文(简体) ), `@utility` 或者说 `@apply`,通过 `schemeImport(id, importer)`: 它返回的 CSS 在编译前替换每个无条件的导入( 重复 , 周期是错误; `undefined` 继续输入.

## PostCSS(带涡轮包装或网络包装的下部js,维特)

```js
// postcss.config.mjs
export default {
  plugins: {
    "@aphrody/bun-plugin-tailwind/postcss": {},
  },
};
```

它的选项与 Bun 插件相同(但 `moduleGraph`),报告其读取的文件和目录 邮政 `dependency` 编号 : `dir-dependency` 消息,所以主机在变化中重建,并链接其源地图. 有用吗 在节点js下`dist/`,ES模块和CommonJS).

在下一个Js应用程序中, `@aphrody/next-bun` 使用 Bun 插件构建时 `Bun.build` (单位:千美元)`withBun`)和涡轮包装 使用 PostCSS 插件.

## 材料3

```ts
tailwind({ theme: "m3" });
tailwind({
  theme: { seed: "#0b57d0", variant: "vibrant", contrastLevel: 0.5 },
});
tailwind({ theme: { seed: false } }); // colours set at runtime (applyDynamicColor, <m3-theme>, M3Html)
```

`theme` 添加,紧接着 `@import "tailwindcss"`,由Aphrody M3出版的床单:

| 选项 | 工作表 | 给 |
| --- | --- | --- |
| `tokens` | `@aphrody/m3-tokens/m3-tokens.css` | `--md-sys-*` 运动、高地、状态、形状符号 |
| `expressive` | `@aphrody/m3-tokens/expressive.css` | M3 外形和弹簧 |
| `preset` | `@aphrody/m3-tailwind/preset.css` | `bg-primary`, (中文(简体) ), `text-body-large`, (中文(简体) ), `rounded-large`, (中文(简体) ), `shadow-elevation-2`,, , , , , , , , |
| `seed` | 生成 | 第49条 `--md-sys-color-*` 轻而易举的角色和黑暗`.dark`操作员, `.light`(中文(简体) ) |

每个默认值继续;种子默认值为 M3 基线 `#6750A4`。 。 。 . `@aphrody/bun-plugin-tailwind/m3` 出口 `m3SchemeCss(seed, options)` 财务报告和审定财务报表 `m3Prelude(theme)` 用于其他工具.

## API 密码

`@aphrody/bun-plugin-tailwind/core` 出口 `TailwindRoot`,引擎两个插件都使用:

```ts
import { TailwindRoot } from "@aphrody/bun-plugin-tailwind/core";

const root = new TailwindRoot("src/style.css", process.cwd(), {
  sourcemap: true,
});
const { css, map, dependencies, globs, scannedFiles } = await root.generate(
  await Bun.file("src/style.css").text(),
);
```

当样式表、导入样式表、 a 插件或配置已更改 .

## 比较 `bun-plugin-tailwind`

所有的东西 `bun-plugin-tailwind` 由 Tailwind Labs 发布的软件包 候选者,在变化上重建,dev服务器),外加:命名为有选项的工厂, `sources`, (中文(简体) ), `moduleGraph` 控制, 闪电CSS `optimize`编号 :`minify`,源地图,仅使用根 `@theme`编号 :`@variant`, (中文(简体) ), `tailwindcss` 已解决 在不安装的情况下, PostCSS 插件和一个普通JS/Node.js 构建,以及材料 3 预设. 它利用公众 `@tailwindcss/oxide` 软件包,而不是捆绑的本地加通,所以它运行在 Oxide 有预建二进制的地方 .

## 测试

```sh
bun test test/integration/bun-plugin-tailwind/
```

## 常见问题

### @aphrody/bun-plugin-tailwind 是什么？

Bun: Bun\. building、 HTML dev 服务器和 Bun\. serve、 同一引擎上的 PostCSS 插件和 材料 3 预设

### 如何安装 @aphrody/bun-plugin-tailwind？

在项目目录运行 npm install @aphrody/bun-plugin-tailwind，或使用 pnpm add / yarn add / bun add。

### @aphrody/bun-plugin-tailwind 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @aphrody/bun-plugin-tailwind 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @aphrody/bun-plugin-tailwind 可以商用吗？

@aphrody/bun-plugin-tailwind 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @aphrody/bun-plugin-tailwind 的下载量有多少？

根据 npm 官方下载统计，@aphrody/bun-plugin-tailwind 在 2026/10/06 – 2026/11/04 这 30 天内被下载 2,862 次，日均约 95 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @aphrody/bun-plugin-tailwind 还在维护吗？

最新版本 1\.4\.7 发布于 2026/10/23（15 天前）；至今共发布 10 个版本，其中过去 12 个月发布了 10 个；首次发布于 2026/10/09。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。