关于 material-ui-tailwind
为使用 Material UI 和 Tailwind CSS 的 Agent 提供配置与样式排查指南，涵盖 v3、v4、Next.js 和 Vite 等设置场景。
主要功能
- 01排查 Tailwind 与 MUI 的优先级冲突
- 02配置 v4 的 CSS 图层顺序
- 03设置 Next.js 与 Vite 集成
- 04说明组件 className 用法
- 05提供 v3 迁移注意事项
适用场景
- 01解决 Tailwind 样式无法覆盖 MUI 的问题
- 02配置 Next.js 或 Vite 项目的样式层
- 03迁移旧版 Tailwind 与 MUI 设置
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/material-ui-tailwind确认已加载。
包含的文件
除 SKILL.md 外，安装时一起下载的参考资料和脚本。
AGENTS.mdmetadata.jsonREADME.mdreference.md详细介绍
Material UI 和 Tailwind CSS
适用于 MUI + Tailwind 的 Agent 技能。SKILL.md 是入口；AGENTS.md 是完整指南。
适用场景
- Tailwind 工具类无法覆盖 MUI（优先级 / 图层顺序）
- 使用 Next.js App 或 Pages Router，或 Vite 设置 v4
- 在 MUI 组件上使用
className/slotProps.*.className - 将
--mui-*变量映射到 Tailwind@theme - 旧版 v3 设置或迁移
AGENTS.md 中的章节
| 领域 | 主题 |
|---|---|
| v4 | @layer 顺序，mui 在 utilities 之前 |
| Next.js | enableCssLayer、Pages GlobalStyles + 共享缓存 |
| SPA | StyledEngineProvider + enableCssLayer |
| 用法 | 根元素与插槽的 className |
@theme | 文档网站上的完整代码片段；需要 cssVariables |
| IntelliSense | VS Code classRegex |
| v3 | preflight、important、injectFirst、门户 |
完整指南
阅读 AGENTS.md。复制粘贴代码片段：reference.md。
评论
支持 Markdown