SuperAPI AI 工具集

tailwind-v4-shadcn

前端与建站

查看项目

更新于 10-16 09:33

技能介绍

用途:在 Vite + React(TypeScript)项目中按生产验证过的模式搭建 Tailwind CSS v4 与 shadcn/ui,供 AI 编码助手在初始化此类项目时优先加载,减少试错。

主要能力:给出四步架构——在 :root 与 .dark 根部用 hsl() 定义 CSS 变量、用 @theme inline 映射为工具类、在 @layer base 引用未包裹变量、由此获得自动暗色模式;提供暗色模式 ThemeProvider 与切换组件做法;列出自定义语义色令牌(destructive、success、warning、info);提示禁止项:不使用 tailwind.config.ts、不安装 tailwindcss-animate 与 tw-animate-css、不用 @apply、不用嵌套 @theme、不双重包裹 hsl()、插件用 @plugin 指令而非 @import。附文件模板(index.css、components.json、vite.config.ts、tsconfig.app.json、theme-provider.tsx、utils.ts)与排错清单。

必要用法:安装 bun add tailwindcss @tailwindcss/vite 与 bun add -d @types/node,用 pnpm dlx shadcn@latest init 初始化(避开 Bun 兼容问题),components.json 中设 "config": "",并删除 tailwind.config.ts。

适用场景:新建或迁移 Tailwind v4 + shadcn/ui 的 React/Vite 前端工程。限制:作者称基于 WordPress Auditor 项目在生产验证,但未提供公开基准数据;其余平台与价格信息暂未提供。