用途：该技能面向 Tailwind CSS v4 与 tailwind-variants，帮助处理 CSS-first 配置、现代工具类写法以及类型安全的组件样式。
主要能力：涵盖 v4 破坏性变更、被移除或重命名的工具类、布局规则、排版、渐变、CSS 变量与新特性；同时提供 tailwind-variants 的组件变体、slots API、组合、TypeScript 集成与响应式变体模式。
使用方式：要求使用 Tailwind CSS v4.1+，不使用已弃用或移除的工具类，改用替代写法；不使用 @apply，改用 CSS 变量、--spacing() 函数或框架组件。配置采用 CSS-only 方式，无需 tailwind.config.ts，通过 @import "tailwindcss"; 引入，并用 @theme { } 或 @theme static { } 定义主题令牌，用 @utility { } 定义自定义工具类，用 @custom-variant { } 定义自定义变体。组件变体使用 tailwind-variants 的 tv() 与 VariantProps。
关键变更：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-、text-opacity-、border-opacity- 改用透明度修饰符如 bg-black/50；flex-shrink-* 改为 shrink-，flex-grow- 改为 grow-*，overflow-ellipsis 改为 text-ellipsis。
布局与排版：flex/grid 间距使用 gap；全高使用 min-h-dvh 而非 min-h-screen；等宽高使用 size-；行高使用 text-base/7 而非 leading-。响应式采用移动优先，默认类适用于所有屏幕，断点前缀在该断点及以上生效，不用 sm: 表示移动端。
限制：资料未提供安装命令、收费、价格、平台或效果信息。