SuperAPI AI 工具集

vite-shadcn-tailwind4

前端与建站

查看项目

更新于 10-15 22:17

技能介绍

用途:在 Vite 项目中初始化 shadcn/ui 与 Tailwind CSS v4。该技能明确仅针对 Vite,Next.js、Remix 等其他框架必须使用各自的 shadcn 安装指南。

主要能力:协助完成 Vite 项目搭建、shadcn 组件安装与相关配置;在运行 shadcn CLI 前,可通过提问工具澄清组件选择、样式偏好与可选 AI 元素(批量规则:仅用于 2 个及以上相关问题,单个问题用纯文本;标题不超过 12 字符,标签 1-5 词,默认项标注 Recommended)。

必要用法:若缺少前置条件,需先帮助用户配置 Tailwind v4。需更新 tsconfig.json,加入 files、references(./tsconfig.app.json、./tsconfig.node.json)以及 compilerOptions 的 baseUrl 与 paths(@/* 指向 ./src/*)。Vite 配置需引入 @tailwindcss/vite 与 path,在 plugins 中加入 tailwindcss(),并设置 @ 别名指向 ./src。推荐设置:Style 选 New York,Base Color 选 Neutral 或 Zinc,CSS Variables 选 Yes;每步需等待用户确认。建议用户全选组件(a 然后 Enter),并在覆盖提示中全部回答 NO,均需等待确认。

依赖:tw-animate-css(devDep,v4 中替代 tailwindcss-animate)、tailwind-merge、clsx、class-variance-authority。缺失时运行:npm install tailwind-merge clsx class-variance-authority 与 npm install -D tw-animate-css。

样式配置:CSS 中需 @import "tailwindcss" 与 @import "tw-animate-css",定义 @custom-variant dark、@theme inline、:root 与 .dark 的 oklch 令牌,以及 @layer base 的 border-border、outline-ring/50、bg-background、text-foreground。需移除 @media (prefers-color-scheme) 块、重复的 @theme 块(仅保留 @theme inline)和 @config 指令。完成前必须修复所有 TypeScript 错误。

限制:仅适用于 Vite;其他框架不适用。资料未提供收费、价格、平台与效果信息。