用途
该技能用于回答和指导与 Tailwind CSS 相关的问题，尤其是 Tailwind CSS v4 与 tailwind-variants 的使用。当用户涉及「Tailwind CSS」「tailwind-variants」「tv() 函数」「CSS-first configuration」「Tailwind breaking change」等主题时，可调用本技能。其定位是让使用者以 Tailwind CSS v4 专家的角色，理解 CSS-first 配置、现代工具类模式，以及基于 tailwind-variants 的类型安全组件样式。
参考文档
技能附带两份参考文档：
- Tailwind v4 规则与最佳实践：./references/tailwind-v4-rules.md，覆盖破坏性变更、移除/重命名的工具类、布局规则、排版、渐变、CSS 变量、v4 新特性与常见陷阱。
- tailwind-variants 模式：./references/tailwind-variants.md，覆盖组件变体、slots API、组合、TypeScript 集成、响应式变体。
核心原则
- 始终使用 Tailwind CSS v4.1+。
- 不使用已废弃或已移除的工具类，改用替代写法。
- 不使用 @apply，改用 CSS 变量、--spacing() 函数或框架组件替代。
- 检查冗余类，移除不必要的类。
配置方式
Tailwind CSS v4 采用纯 CSS 配置：
- 不需要 tailwind.config.ts 文件。
- 用 @theme { } 或 @theme static { } 定义主题令牌。
- 用 @utility { } 创建自定义工具类。
- 用 @custom-variant { } 定义自定义变体。
示例：
@import "tailwindcss";
@theme { --color-primary: oklch(0.72 0.11 178); --spacing-edge: 1.5rem; }
关键破坏性变更（v3 → v4）
重命名工具类（v3 废弃写法 → v4 替代写法）：
- bg-gradient-* → bg-linear-*
- shadow-sm → shadow-xs
- shadow → shadow-sm
- blur-sm → blur-xs
- blur → blur-sm
- rounded-sm → rounded-xs
- rounded → rounded-sm
- outline-none → outline-hidden
- ring → ring-3
- drop-shadow-sm → drop-shadow-xs
- drop-shadow → drop-shadow-sm
- backdrop-blur-sm → backdrop-blur-xs
- backdrop-blur → backdrop-blur-sm
移除的工具类（废弃 → 替代）：
- bg-opacity-* → 使用不透明度修饰符：bg-black/50
- text-opacity-* → 使用不透明度修饰符：text-black/50
- border-opacity-* → 使用不透明度修饰符：border-black/50
- flex-shrink-* → shrink-*
- flex-grow-* → grow-*
- overflow-ellipsis → text-ellipsis
渐变色语法：使用 v4 渐变语法。
线性渐变：<div class="bg-linear-to-br from-violet-500 to-fuchsia-500"></div> 径向渐变：<div class="bg-radial-[at_50%_75%] from-sky-200 to-indigo-900"></div> 锥形渐变：<div class="bg-conic-180 from-indigo-600 via-indigo-50 to-indigo-600"></div> 已废弃写法：<div class="bg-gradient-to-br ..."></div>（错误）
响应式设计（移动优先）
Tailwind 是移动优先的：
- 默认类（无前缀）应用于所有屏幕尺寸。
- 断点前缀（md:、lg:）在该断点及以上生效。
- 不要用 sm: 表示移动端，这是冗余的。
示例：
<div class="text-sm md:text-base lg:text-lg"> <div class="flex-col md:flex-row"> <div class="px-4 md:px-6 lg:px-8"> <div class="hidden lg:block"></div> </div> </div> </div>
布局最佳实践
- flex/grid 间距始终使用 gap：不要用 <div class="flex space-x-4">，应使用 <div class="flex gap-4">。
- 使用 min-h-dvh 代替 min-h-screen；min-h-screen 在移动端 Safari 上有问题。
- 相等的宽高使用 size-*：不要用 <div class="w-10 h-10">，优先用 <div class="size-10">。
排版
使用行高修饰符，而不是 leading-* 类：
- 不要用 <p class="text-base leading-7">，应使用 <p class="text-base/7">。
CSS 变量
Tailwind v4 将主题值暴露为 CSS 变量：
.custom-element { background: var(--color-red-500); padding: var(--spacing-4); border-radius: var(--radius-lg); }
使用 --spacing() 函数进行计算：
.custom-class { margin-top: calc(100vh - --spacing(16)); }
tailwind-variants 快速上手
通过 tv() 实现类型安全的组件变体，并自动解决类冲突：
import { tv, type VariantProps } from "tailwind-variants";
const button = tv({ base: "font-medium rounded-lg transition-colors", variants: { color: { primary: "bg-blue-500 text-white hover:bg-blue-600", secondary: "bg-gray-500 text-white hover:bg-gray-600" }, size: { sm: "text-sm px-3 py-1.5", md: "text-base px-4 py-2", lg: "text-lg px-6 py-3" } }, defaultVariants: { color: "primary", size: "md" } });
type ButtonVariants = VariantProps<typeof button>;
// 使用 button(); // 使用默认值 button({ color: "secondary", size: "lg" });
更多内容见 ./references/tailwind-variants.md，包括多部件组件的 slots API、复合变体、使用 extend 进行组件组合、TypeScript 集成模式。
快速参考
- 渐变：bg-linear-*、bg-radial、bg-conic
- 不透明度：bg-red-500/50（不是 bg-opacity-*）
- 行高：text-base/7（不是 leading-*）
- 间距：flex/grid 中使用 gap-*
- 相等尺寸：size-10（不是 w-10 h-10）
- 全高：min-h-dvh（不是 min-h-screen）
- 组件变体：来自 tailwind-variants 的 tv()
常见任务
创建带变体的组件：阅读 ./references/tailwind-variants.md 获取模式；使用 tv() 实现类型安全变体；用 VariantProps<typeof component> 提取类型。
调试样式：查看 ./references/tailwind-v4-rules.md 中的破坏性变更；验证渐变语法（bg-linear-，不是 bg-gradient-）；检查不透明度语法（bg-red-500/50，不是 bg-opacity-*）。
限制
该技能聚焦于 Tailwind CSS v4 与 tailwind-variants 的写法规范，具体项目的安装命令、版本号要求、收费与价格信息暂未提供。