Tailwind CSS
专精于Tailwind CSS的编写与调试，解决样式构建与配置问题。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：Tailwind CSS。 它的用途是：专精于Tailwind CSS的编写与调试，解决样式构建与配置问题。 完整的 Skill 内容见：https://321skill.com/skills/tailwind-css-x-2/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
‘我的Next.js项目里，`dark:`模式下的样式在部署后消失了，开发环境是好的。’ 它会引导你检查生产构建的PurgeCSS/内容配置，确认`darkMode: 'class'`是否正确设置，以及HTML元素上的类名是否被意外移除。或者
对AI说：‘在Vue单文件组件里用`@apply`组合实用类，但编译报错了。’ 它会分析Vue的样式作用域限制，并建议使用`:deep()`选择器或调整样式书写位置。
介绍
本Skill专注于解决Tailwind CSS在开发与部署过程中的各类疑难杂症。它不处理CSS底层机制（如层叠上下文），而是聚焦于Tailwind框架本身的使用问题，例如工具类不生效、动态类名渲染失败、构建配置错误、样式覆盖冲突等。
当您在开发中遇到Tailwind样式问题时，可以直接向本Skill描述具体现象，例如“为什么我的bg-${color}-500类没有生成CSS？”或“在Vue组件中使用@apply指令失效了怎么办？”。它会根据您的描述，分析问题根因，并提供具体的解决方案或调试步骤。
它非常适合前端开发、全栈开发以及任何需要在项目中深度使用Tailwind CSS的开发者。无论是初学者在配置时遇到障碍，还是资深开发者在处理复杂变体、插件集成或性能优化时，都能从中获得针对性帮助。
使用建议：提问时请尽可能提供上下文，如项目框架（Vite、Next.js等）、Tailwind版本、配置文件片段以及具体的错误现象。请注意，它不负责教授CSS基础或解决与Tailwind无关的纯CSS问题，这类问题应寻求css技能帮助。
核心特点
与通用的CSS技能不同，它深度聚焦于Tailwind CSS框架的特定问题，如版本升级（v3到v4）、构建工具集成、变体（`peer-*`， `has-[…]`）失效、`@apply`在组件框架中的使用限制等，提供框架层面的精准诊断和解决方案。
注意事项
不适用于解决CSS底层原理问题（如Flexbox布局计算、层叠规则）或与Tailwind无关的纯原生CSS调试。
常见问题
Tailwind CSS类名写了但样式不生效怎么办？
检查类名拼写、构建流程是否正确，确认样式表是否被正确引入和打包。
如何将Tailwind v3项目升级到v4？
需要替换`@tailwind`指令为`@import "tailwindcss"`，配置文件改用`@theme`，并注意部分工具类名的变更。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/tailwind-css-x-2/raw/index.md 读取 Tailwind CSS 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/tailwind-css-x-2/raw/index.md（查看排版版本）