Tailwind CSS
专业调试Tailwind CSS的AI助手
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：Tailwind CSS。 它的用途是：专业调试Tailwind CSS的AI助手 完整的 Skill 内容见：https://321skill.com/skills/tailwind-css-x-7/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
'我的 Tailwind 项目中 hover:bg-red-500 在移动端不触发，但桌面端正常，是什么原因？' AI 会分析你的 tailwind.config.js 和组件代码，检查是否缺少 hover 变体配置，或是否在 touch 设备上被禁用，并给出添加 `supports: hover` 或改用 `active:` 的解决方案。
介绍
解决什么问题：Tailwind CSS 虽然强大，但实际开发中常遇到「类名不生效」「动态样式在构建后消失」「hover/dark 等变体不触发」「@apply 在 Vue/Svelte 中报错」「升级 v3→v4 时配置迁移」等棘手问题。本 Skill 专门处理这些 Tailwind 独有的疑难杂症，帮你快速定位并修复样式缺陷，同时提供自定义主题、扩展插件、性能优化等高级指导。
怎么用：直接在对话中描述你的 Tailwind 问题，比如「为什么 bg-${color}-500 渲染不出来」「hover: 在 group 里不工作」「升级 v4 后 @tailwind 指令报错」。AI 会分析你的配置、代码片段和环境，给出具体修复方案，包括修改 tailwind.config.js、调整 @apply 位置、改用 tw-merge 工具、优化构建产物等。对于复杂场景，还能生成可复用的组件或插件代码。
适合谁：前端开发者、全栈工程师、UI 设计师，以及任何使用 Tailwind CSS 构建项目并遇到样式异常或配置难题的人。尤其适合正在从 v3 迁移到 v4、需要深度定制主题、或遭遇 Preflight 影响第三方组件样式的团队。
使用建议：适合与 CSS 基础技能搭配使用（本 Skill 不处理 flex 布局、层叠上下文等纯 CSS 机制）。在排查问题时，尽量提供完整的配置文件和出现问题的代码片段，AI 能更精准地定位根因。对于大型项目，建议先使用 npx tailwindcss --help 确认构建环境。
核心特点
与通用的 CSS 调试技能不同，本 Skill 专注于 Tailwind 特有的问题域：utility class 不生成、动态类名失效、构建后样式丢失、variant 不触发、v3→v4 迁移、@apply 在组件框架中的兼容性，以及 Tailwind 与构建工具（Vite/Next.js/Astro）的集成调试。
注意事项
不处理 CSS 本身的机制问题（如堆叠上下文、flex 尺寸计算、层叠行为），这些需要依赖专门的 CSS 技能。
常见问题
Tailwind class 不生效怎么办？
检查类名是否拼写正确，确认 tailwind.config.js 的 content 路径包含该文件，并确保没有使用动态拼接类名（如 bg-${color}-500），改用 safelist 或完整类名。
v3 升级 v4 后 @tailwind 指令报错？
v4 已移除 @tailwind 指令，改用 @import 'tailwindcss'；同时 tailwind.config.js 需迁移为 @theme 配置，部分 utility 已重命名，请参考官方迁移指南。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/tailwind-css-x-7/raw/index.md 读取 Tailwind CSS 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/tailwind-css-x-7/raw/index.md（查看排版版本）