tailwind-v4-shadcn - 配置 Tailwind CSS v4 与 shadcn/ui
配置结合 Vite 和 React 的 Tailwind CSS v4 与 shadcn/ui，包括 CSS 变量、语义颜色、深色模式、插件和故障排查。
标签
更新于: 2026-09-29能力
典型输入
典型输出
该技能可以做什么
- 安装 Tailwind 依赖
- 配置 Vite 插件
- 设置 shadcn/ui
- 定义 CSS 颜色变量
- 使用 @theme inline 映射变量
- 配置深色模式
- 应用语义颜色令牌
- 排查主题问题
- 配置 Tailwind 插件
输入
- React 项目
- Vite 项目文件
- 包管理器
- 主题需求
- 颜色定义
输出
- 更新后的包依赖
- 更新后的 vite.config.ts
- 更新后的 components.json
- 更新后的 CSS 主题变量
- ThemeProvider 集成
- 深色模式主题切换
- 配置后的 Tailwind 工具类
要求
- React 和 Vite 环境
- TypeScript 支持
- Node 包管理器
- 文件系统访问权限
- 安装依赖的权限