Tailwind CSS
专门调试 Tailwind CSS 的工具
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：Tailwind CSS。 它的用途是：专门调试 Tailwind CSS 的工具 完整的 Skill 内容见：https://321skill.com/skills/tailwind-css-x-8/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
'我在 Next.js 项目中使用 Tailwind v4，但 `hover:bg-blue-500` 在按钮上悬停不生效，检查了 content 配置也正确，不知道哪里出了问题。' 它会分析你的 tailwind.config 和 PostCSS 配置，确认 content 是否匹配了所有组件文件，并检查是否因为 `@tailwind` 指令未替换为 `@import "tailwindcss"` 导致变体注册失败，然后给出修复建议。
介绍
【解决什么问题】Tailwind CSS 开发中常遇到类不生效、动态类名（如 bg-${color}-500）不渲染、样式在开发环境正常但部署后消失、@apply 在 Vue/Svelte 等组件中失效、hover:, group-hover:, dark: 等变体不触发、从 v3 升级到 v4 时指令报错、自定义主题配置不生效、CSS 构建包体积过大等问题。这些并非 CSS 基础机制问题，而是 Tailwind 特有的配置、构建、集成场景。
【怎么用】当遇到上述 Tailwind 专属问题时，直接向 AI 描述现象，该 Skill 会从 utility 类定义、theme 配置、content 路径、variant 启用、插件注册、构建管线等角度逐一排查，并提供修复代码或配置调整建议。支持 Vite、Next.js、Astro、SvelteKit、Rails、Laravel 等主流框架的集成调试。
【适合谁】前端开发、全栈开发、UI 设计师等需要频繁使用 Tailwind 的开发者。尤其适合在团队协作中快速定位样式不一致、构建产物异常等疑难杂症。
【使用建议】注意该 Skill 不处理原生 CSS 的层叠上下文、Flex 尺寸计算、BFC 等基础机制问题，这类问题应交给 css 技能。使用时请尽量提供完整的 tailwind.config 文件、构建工具配置以及出现问题的具体类名，以便精准诊断。
核心特点
区别于通用 CSS 调试工具，本 Skill 深度理解 Tailwind 的配置体系、变体系统、插件机制和构建流程，能精准定位因 content 路径遗漏、变体未启用、自定义主题冲突、Preflight 覆盖等 Tailwind 特有原因导致的样式问题。
注意事项
不适用于原生 CSS 堆叠上下文、Flexbox 尺寸分配、层叠规则等基础 CSS 机制问题，这些应使用 `css` 技能。
常见问题
为什么我的 Tailwind 类不生效？
常见原因：content 配置未包含使用该类的文件路径、类名拼写错误、动态类名未使用完整字符串（如 `bg-${color}-500` 需要改为 `bg-blue-500` 或使用 `safelist`）、变体前缀未启用。该 Skill 会逐一检查。
如何从 Tailwind v3 升级到 v4？
v4 移除了 `@tailwind` 指令，改用 `@import "tailwindcss"`；`tailwind.config.js` 改为 `@theme` 配置；部分 utility 类名重命名。该 Skill 可自动迁移配置文件和代码中的引用。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/tailwind-css-x-8/raw/index.md 读取 Tailwind CSS 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/tailwind-css-x-8/raw/index.md（查看排版版本）