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-3/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
‘我的`hover:bg-blue-500`类在项目里不起作用，检查了配置也没发现问题，能帮我看看吗？’，它会引导你检查变体顺序、配置文件中的`variants`设置，以及是否被其他CSS规则覆盖。或者
对AI说：‘我想在Next.js项目里升级Tailwind CSS从v3到v4，需要注意什么？’，它会为你列出关键的变更点，如`@tailwind`指令的替换、配置文件的迁移以及已重命名的工具类。
介绍
本Skill专为解决Tailwind CSS开发中的各类疑难杂症而设计。它不处理CSS底层机制（如层叠上下文、Flexbox尺寸计算），而是聚焦于Tailwind框架本身，帮助开发者应对从类名生成、主题配置到构建集成的全流程问题。
当你遇到Tailwind类名不生效、动态类名（如bg-${color}-500）无法渲染、开发环境样式正常但部署后消失、自定义CSS与工具类冲突、或@apply指令在Vue/Svelte/CSS模块中失效等情况时，都可以向它求助。它还能指导你进行版本升级（如v3到v4）、添加自定义主题配置，以及将Tailwind集成到Vite、Next.js等各种现代构建工具中。
该Skill主要面向前端开发、全栈开发以及UI设计师等需要深度使用Tailwind CSS的角色。无论是解决棘手的样式覆盖问题，还是优化构建产物体积和开发体验，它都能提供针对性的解决方案。
使用建议：在提问时，请尽可能详细地描述你的项目环境（如框架、构建工具、Tailwind版本）和具体错误现象（如控制台错误、生成的CSS内容）。对于CSS本身的原理性问题，建议结合css Skill以获得更全面的支持。
核心特点
与通用CSS技能不同，它深度聚焦Tailwind CSS框架的特定问题，如动态类名生成、构建工具集成、版本迁移和框架特有功能（如变体、插件、Preflight）的调试，提供框架层面的精准解决方案。
注意事项
不适合解决纯CSS原理性问题（如层叠、盒模型、Flexbox/Grid布局计算），这类问题应使用专门的`css`技能。
常见问题
Tailwind CSS类名写了但不生效怎么办？
检查类名拼写、确保构建流程正确扫描了文件、并确认没有其他CSS规则以更高优先级覆盖了它。
如何将Tailwind集成到Vite或Next.js项目中？
根据项目类型安装对应PostCSS插件和Tailwind依赖，并正确配置`postcss.config.js`和`tailwind.config.js`文件。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/tailwind-css-x-3/raw/index.md 读取 Tailwind CSS 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/tailwind-css-x-3/raw/index.md（查看排版版本）