Tailwind CSS
专注于Tailwind CSS的编写、调试与构建问题排查
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：Tailwind CSS。 它的用途是：专注于Tailwind CSS的编写、调试与构建问题排查 完整的 Skill 内容见：https://321skill.com/skills/tailwind-css/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
'我在Next.js项目里用了`dark:`模式，但切换主题时样式没变化，检查了配置好像也没问题。'，它会引导你检查HTML结构、`class`属性绑定、Tailwind配置中的`darkMode`设置，并排查是否存在其他CSS覆盖了暗色样式。或者
对AI说：'项目部署后，部分Tailwind样式消失了，开发环境是好的。'，它会帮你分析构建流程、PurgeCSS/内容配置以及生产环境CSS打包的差异。
介绍
该Skill专门解决Tailwind CSS在开发和生产环境中遇到的各种疑难杂症。它不处理CSS底层原理（如层叠上下文、Flex布局计算），而是聚焦于Tailwind框架本身的使用问题，例如类名不生效、动态样式失效、构建配置错误、框架集成以及版本升级等。
使用时，你可以直接描述遇到的Tailwind相关问题，例如某个hover:伪类不触发，或者@apply指令在Vue组件中失效。Skill会分析你的描述，定位问题根源，并提供具体的解决方案或调试步骤，帮助你快速修复样式问题。
它非常适合前端开发、全栈开发以及UI设计师等角色，特别是那些在项目中使用Tailwind CSS作为主要样式方案，并经常遇到框架层配置、编译或类名冲突问题的开发者。
建议在提问时，尽可能提供详细的上下文信息，例如你的项目框架（Vite、Next.js等）、Tailwind版本、配置文件内容以及具体的错误现象或代码片段，这有助于Skill给出更精准的解答。
核心特点
与通用的`css` Skill不同，它不处理纯CSS机制，而是深度聚焦于Tailwind CSS框架本身的工具类、配置、插件、构建流程和版本迁移等特定问题，提供框架层面的专业解决方案。
注意事项
不适合解决与Tailwind无关的纯CSS底层原理问题，如层叠规则、Flexbox/Grid布局计算细节等。
常见问题
Tailwind CSS类名写了但没效果怎么办？
检查类名拼写、构建流程是否包含该类、是否存在CSS特异性冲突，或检查`tailwind.config.js`中是否未包含该变体。
如何将Tailwind v3升级到v4？
关注`@tailwind`指令的变更、配置文件从`tailwind.config.js`迁移到`@theme`，以及部分工具类的重命名，该Skill可提供具体迁移步骤。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/tailwind-css/raw/index.md 读取 Tailwind CSS 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/tailwind-css/raw/index.md（查看排版版本）