tailwind-4-docs

tailwind-4-docs

全面的 Tailwind CSS v4 文档快照与工作流指南。用于回答 Tailwind v4 相关问题、选择工具类/变体、配置 Tailwind v4,或借助官方文档和常见陷阱检查将项目从 v3 迁移到 v4。

57Star
8Fork
更新于 2026/4/9
SKILL.md
readonly只读
name
tailwind-4-docs
description

全面的 Tailwind CSS v4 文档快照与工作流指南。用于回答 Tailwind v4 相关问题、选择工具类/变体、配置 Tailwind v4,或借助官方文档和常见陷阱检查将项目从 v3 迁移到 v4。

Tailwind 4 Docs

概述

使用此技能浏览本地同步的 Tailwind CSS v4 文档快照,并借助官方指南回答开发、配置、迁移、实现、重构和审查问题。

文档快照未随此技能打包,因为上游仓库是源代码可用但非开源的。用户必须自行初始化快照,并负责遵守上游许可证。

快速开始

  1. 检查文档快照是否已初始化(references/docs/references/docs-index.tsx 是否存在)。
  2. 如果快照缺失或超过一周未更新,请停止并请求运行“初始化”中的初始化步骤,然后再继续。在快照初始化之前,不要回答用户的问题。
  3. 确定主题(工具类、变体、配置、迁移、兼容性、实现、重构、审查)。
  4. references/docs-index.tsx 中找到匹配的文档。
  5. 仅从 references/docs/ 加载相关文件。
  6. 对于实现、重构或审查任务,还需加载 references/engineering-playbook.md
  7. 应用指南并指出任何重大变更或限制。

初始化(每次安装只需一次)

运行同步脚本以在本地下载 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 titleexport const description 视为元数据。
  • 将 JSX 提示如 <TipInfo><TipBad> 视为指导文本。

常见入口点

  • 迁移:references/docs/upgrade-guide.mdxreferences/docs/compatibility.mdx
  • 实现/重构/审查:references/engineering-playbook.md
  • 常见陷阱概述:references/gotchas.md
  • 配置和指令:references/docs/functions-and-directives.mdxreferences/docs/adding-custom-styles.mdxreferences/docs/theme.mdx
  • 变体和响应式模式:references/docs/hover-focus-and-other-states.mdxreferences/docs/responsive-design.mdx
  • 核心行为:references/docs/preflight.mdxreferences/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