用途：当项目依赖 tailwindcss，且任务涉及工具类、主题、变体、响应式或深色模式时启用；也用于判断重复出现的视觉模式应做成令牌、局部 @apply 还是抽取组件。组件库选型（Radix、shadcn/ui）不归本技能，应使用 $specsfy-specialist-shadcn-ui 或 $specsfy-specialist-react-ui-components，再回到本技能处理支撑它们的令牌与类体系；对比度、缩放、prefers-reduced-motion 可与 $specsfy-specialist-web-accessibility 配合。
流程：先确认 Tailwind 版本、集成方式（Vite、PostCSS、框架）以及令牌声明位置（tailwind.config.js 或 v4 的 CSS @theme），因为配置语法跨版本不同；先把布局与界面状态翻译成响应式约束（断点或 @container）再写类；优先复用已有语义令牌（颜色、间距、圆角、字体），避免随意使用 w-[137px] 这类任意值；采用移动优先，先写小屏基础样式再仅覆盖断点差异；从第一版就覆盖交互状态（hover、focus-visible、disabled、aria-*）与用户偏好（dark、motion-reduce、forced-colors）。
模式与限制：颜色、间距、圆角、字体应保持带意图命名的令牌（如 bg-surface、text-muted）；状态用 Tailwind 变体表达（hover:、aria-selected:、data-[state=open]:）；@apply 不应作为组件的通用替代，动态拼接类名（如 text-${color}-500）不会被内容扫描器静态识别，需使用完整字面量类映射；dark mode、prefers-reduced-motion、forced-colors 应视为设计要求而非事后补丁；组件需响应自身容器时用 @container，而非整个视口；多个相近重复的任意值提示缺少令牌。
验证：运行生产构建，检查预期类是否缺失（说明无法被静态检测）；在小屏与大屏、真实容器、200% 与 400% 缩放下测试，确认内容不丢失、无横向滚动；逐一走查 hover、focus-visible、disabled、loading、error、selected 的视觉与键盘表现；检查明暗主题对比度与系统偏好设置下的行为。不能仅因存在 sm:/dark: 类就宣称组件响应式或无障碍。相关资料另见 references/standards.md，包含令牌层级、变体、@container、类检测与版本迁移及官方来源。