用途:处理 Tailwind v4 相关样式任务,包括添加或修复 class、配置或迁移 Tailwind、使用 tailwind-variants、使用 tw-animate-css,以及 Tailwind ESLint 集成。
主要能力与原则:先检查 package 版本、CSS 入口、theme 声明、共享组件、class 合并工具和附近 UI,以项目现状为准;仅在项目未规定时参考该技能的偏好设置文件。优先复用已有语义令牌与组件,而非任意值、新颜色或一次性工具类;保留响应式、交互态、无障碍与暗色模式约定,不额外添加装饰性 UI 或超出请求的重设计。仅在明显更清晰时使用 CSS Modules,并保留项目特定的 Tailwind 引用机制。
使用方式:确认已安装 v4 后,阅读 references/tailwind-v4-rules.md 处理配置、迁移、已移除工具类、变量、渐变或 CSS 优先指令;组件变体与插槽参考 references/tailwind-variants.md;动画参考 references/tw-animate-css.md;ESLint 参考 references/eslint.md。版本相关行为应查阅与已安装版本匹配的官方文档。
工作流程:定义视觉目标与受影响状态,复用本地令牌、间距、排版、断点和组件约定,做最小改动;保持类名可静态检测,值选择样式时映射为完整类名字符串并确认扫描范围;运行仓库相关 lint/type/build 检查;在代表性视口渲染并目视检查交互与主题状态,若由 JS 或组件库生成标记,检查最终 DOM;完成需代码检查加渲染检查,检测或类名生成变化时运行真实 Tailwind 构建验证工具类存在。
限制:不要因该技能面向 v4 就把 v4 语法用于旧项目;仅在请求包含迁移时才迁移。不得为凑长度编造未提供的功能与步骤。