Tailwind CSS
专精于Tailwind CSS的编写与调试，解决样式构建、配置和集成问题。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：Tailwind CSS。 它的用途是：专精于Tailwind CSS的编写与调试，解决样式构建、配置和集成问题。 完整的 Skill 内容见：https://321skill.com/skills/tailwind-css-x-5/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
‘我的`hover:bg-blue-500`类在项目中不起作用，检查了配置也没发现问题，能帮我排查一下吗？’ 它会引导你检查`tailwind.config.js`中变体的启用状态、CSS文件中的`@tailwind`指令顺序，并验证构建产物中是否包含了对应的CSS规则。或者，你可以说：‘我想在Vite + Vue项目里集成Tailwind，但`@apply`在单文件组件里报错。’ 它会提供正确的PostCSS配置步骤和Vue特定的样式处理建议。
介绍
这个Skill专门用于解决Tailwind CSS在开发和生产环境中遇到的各种疑难杂症。它不处理CSS底层原理（如层叠上下文），而是聚焦于Tailwind工具链本身，包括类名生成、主题配置、响应式变体、插件集成以及构建流程的调试。
当你在使用Tailwind时遇到样式不生效、动态类名不渲染、开发环境正常但部署后样式丢失、自定义样式与工具类冲突、或是在Vue/Svelte等框架中使用@apply指令出错等问题时，可以召唤它。它还能帮助处理暗黑模式、状态变体（如hover:、group-hover:）失效、版本升级（如v3到v4）、自定义主题扩展，以及将Tailwind集成到Vite、Next.js等各种现代构建工具中。
它最适合前端开发、全栈开发以及UI设计师，尤其是那些深度使用Tailwind CSS作为主要样式方案的开发者。对于需要快速定位和修复Tailwind相关构建问题、优化CSS包体积、或确保第三方组件与Tailwind Preflight样式兼容的场景，这个Skill能提供精准的指导。
使用建议是，在提问时尽可能提供具体的错误信息、代码片段、tailwind.config.js配置以及构建工具环境。注意，它不替代基础的CSS知识学习，对于纯CSS机制问题，应寻求css技能的帮助。
核心特点
与通用CSS技能不同，它深度聚焦Tailwind CSS工具链的特定问题，如动态类名生成、构建集成、版本迁移和变体失效调试，提供框架专属的解决方案，而非泛泛的CSS语法指导。
注意事项
不适合解决与Tailwind无关的纯CSS底层机制问题，如Flexbox具体尺寸计算、层叠规则或CSS自定义属性等。
常见问题
为什么我的Tailwind动态类名（如`bg-${color}-500`）不生效？
这通常是因为构建时无法静态分析动态值。需要使用`safelist`配置或在类名完整出现的地方显式声明。
如何将Tailwind从v3升级到v4？
v4有重大变更，如`@tailwind`指令和`tailwind.config.js`被`@theme`取代。此Skill可指导具体迁移步骤和重命名工具类。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/tailwind-css-x-5/raw/index.md 读取 Tailwind CSS 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/tailwind-css-x-5/raw/index.md（查看排版版本）