Tailwind CSS
专注于Tailwind CSS的编写、调试与构建问题排查
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：Tailwind CSS。 它的用途是：专注于Tailwind CSS的编写、调试与构建问题排查 完整的 Skill 内容见：https://321skill.com/skills/tailwind-css-x/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“我的`hover:bg-blue-500`类在项目里不生效，检查了配置文件好像没问题。”，它会引导你检查变体顺序、PurgeCSS配置（如适用），并可能建议在`tailwind.config.js`中显式启用`hover`变体。或者，你可以说：“我刚把项目从Tailwind v3升级到v4，原来的`@tailwind`指令报错了。”，它会为你解释v4的新`@theme`指令和配置文件的变更，并提供迁移步骤。
介绍
本技能专为解决Tailwind CSS开发中的各类疑难杂症而生。它不处理CSS底层机制（如层叠上下文），而是聚焦于Tailwind框架本身的使用问题，例如类名不生效、动态样式失效、构建配置错误等。
当您遇到Tailwind类名未生成CSS、动态拼接的类名（如bg-${color}-500）不渲染、开发环境正常但部署后样式丢失、自定义CSS与工具类冲突、或在Vue/Svelte/CSS模块中使用@apply出错时，可以使用本技能。它也擅长处理伪类变体（如hover:、dark:）不触发、版本升级（v3到v4）、自定义主题配置以及将Tailwind集成到Vite、Next.js等各种构建工具中的问题。
它最适合前端开发、全栈开发等需要频繁使用Tailwind CSS构建用户界面的开发者。无论是调试诡异的样式覆盖问题，还是优化庞大的CSS打包体积，本技能都能提供针对性指导。
请注意，本技能的核心是Tailwind CSS框架的“使用”问题。对于纯粹的CSS原理、布局技巧或非Tailwind的样式问题，建议使用专门的css技能。在提问时，请尽量提供具体的错误信息、配置代码片段和项目环境，以便获得更精准的解决方案。
核心特点
与通用CSS技能严格区分，它不处理CSS底层原理，而是深度聚焦Tailwind框架特有的工具类、配置、变体、构建集成等全链路问题，并提供从v3到v4升级等具体场景的解决方案。
注意事项
不适合处理与Tailwind CSS无关的纯CSS底层机制问题，如Flexbox/Grid布局原理、层叠上下文、CSS自定义属性等。
常见问题
Tailwind CSS类名写了但没效果怎么办？
检查类名拼写、配置文件中是否包含该变体、构建流程是否正确扫描了文件，并确认没有其他CSS样式覆盖。
如何将Tailwind集成到Vite或Next.js项目？
本技能可指导您安装对应PostCSS插件、创建配置文件，并确保构建流程正确配置。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/tailwind-css-x/raw/index.md 读取 Tailwind CSS 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/tailwind-css-x/raw/index.md（查看排版版本）