Next.js (Material UI, Tailwind CSS)
基于Next.js框架，集成Material UI与Tailwind CSS的开发脚手架
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：Next.js (Material UI, Tailwind CSS)。 它的用途是：基于Next.js框架，集成Material UI与Tailwind CSS的开发脚手架 详细介绍见：https://321skill.com/skills/next-js-material-ui-tailwind-css/ 请根据该页面的说明完成安装。
使用示例
“我需要创建一个新的管理后台项目，使用Next.js，并希望同时用上Material UI的组件和Tailwind CSS的样式工具。”，它会引导你使用这个Skill的安装命令，快速生成一个配置好的项目骨架，里面已经包含了集成的主题、示例页面和必要的依赖，你可以直接开始开发业务模块。
介绍
这个Skill解决了开发者在启动新Web项目时，需要手动集成多个流行前端框架和工具链的繁琐问题。它提供了一个预配置的Next.js项目模板，无缝结合了Material UI的组件库和Tailwind CSS的实用类样式系统。
使用时，开发者只需通过简单的安装命令即可获得一个开箱即用的项目基础，内置了两种UI方案的集成配置、示例代码和最佳实践，允许开发者立即开始编写业务代码，而无需花费时间在环境搭建和兼容性调试上。
它非常适合希望快速启动现代化、响应式Web应用的前端或全栈开发者，特别是那些同时欣赏Material UI的组件化设计和Tailwind CSS高效样式开发体验的团队。
建议在项目初期就使用此Skill来统一团队的技术栈和代码风格。需要注意的是，虽然它集成了两种方案，但开发者仍需根据项目复杂度，决定是以Material UI为主还是以Tailwind CSS为主，避免样式规则冲突或过度设计。
核心特点
它并非简单的框架堆砌，而是深度整合了Material UI与Tailwind CSS，解决了二者在Next.js项目中常见的主题定制、服务端渲染样式冲突等痛点，提供了经过验证的协同工作方案。
注意事项
不适合仅需单一UI方案（纯Material UI或纯Tailwind CSS）或对项目构建工具有特殊定制要求的极简场景。
常见问题
这个模板支持TypeScript吗？
是的，默认提供完整的TypeScript配置和类型支持。
如何自定义主题？
模板已预置了统一的主题配置入口，可以同时修改Material UI主题和Tailwind CSS的配置变量。