# @aphrody/m3-tailwind 中文文档

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

版本：1\.4\.7
npm 元数据更新时间：2026-10-23T03:52:08.976Z
中文译文更新时间：2026-11-06T09:33:45.054Z
软件包许可：Apache-2\.0

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

原始 npm 页面：https://www.npmjs.com/package/%40aphrody/m3-tailwind
原文对照：https://npmcn.com/package/%40aphrody/m3-tailwind/?lang=original
项目主页：https://github.com/aphrody-labs/bun-distribution/tree/os/packages/m3-tailwind#readme
源码仓库：https://github.com/aphrody-labs/bun-distribution

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

- 包体积（解压后）：78.4 kB，6 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：tailwindcss ^4\.0\.0
- 首次发布：2026-10-05T08:05:06.551Z
- 最新版本发布：2026-10-23T03:52:08.755Z
- 近 30 天下载量：4047（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：7（近 12 个月 7 个）

## 中文简介

Tailwind v4 CSS- first preset for Matery 3: 从@aphody/m3-tokens 生成 @主题(颜色角色,形状,打字尺度,升起,放轻松).

## 安装

```sh
npm install @aphrody/m3-tailwind
```

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

## README

# @aphrody/m3-尾风

尾风 v4 CSS - 材3: 第一套预置: 1 `@import`没有 JS 插件, 没有配置文件 .

```sh
bun add @aphrody/m3-tailwind @aphrody/m3-tokens tailwindcss
```

```css
@import "tailwindcss";
@import "@aphrody/m3-tokens/m3-tokens.css";
@import "@aphrody/m3-tokens/expressive.css";
@import "@aphrody/m3-tailwind/preset.css";
```

许可证: Apache-2.0(`LICENSE`) (中文(简体) ). 安装指南 : [文件/材料/立方米/INSTALL.md](https://github.com/aphrody-labs/bun-distribution/blob/os/docs/material/m3/INSTALL.md)。 。 。 .

`preset.css` 从 `@aphrody/m3-tokens` (作用、角尺度、类型、断点、弹簧和方向) 从 TypeScript 表格中的形状; 从 `m3-tokens.css`) (中文(简体) ).

颜色值设定在运行时( E)`applyDynamicColor`, (中文(简体) ), `<m3-theme>`, (中文(简体) ), `M3Html` 内 `@aphrody/m3-next`) (中文(简体) ).

和Bun在一起的时候, `@aphrody/bun-plugin-tailwind` 增加这些进口品,并自行制定种子颜色方案: `tailwind({ theme: "m3" })` (或 `{ theme: { seed: "#0b57d0" } }`),并且其PostCSS插件上的相同选项.

## 上面写的

| 家属 | 主题密钥( E)`@theme inline`(中文(简体) ) | 公用事业和变种 |
| --- | --- | --- |
| 颜色( 所有49个角色) | `--color-*` | `bg-primary`, (中文(简体) ), `text-on-surface`, (中文(简体) ), `border-outline-variant`, (中文(简体) ), `hover:bg-on-surface/8` |
| 形状 | `--radius-*`, (中文(简体) ), `--shape-*` | `rounded-large`, (中文(简体) ), `shape-extra-large-top`, (中文(简体) ), `shape-large-start` (简体中文) |
| 类型 | `--text-*` (15个基地+15个,有线高、跟踪、重量), `--font-*` | `text-body-large`, (中文(简体) ), `text-title-small-emphasized`, (中文(简体) ), `typescale-label-large` (亦为出家所出), `font-brand` |
| 电梯 | `--shadow-elevation-0..5` | `shadow-elevation-2` |
| 动议 | `--ease-*`, (中文(简体) ), `--transition-duration-*`弹簧 `linear()` 放松和结算时间 | `ease-emphasized`, (中文(简体) ), `duration-medium2`, (中文(简体) ), `ease-spring-expressive-fast-spatial`, (中文(简体) ), `motion-default-effects` (一个类别中的缓解和持续时间) |
| 状态 |  | `state-layer`, (中文(简体) ), `state-layer-primary` (俯视、聚焦、按住、拖曳;荣誉UI) `data-highlighted`, (中文(简体) ), `data-pressed`, (中文(简体) ), `data-disabled`(中文(简体) ) |
| 适应性 | `--breakpoint-*` | `compact:`, (中文(简体) ), `medium:`, (中文(简体) ), `expanded:`, (中文(简体) ), `large:`, (中文(简体) ), `extra-large:`, (中文(简体) ), `h-compact:`, (中文(简体) ), `h-medium:`, (中文(简体) ), `h-expanded:` |
| 计划 |  | `dark:` 如下 `.dark`,或操作系统,除非 `.light` 轻力 |
| 基准UI状态 |  | `m3-open:`, (中文(简体) ), `m3-on:`, (中文(简体) ), `m3-highlighted:`, (中文(简体) ), `m3-disabled:`, (中文(简体) ), `m3-invalid:`, (中文(简体) ), `m3-enter:`, (中文(简体) ), `m3-exit:`, (中文(简体) ), `m3-vertical:`, (中文(简体) ), `m3-horizontal:` |

`@theme inline` 表示一个变量只在公用设备使用时才会被排放,因此预设的成本字节与什么成正比 应用程序写入( 见 `docs/reports/M3-NEXT-BUNDLE.md`) (中文(简体) ). `themeCss({ keepUnused: true })` 发射 `@theme static`。 。 。 .

泉道:CSS没有泉道松动,而一个立方位贝子不能过度射出,所以每个泉道令牌(打出比分,硬度)是: 取样到33站 `linear()` 及其结算时间(`src/spring.ts`);可表达空间弹簧保持回弹.

`bun run generate` 重写 `preset.css`; 测试是最新的, 预设的每个符号都存在于 符号表,每个家庭编译一个工具 `@tailwindcss/node` 从根目录。 上游源头 `vendor/tailwindcss`;地方叶子、货物/国家产品和工艺品的整合仍不合格。 消费者目前使用已安装的目录包,而不是源树.

`bun test test/`, (中文(简体) ), `bun run typecheck`。 。 。 .

## 常见问题

### @aphrody/m3-tailwind 是什么？

Tailwind v4 CSS- first preset for Matery 3: 从@aphody/m3-tokens 生成 @主题\(颜色角色,形状,打字尺度,升起,放轻松\)\.

### 如何安装 @aphrody/m3-tailwind？

在项目目录运行 npm install @aphrody/m3-tailwind，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：tailwindcss（^4\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @aphrody/m3-tailwind 支持 TypeScript 吗？

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

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

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

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

@aphrody/m3-tailwind 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

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

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

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

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