tailwindcss-framework-integration

用途

本技能用于把 Tailwind CSS 集成进各类前端框架与元框架，覆盖 React（Vite、CRA）、Vue 3、Next.js（App Router）、Svelte / SvelteKit、Angular、Nuxt 3、Astro、Remix 等技术栈，并给出跨框架的工程化最佳实践。

主要能力

• 按框架给出项目创建与依赖安装命令，例如 React + Vite 使用 npm install -D tailwindcss @tailwindcss/vite，Next.js 使用 npm install -D tailwindcss @tailwindcss/postcss。
• 提供 Vite 插件与 PostCSS 两种集成方式的配置示例，包括 vite.config.ts、postcss.config.mjs。
• 演示 CSS 入口导入写法 @import "tailwindcss";，以及通过 @theme 定义主题变量、通过 @custom-variant dark 添加深色模式变体。
• 为各框架给出一致的按钮组件示例，展示带 variant 与 size 的类名组合。
• 覆盖框架特有场景，如 Next.js 的 Server Components 与 next-themes 深色模式、Vue 的 scoped 样式处理、Nuxt 的 nuxt.config.ts 引入方式、Astro 的 astro add tailwind、Remix 的 ?url 样式链接方式。
• 汇总跨框架最佳实践：Prettier 类名排序插件、VS Code 扩展、抽取可复用组件、使用 clsx 与 tailwind-merge 处理条件类名、配置 tsconfig 路径别名。

使用方式

1. 按目标框架执行对应的项目创建与安装命令。
2. 按文档修改构建配置（Vite 插件或 PostCSS）与 CSS 入口文件。
3. 在应用入口（如 main.tsx、main.ts、+layout.svelte、Layout.astro、root.tsx）引入样式文件。
4. 在组件中按示例使用 Tailwind 工具类，按需抽取可复用组件。
5. 可选：安装 Prettier 插件与 VS Code 扩展，并引入 clsx / tailwind-merge 工具函数 cn。

框架专项要点

• React + Vite：vite.config.ts 中注册 react() 与 tailwindcss() 插件，src/index.css 中 @import "tailwindcss";，src/main.tsx 引入样式。
• Next.js：App Router 默认包含 Tailwind，也可用 PostCSS 方式手动添加；深色模式可配合 next-themes 与 @custom-variant dark；Tailwind 与 React Server Components 兼容。
• Vue 3：在 vite.config.ts 中注册 vue() 与 tailwindcss()；scoped 样式可用 @reference 或直接使用 CSS 变量（文档称后者性能更好）。
• Nuxt 3：通过 PostCSS 配置并在 nuxt.config.ts 的 css 字段引入样式。
• SvelteKit：vite.config.js 中注册 sveltekit() 与 tailwindcss()，在 +layout.svelte 引入样式。
• Astro：可用 npx astro add tailwind 或手动在 astro.config.mjs 的 vite 插件中加入 tailwindcss。
• Remix：在 vite.config.ts 中注册 remix() 与 tailwindcss()，在 root.tsx 中通过 links 与 ?url 引入样式。

适用场景

需要在已有或新建前端项目中统一引入 Tailwind CSS，并希望获得与具体框架匹配的安装、配置与组件写法参考时适用，尤其适合同时维护多种框架技术栈的团队。

限制与暂未提供

资料中未说明该技能的版本要求、支持的最低框架或 Node.js 版本、Angular 的具体配置示例、性能与体积数据、收费或授权信息；这些事实暂未提供。