tailwindcss-framework-integration - Tailwind CSS 与 React、Vue、Next.js 等框架集成指南
提供 Tailwind CSS 与 React、Vue、Next.js、Svelte、Angular、Astro、Remix 等框架集成的分框架配置步骤、内容配置、暗色模式设置及类名合并方案。
标签
更新于: 2026-06-30能力
典型输入
典型输出
该技能可以做什么
- 安装 Tailwind CSS 依赖包
- 配置 Vite 或 PostCSS 插件
- 导入 Tailwind CSS 样式表
- 设置暗色模式变体
- 创建可复用样式组件
- 合并条件 CSS 类名
- 配置路径别名
- 设置 SSR 安全的类名组合
输入
- 项目目录
- 包管理器（npm、pnpm、yarn）
- 框架项目（React、Vue、Next.js、Svelte、Astro、Remix）
- Vite 或 PostCSS 配置文件
- tsconfig.json
输出
- 已安装的 Tailwind CSS 依赖
- 包含 Tailwind 插件的框架配置文件
- 带有 Tailwind 导入的 CSS 入口文件
- 暗色模式配置与主题提供者设置
- 可复用组件代码示例
- Prettier 与 VS Code 扩展配置
要求
- Node.js 运行环境
- npm 或兼容的包管理器
- 受支持的前端框架项目
- Vite 或 PostCSS 构建环境