SuperAPI AI 工具集

tailwind-shadcn-ui-setup

前端与建站

查看项目

更新于 10-15 22:14

技能介绍

用途:在 Next.js 16 App Router 项目中搭建生产可用的 Tailwind CSS(v3/v4)与 shadcn/ui 环境,覆盖依赖安装、配置、组件生成与文档说明。

主要能力:自动检测已有 Tailwind/shadcn 安装;非交互安装 npm 依赖;创建 components.json;添加 button、card、input、label、dialog、separator 等基础组件;生成 lib/utils.ts 的 cn() 辅助函数;提供 Tailwind v4 就绪配置(v3 采用向前兼容模式);基于 Radix UI 的 shadcn/ui 组件;通过 next-themes 实现 class 策略暗色模式;响应式头部与可选侧边栏布局;CSS 变量设计令牌;WCAG 2.1 AA 无障碍默认值;表单、对话框、主题展示等示例页面。

使用方式:先确认项目存在 app/ 目录、根目录有 package.json、使用 npm 与 TypeScript。运行 python scripts/setup_tailwind_shadcn.py 执行安装与初始化,再复制 assets/ 下的配置与组件模板(如 tailwind.config.ts、postcss.config.js、globals.css、theme-provider.tsx、mode-toggle.tsx、app-shell.tsx),按需替换 {{THEME_PRESET}} 为 zinc、slate 或 neutral。可用 npx shadcn-ui@latest add [component-name] 追加组件,用 npx tsc --noEmit 与 npm run dev 验证。

适用场景:Next.js 16 App Router 新项目或需要统一 UI 基础的项目,尤其适合需要暗色模式、语义化设计令牌与无障碍支持的场景。

限制:资料未提供具体收费、价格与平台信息;脚本假定使用 npm 与 TypeScript;Tailwind v4 需先确认版本,若不可用则采用 v3 向前兼容模式;示例页面与侧边栏为可选,需用户选择;未提供其他包管理器或非 App Router 项目的支持说明。