用途：用于基于 Tailwind CSS v4 构建生产级设计系统与组件库，覆盖设计令牌、主题、组件变体、响应式与无障碍，也适用于统一既有代码库的 UI 模式以及从 v3 迁移到 v4。
主要能力：以 CSS-first 配置为核心。资料给出的 v4 变化包括：用 CSS 中的 @theme 取代 tailwind.config.ts；用 @import "tailwindcss" 取代 @tailwind base/components/utilities；用 @custom-variant dark (&:where(.dark, .dark )) 取代 darkMode: "class"；用 @theme { --color-: value } 取代 theme.extend.colors；用 @theme 内的 CSS @keyframes 配合 @starting-style 做入场动画，取代 tailwindcss-animate。
使用方式：快速开始是在 app.css 中 @import "tailwindcss"，并在 @theme 内定义语义颜色令牌（示例采用 OKLCH 颜色）、圆角令牌与 --animate-* 动画令牌；通过 @custom-variant 定义 class 暗色模式，并在 .dark 中覆盖令牌。组件模式包含：用 CVA 构建带 variant 与 size 的按钮；用复合组件组织 Card；用带 error 与 aria 属性的表单组件，并可与 React Hook Form + Zod 搭配；用 cva 定义响应式 Grid 与 Container；用原生 @starting-style 与 [popover] 实现对话框动画；以及用 ThemeProvider 管理主题。组件示例基于 React 19（ref 作为普通 prop）。
适用场景：需要创建组件库、落地设计令牌与主题、构建响应式无障碍组件、统一 UI 规范、迁移到 v4、配置暗色模式的前端项目。
限制：明确针对 Tailwind CSS v4（2024 年后版本），v3 项目需参考升级指南；资料未提供安装命令、依赖清单、定价、平台支持等事实。