全面的 Tailwind CSS v4 文档快照与工作流指南。用于回答 Tailwind v4 相关问题、选择工具类/变体、配置 Tailwind v4,或借助官方文档和常见陷阱检查将项目从 v3 迁移到 v4。
Tailwind 4 Docs
概述
使用此技能浏览本地同步的 Tailwind CSS v4 文档快照,并借助官方指南回答开发、配置、迁移、实现、重构和审查问题。
文档快照未随此技能打包,因为上游仓库是源代码可用但非开源的。用户必须自行初始化快照,并负责遵守上游许可证。
快速开始
- 检查文档快照是否已初始化(
references/docs/和references/docs-index.tsx是否存在)。 - 如果快照缺失或超过一周未更新,请停止并请求运行“初始化”中的初始化步骤,然后再继续。在快照初始化之前,不要回答用户的问题。
- 确定主题(工具类、变体、配置、迁移、兼容性、实现、重构、审查)。
- 在
references/docs-index.tsx中找到匹配的文档。 - 仅从
references/docs/加载相关文件。 - 对于实现、重构或审查任务,还需加载
references/engineering-playbook.md。 - 应用指南并指出任何重大变更或限制。
初始化(每次安装只需一次)
运行同步脚本以在本地下载 Tailwind 文档。这需要网络访问、git 和 Python 3:
python skills/tailwind-4-docs/scripts/sync_tailwind_docs.py --accept-docs-license
这将从 tailwindlabs/tailwindcss.com 拉取内容。该仓库是源代码可用且明确非开源的,因此用户必须接受其许可证才能下载,并将快照保留在本地。
如果您无法运行工具或没有网络访问权限,请要求用户在终端中运行上述确切命令,然后在 references/docs/ 和 references/docs-index.tsx 存在后继续。
如果快照缺失或超过一周未更新,您必须请求允许运行该命令或要求用户运行它。在快照初始化或刷新之前,不要继续提供 Tailwind 指南。
如果初始化受阻(无网络或无写入权限),请使用 references/gotchas.md 作为有限的备选方案,并建议用户查阅官方文档。对于实现、重构或审查任务,references/engineering-playbook.md 也可作为有限的备选方案。
参考资料映射
references/docs/是本地生成的,包含 Tailwind v4 MDX 文档快照。references/docs-index.tsx是本地生成的,包含文档侧边栏使用的类别和 slug 映射。references/docs-source.txt记录了上游仓库、提交和快照日期(或报告初始化待定)。references/engineering-playbook.md是面向代理的实现、重构和审查指南。references/gotchas.md提供了常见 v4 迁移陷阱的快速扫描。
MDX 处理
- 将
export const title和export const description视为元数据。 - 将 JSX 提示如
<TipInfo>或<TipBad>视为指导文本。
常见入口点
- 迁移:
references/docs/upgrade-guide.mdx、references/docs/compatibility.mdx。 - 实现/重构/审查:
references/engineering-playbook.md。 - 常见陷阱概述:
references/gotchas.md。 - 配置和指令:
references/docs/functions-and-directives.mdx、references/docs/adding-custom-styles.mdx、references/docs/theme.mdx。 - 变体和响应式模式:
references/docs/hover-focus-and-other-states.mdx、references/docs/responsive-design.mdx。 - 核心行为:
references/docs/preflight.mdx、references/docs/detecting-classes-in-source-files.mdx。
迁移检查清单
从 v3 升级到 v4 时,务必在文档中确认以下内容:
- 浏览器支持和兼容性预期。
- 工具链变更:
@tailwindcss/postcss、@tailwindcss/cli、@tailwindcss/vite。 - 导入语法:
@import "tailwindcss"替代@tailwind指令。 - 工具类重命名/移除、前缀格式和 important 修饰符位置。
- 变体、变换和任意值语法的变更。
更新工作流
运行 scripts/sync_tailwind_docs.py 以刷新快照。如果您已有 tailwindlabs/tailwindcss.com 的本地克隆,请使用 --local-repo 以加快同步速度。始终传递 --accept-docs-license。






