tailwind-config

此技能可精确控制项目的样式层，专为 Tailwind CSS v4 及集成 HeroUI 的设计系统量身打造。它适用于维护跨 Web 应用程序之设计令牌（Design Tokens）、间距比例与配色方案的前端开发人员与工程师。通过直接与全局 CSS 变量及 tailwind.config 文件交互，确保应用程序的视觉语言具备可扩展性、易于维护，并与核心项目需求严格对齐。

• 更新主题配置，包括调色板、字体比例与动画关键帧，使 UI 与不断演进的设计规范保持同步。

• 管理映射至 CSS 变量的语义化设计令牌，以支持动态深色模式及一致的浅色模式视觉效果。

• 定义并扩展自定义工具类，以满足特殊的 UI 需求，例如特殊的文本折行或滚动条处理。

• 配置 Tailwind 插件（如 @tailwindcss/typography 与 @tailwindcss/forms），以维持稳健的样式基础。

• 强制执行严格的样式惯例，例如针对固定尺寸元素使用 size-* 工具类，而非标准的 width 与 height 组合。

• 与 Web 应用程序的 globals.css 文件集成，以集中管理 CSS 自定义属性与主题专有的变体覆盖。

• 当您需要增加新品牌色彩、调整间距系统或在 Next.js App Router 环境中配置自定义主题时，请使用此技能。

• 新增目录结构时，请务必检查配置中的 content 路径一致性，以确保样式清理机制运行正常。

• 验证深色模式功能时，请确保 :root 与 .dark 选择器皆已正确定义 CSS 自定义变量。

• 利用内置的 CLI 调试指令（如 npx tailwindcss config）在开发过程中验证已解析的配置。

• 优先采用项目 codebase 中已建立的「移动优先」（mobile-first）响应式设计模式。

• 确保所有样式定义均支持项目对于高效缓存与高性能前端交付的需求。