用途：该技能面向使用 Tailwind CSS 进行样式开发与从 v3 迁移到 v4 的场景，重点说明 v4 的 CSS-first 配置方式与类名写法变化。
主要能力：v4 取消了 tailwind.config.ts，配置全部写在 CSS 中。@import "tailwindcss" 作为入口，替代 @tailwind base/components/utilities；@theme 定义或扩展设计令牌并自动生成工具类，如 --color-brand 生成 bg-brand、text-brand、border-brand；@theme inline 将 CSS 变量映射为工具类而不生成新变量；@theme static 定义不生成工具类的令牌；@utility 创建自定义工具类，替代 @layer components 与 @apply；@custom-variant 定义自定义变体。
必要用法：使用 .module.css 时在文件顶部加 @reference "#tailwind";。动画可用 tw-animate-css 的 animate-in/animate-out 配合效果类。类合并用 clsx 与 tailwind-merge 组合的 cn()，静态类名可直接用字符串；组件变体推荐 tailwind-variants，替代方案为 class-variance-authority。ESLint 可接 eslint-plugin-better-tailwindcss 做类名校验与排序。
v3 到 v4 的主要变化：用 @theme 取代配置文件；darkMode: "class" 改为 @custom-variant dark；bg-gradient-to-r 改为 bg-linear-to-r，另有 bg-radial、bg-conic；-opacity- 移除，改用 bg-red-500/60 这类透明度修饰符；圆角刻度整体下移一级；min-h-screen 建议改 min-h-dvh；w-6 h-6 可写 size-6；space-x-4 建议改 gap-4；text-base leading-7 可写 text-base/7；动画依赖由 tailwindcss-animate 换为 tw-animate-css。
编码规则：优先 gap 而非 space-，等宽高用 size-，移动端用 min-h-dvh，优先设计令牌而非任意值，不要动态拼接类名，用 @utility 替代在 @layer 上用 @apply，容器用内边距替代最后一个子元素的下外边距。
限制：v4 不支持嵌套 @theme；旧版类名与配置文件残留会导致构建失败；颜色显示异常常因 hsl() 重复包裹。实施前建议通过 search_docs 核对当前文档，因 v4 与 v3 差异较大，训练数据可能过时。
本文档未提供具体定价、安装命令或平台支持范围等信息。