SuperAPI AI 工具集

tailwind

前端与建站

查看项目

更新于 10-16 04:29

技能介绍

该技能让使用者以工程师身份审查 Tailwind CSS 用法,关注一致性、可维护性与最佳实践,调用形式为「Review: $ARGUMENTS」。

布局:在父容器用 gap-* 而非子元素 margin,避免间距外泄;若项目定义了 v-stack、h-stack、center、spacer、z-stack 等堆叠工具类,优先使用它们而非原生 flex flex-col / flex flex-row;可用断点切换布局方向,如 v-stack lg:h-stack gap-4。

className 处理:合并类名时始终使用 cn()(clsx + tailwind-merge);外部传入的 className 放在最后,便于调用方覆盖;className 属性应正确类型化,单元素组件用 ClassName,多元素组件用 ClassNameRecord<"root" | "label" | "input">。

配色:使用语义化颜色令牌(text-foreground、bg-primary、border-border),而非硬编码 Tailwind 颜色(text-gray-900、bg-blue-600);通过项目的配色方案支持暗色模式(基于 class 的 dark 变体加系统 prefers-color-scheme)。

响应式:移动优先,基础样式写移动端,再叠加 md: / lg: / xl:;用断点前缀缩放文字,如 text-2xl md:text-3xl lg:text-4xl;组件级响应式可用容器查询 @container,独立于视口宽度。

反模式:避免 flex flex-col(改用 v-stack,若可用)、flex flex-row(改用 h-stack)、flex items-center justify-center(改用 center)、子元素 margin(改用父级 gap)、bg-[#hex](改用语义令牌)、未用 cn() 的 className(改用 cn("...", className))、用内联样式做响应式(改用断点前缀)。

适用场景为组件样式的编写与代码审查。限制:部分建议依赖项目是否定义了相应工具类,需结合实际环境判断;该技能未提供具体安装命令或配置细节。