SuperAPI AI 工具集

tailwind-shadcn-setup

前端与建站

查看项目

更新于 10-16 05:47

技能介绍

用途:在 Next.js 项目中完成 Tailwind CSS 与 shadcn/ui 的安装、配置、主题化、暗色模式与组件集成,遵循现代最佳实践。

主要能力:安装 Tailwind CSS、PostCSS、Autoprefixer 并生成 tailwind.config.ts 与 postcss.config.mjs;初始化 shadcn/ui,生成 components.json、lib/utils.ts、app/globals.css 及基础组件结构;通过 CSS 变量配置设计令牌(主色、背景/前景、边框、输入、环、静音、破坏性、卡片、弹出层、图表 chart-1 至 chart-5、侧边栏颜色),使用 OKLCH 色彩空间并区分明暗模式;配置基于 class 或系统的暗色模式,提供主题 Provider 与切换组件;按需添加 shadcn/ui 组件(如 button、card、input、form、dialog 等)。

使用方式:可运行脚本 bash ./skills/tailwind-shadcn-setup/scripts/install-tailwind.sh、init-shadcn.sh、setup-theme.sh、setup-dark-mode.sh;或手动执行 npm install -D tailwindcss postcss autoprefixer、npx tailwindcss init -p、npx shadcn@latest init、npx shadcn@latest add button 等命令。模板可复制,如 cp ./skills/tailwind-shadcn-setup/templates/globals.css app/globals.css。

适用场景:新建或已有 Next.js 13.4+ 项目(App Router 或 Pages Router)、React 18+、Node.js 18.17+ 或 20+,需统一 UI 样式、支持主题切换或表单密集型应用。

限制:需 TypeScript(推荐)、现代包管理器;暗色模式依赖 next-themes 与客户端 Provider;shadcn/ui 组件复制到代码库而非依赖;具体收费、价格、平台与效果资料暂未提供。