用途：本资料是 TailwindCSS v4 的实践指南，介绍其从 JavaScript 配置转向 CSS-first 配置的写法，覆盖设计令牌、内容检测、自定义变体与工具类、插件加载以及现代 CSS 特性。
主要能力：v4 用 CSS 指令替代 v3 的 JS 配置。@theme 定义设计令牌（颜色、字体、间距、断点、动画等）并自动生成工具类；@theme inline 将已有 CSS 变量映射为工具类，常用于明暗主题切换与 shadcn/ui 集成；@source 指定内容检测来源或用 @source inline() 加入安全清单；@custom-variant 定义自定义变体（如暗色、RTL、print）；@utility 定义自定义工具类；@plugin 加载插件；@config 保留旧版 JS 配置。基础入口为 @import "tailwindcss";，替代 v3 的多条 @tailwind 指令。资料还涉及 oklch 色彩、原生 CSS 变量、容器查询、:has()、原生嵌套、响应式与状态变体、暗色模式、动画工具类及 v4 的 size 工具类。
使用方式：Vite 集成时安装 npm install tailwindcss @tailwindcss/vite，在 vite.config.ts 的 plugins 中加入 tailwindcss()，并在 CSS 入口写入 @import "tailwindcss"; 与 @theme 令牌。文档索引列出的安装、编辑器设置、升级指南、主题、内容配置等 URL 可按需查阅。
适用场景与限制：适合使用现代构建工具的前端项目与组件库主题化。v4 需较新浏览器（Safari 16.4+、Chrome 111+、Firefox 128+），不需要 Sass/Less 等预处理器；避免动态拼接类名以免影响静态分析；@apply 建议仅用于复用三次以上的模式。其余细节以官方文档为准。