用途：这是一份面向 Tailwind CSS v4+ 的技能资料，用于配置主题、构建 utility-first 组件、实现暗色模式、使用容器查询、从 v3 迁移、集成 shadcn/ui 以及排查构建错误。不适用于不会升级的 v3 旧项目，或采用 CSS Modules、styled-components 等其他样式方案且无迁移计划的场景。
主要能力与用法：v4 采用 CSS 优先配置，用 @theme { --color-brand: oklch(...); } 替代 tailwind.config.js；入口改为 @import "tailwindcss";，取代 @tailwind base/components/utilities。自定义工具类用 @utility name { ... }，取代 @layer utilities 并支持变体；函数式工具类用 @utility tab-* { tab-size: --value(--tab-size-*); } 接收动态值。插件通过 @plugin "@tailwindcss/typography"; 加载，取代 require()。
容器查询为内置能力，@container parent 配合 @md: child 即可，支持命名容器 @container/sidebar。暗色模式可用 @custom-variant dark (&:where(.dark, .dark *)); 实现基于 class 的覆盖。@theme inline 在构建时内联值，仅适合单主题；多主题切换应使用不带 inline 的 @theme。扫描路径可用 @source 显式添加，Vue/Svelte 作用域样式可用 @reference 引用主题。
v4 还包含 OKLCH 色彩空间（自动生成 sRGB 回退）、text-shadow-、mask-、field-sizing-content、inset-shadow-* 与 inset-ring-、user-valid:/user-invalid:、pointer-fine:/pointer-coarse:、inert: 等工具类，以及逻辑间距（pbs-/pbe-）、逻辑尺寸、逻辑 inset（inset-s-/inset-e-，取代 start-/end-*）和新增中性色板。
常见误区：v4 中不要再用 tailwind.config.js、不要写 hsl(var(--background)) 双重包裹、不要在 @layer base 内定义 :root/.dark、不要对多主题用 @theme inline、不要用 require() 或 @import 加载插件。v4 中 tailwindcss-animate 应换成 tw-animate-css。
复杂动画模式在 motion 技能可用时可委托处理。具体版本细节、完整迁移步骤与故障排查以官方文档为准，资料未提供的功能与收费信息暂未提供。