tailwind

Tailwind

使用此技能，根据当前文档以及本地项目实际使用的 Tailwind 版本、集成方式和设计规范，做出 Tailwind CSS 相关决策。

工作流

1. 确认 Tailwind 的使用情况：
   • 阅读最近的项目指南和软件包清单。
   • 检查 tailwindcss、@tailwindcss/vite、@tailwindcss/postcss、@tailwindcss/cli、@tailwindcss/webpack、@tailwindcss/turbopack、prettier-plugin-tailwindcss 以及框架软件包的已安装版本。
   • 检查 CSS 入口文件、vite.config.*、PostCSS 配置、框架配置、tailwind.config.* 和类名组合辅助函数。
2. 在用户询问最新／当前行为、版本与已记录的快照不一致，或涉及 v4 迁移／配置时，更新文档：
   • 使用 source-map.md 查看已记录的最新版本快照和官方来源链接。
3. 加载相应的参考文件：
   • setup-and-migration.md：安装方式、软件包拆分、v3 到 v4 的升级、浏览器支持和迁移注意事项。
   • core-utilities.md：工具类组合、源码检测、响应式设计、暗色模式、变体、任意值、Preflight 和无障碍支持。
   • css-directives-and-theme.md：@theme、@source、@utility、@variant、@custom-variant、@apply、@reference、@config、@plugin 和 Tailwind CSS 函数。
4. 按照现有项目风格实现：
   • 优先采用项目当前使用的 Tailwind 主版本和集成软件包。
   • 使用完整且可静态检测的类名。应将属性或状态映射到完整的类名字符串，而不是插值拼接片段。
   • 优先使用设计令牌工具类和主题变量，而非一次性任意值。
   • 只有在工具类、主题变量、变体或组件组合不适用时，才添加自定义 CSS。
   • 除非用户提出要求或任务需要，否则不要将 v3 项目迁移到 v4。
5. 验证最小的有效范围：
   • 运行相关的样式构建、框架构建、类型检查、lint、测试、Storybook 或浏览器检查。
   • 对于可见的 UI 更改，尽可能检查实际渲染状态。
   • 报告无法执行的验证。

Tailwind 使用判断

• 将 Tailwind v4 视为 CSS 优先：使用 @import "tailwindcss";、CSS 中的主题变量，以及专用的 Vite／PostCSS／CLI／webpack／Turbopack 集成软件包。
• 对于 monorepo、被忽略的外部软件包、多个样式表、安全列表和源码排除，使用 @source。
• 响应式样式采用移动优先：无前缀的工具类适用于所有尺寸，断点前缀则适用于该断点及以上尺寸。
• 明确设置暗色模式：使用默认的 prefers-color-scheme 行为，或通过 @custom-variant dark 定义项目选择器。
• 导入 Tailwind 后，视为 Preflight 已启用。注意其重置边距、取消标题／列表的默认样式、边框重置、图片块级显示、响应式媒体元素以及隐藏属性。
• 如果框架负责 CSS 流程，优先采用该框架的官方指南。
• 如果项目必须支持低于 16.4 的 Safari、低于 111 的 Chrome 或低于 128 的 Firefox，未经明确的兼容性决策，不要选择 Tailwind v4。