该技能面向 TailwindCSS v4 与 SSR 场景，帮助处理配置、样式交付与性能问题。
用途 在配置 TailwindCSS、实现 SSR/SSG 样式策略、优化关键 CSS、预防 FOUC、解决样式性能问题时使用。适用于使用 SvelteKit、Next.js、Nuxt 等框架并需要服务端渲染样式的前端项目。
主要能力
- 版本与上下文识别：区分 TailwindCSS v3 与 v4，识别框架、渲染模式（SSR、SSG、SPA、混合）与构建工具（Vite、Webpack、Turbopack）。
- 问题分类：将问题归为配置、SSR、性能或设计系统，并给出对应排查方向。
- 配置分析：v4 使用 @import "tailwindcss" 与 @theme 令牌；v3 使用 tailwind.config.js 的 content 与 theme.extend。v4 自动检测内容，可用 @source 手动覆盖。
- SSR 样式策略：确保首屏所需 CSS 正确加载，给出 SSR 时间线与检查清单，说明 SvelteKit、Next.js、Nuxt 的 CSS 导入位置。
- FOUC 预防：区分 CSS 异步加载、动态类、字体加载、主题切换等原因，提供内联关键 CSS、预加载、主题检测脚本等模式。
- 性能优化：内容检测、关键 CSS 提取与内联、非关键 CSS 延迟、字体优化、禁用未使用核心插件、构建体积分析。
- 主题与设计令牌：使用 @theme 定义颜色、语义令牌、间距，支持系统偏好、类切换或混合暗色模式策略。
- 故障排查：类不生效、导航时 FOUC、水合不匹配、构建慢、体积大等问题的检查点与调试命令。
使用方式 技能激活后按结构化思考流程执行：识别版本与上下文、分类问题、分析配置、制定 SSR 样式策略、预防 FOUC、做性能优化、设计主题令牌、按需进入故障排查。安装方面保持 tailwindcss@latest 与构建工具对应的一方加载器版本同步：Vite 用 @tailwindcss/vite，PostCSS 用 @tailwindcss/postcss，CLI 用 @tailwindcss/cli，Webpack/Next.js 用 @tailwindcss/webpack。
适用场景
- 新产品选择 TailwindCSS v4（CSS-first）或既有 v3 项目迁移评估。
- SSR/SSG 应用的样式交付、关键 CSS 与 FOUC 处理。
- 使用设计令牌与暗色模式构建可维护主题系统。
- 排查 Tailwind 与 SSR 相关的样式性能问题。
- 需要逻辑属性、容器查询、滚动条工具类等较新特性的项目。
限制与事实说明
- v4 面向现代浏览器：Safari 16.4+、Chrome 111+、Firefox 128+、Edge 111+；较新的 mask-*／scrollbar-color 等工具类可能有更严格的支持要求，请以升级指南为准。
- v4 自动检测内容，但动态拼接的类名不会被识别，需保证完整类名字符串出现在源码中。
- 收费、价格、平台等信息暂未提供。