用途:为已有 TypeScript 项目(Next.js、Vite 或独立 React)添加并配置 Tailwind CSS,包括自定义主题、工具类与类型安全的样式模式。
主要能力:安装 Tailwind 及 PostCSS 依赖;生成并配置 tailwind.config.ts(content 路径、theme.extend 自定义颜色/字体/间距);设置全局样式(@tailwind base/components/utilities 及 @layer 自定义);通过 clsx 与 tailwind-merge 封装 cn() 实现类名合并;配置暗色模式(class 或 media);可选安装 @tailwindcss/typography、@tailwindcss/forms 插件。
使用方式:先安装依赖,如 npm install -D tailwindcss @tailwindcss/postcss postcss;Next.js 可用 npm install -D tailwindcss postcss autoprefixer 与 npx tailwindcss init -p 生成配置。随后编辑 tailwind.config.ts 设置 content 与 theme.extend,在 globals.css 写入 Tailwind 指令,创建 src/lib/cn.ts(需 npm install clsx tailwind-merge),按需添加暗色模式与插件。
适用场景:为现有 TS 项目引入 Tailwind、按设计系统定制主题、建立类型安全的组件样式约定、配置插件扩展。
限制与注意:content 路径需匹配实际目录,否则类名不生效;自定义值应放在 extend 下以免覆盖默认值;暗色模式需在 html 元素切换 dark 类;修改配置后需重启开发服务器。资料未提供具体版本号、性能数据或收费信息。