用途:把 Material Design 3(M3)的设计令牌接入 Tailwind CSS,以工具类(utility-first)方式使用 M3 视觉语言,无需切换到组件库。
主要能力:提供两种接入途径。一是插件方式,安装 tailwind-material-3,在 tailwind.config.js 的 plugins 中引入后即可作为 Tailwind 工具类使用 M3 令牌;二是手动映射,将 M3 令牌(如 --color-primary、--color-on-primary、--color-surface 等)定义为 CSS 自定义属性,再在 theme.extend.colors 中以 var(--color-xxx) 引用,同时可扩展 borderRadius 得到 md3-xs 到 md3-full 的圆角刻度。
使用方式:插件方式执行 npm install tailwind-material-3,并在配置中 require 该插件;手动方式编写 globals.css 的 :root 变量与 tailwind.config.js 映射。官方资料还给出填充按钮、卡片、描边输入框、芯片等组件的类组合,并附带检查清单:颜色令牌已映射、圆角刻度已添加、暗色主题用 CSS 自定义属性覆盖、组件使用语义化令牌类、悬停/聚焦/禁用状态使用 M3 透明度值。
适用场景:已使用 Tailwind CSS 且希望采用 M3 设计语言的项目;需要工具类而非组件库的团队。
限制:资料仅给出颜色与圆角示例,未说明完整令牌体系、主题生成、构建兼容性或性能表现;具体平台支持与版本要求暂未提供。