Tailwind CSS
Tailwind CSS 全方位调试与配置专家
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：Tailwind CSS。 它的用途是：Tailwind CSS 全方位调试与配置专家 完整的 Skill 内容见：https://321skill.com/skills/tailwind-css-x-9/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
'我的 Tailwind v4 项目升级后，`@tailwind base` 报错，而且之前自定义的 `theme.extend.colors` 不生效了，应该怎么迁移？'，它会解释 v4 的 CSS 驱动配置方式，指导你将 `@tailwind` 替换为 `@import "tailwindcss"`，并将 `tailwind.config.js` 中的颜色配置迁移到 CSS 的 `@theme` 块中，同时给出示例代码。
介绍
这个技能专门解决 Tailwind CSS 使用中的各种疑难杂症。当 utility 类不产生任何 CSS、动态构建的类名（如 bg-${color}-500）渲染失败、开发环境样式正常但部署后消失、自己的 CSS 无法覆盖 utility 或反过来被覆盖、@apply 在 Vue/Svelte/CSS-module 中报错、hover: group-hover: peer-* has-[…] 或 dark: 等变体不触发时，它可以快速定位根因并给出修复方案。同时支持从 Tailwind v3 升级到 v4（处理 @tailwind 指令迁移、tailwind.config.js 转 @theme、重命名的 utility 等），以及自定义颜色、间距、断点、字体、关键帧等主题扩展。
使用时，只需描述你遇到的问题或想要实现的效果，技能会分析上下文并给出精准的代码示例和配置修改。例如，你可以直接问“为什么我的 dark:bg-gray-900 在暗色模式下不生效？”它会检查你的 dark mode 配置、HTML 结构、类名拼写等，并给出修复步骤。它还能帮你优化 CSS 打包体积、配置 Preflight 的覆盖范围，以及在 Vite、Next.js、Astro、SvelteKit、Rails、Laravel 等框架中集成 Tailwind。
主要面向前端开发、全栈开发和 UI 设计师，尤其是那些深度使用 Tailwind CSS 但经常遇到奇怪行为的人。也适合正在从 v3 迁移到 v4 的团队，或者需要统一团队 Tailwind 配置规范的场景。
使用建议：尽量提供具体报错信息、代码片段和框架版本，这样能更精准地定位问题。注意这个技能不处理 CSS 底层机制（如层叠上下文、Flex 尺寸计算、级联规则），这类问题请使用 CSS 相关技能。另外，对于自定义插件或复杂变体逻辑，可能需要结合官方文档进一步验证。
核心特点
与通用的 CSS 调试技能不同，本技能专攻 Tailwind CSS 生态，能处理 v3→v4 迁移、动态类名运行时失效、`@apply` 在组件化框架中的兼容性等 Tailwind 特有的痛点，并且了解各个框架（Vite/Next.js/Astro/SvelteKit/Rails/Laravel）的集成细节。
注意事项
不适用于纯 CSS 原理解释（如层叠上下文、Flex 尺寸计算、级联规则），也不适用未使用 Tailwind 的项目。
常见问题
为什么我的 Tailwind 类名不生效？
检查 class 是否拼写正确、是否在构建配置中启用了 JIT 模式、是否在自定义组件中忘记添加 `@layer` 或使用了 `@apply` 的坑，或者动态类名需要完整字符串（如 `bg-${color}-500` 需确保 color 变量在 Tailwind 的层叠中）。
Tailwind v3 升级 v4 报错怎么办？
v4 移除了 `@tailwind` 指令，改用 `@import "tailwindcss"`；`tailwind.config.js` 的配置迁移到 CSS 文件中的 `@theme` 块；部分 utility 类名重命名（如 `shadow` 改为 `shadow-sm` 等）。本技能可以帮你逐条迁移。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/tailwind-css-x-9/raw/index.md 读取 Tailwind CSS 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/tailwind-css-x-9/raw/index.md（查看排版版本）