核心用法
Tailwind CSS v4 带来范式级变革——彻底废弃 tailwind.config.ts，实现 CSS-first 配置。通过 @theme { } 指令定义设计令牌，自动派生工具类；@utility 替代 @apply 创建自定义工具；@custom-variant 原生支持条件变体。关键路径迁移包括：@import "tailwindcss" 统一入口、bg-linear-to-r 替换渐变语法、size-6 合并宽高、min-h-dvh 解决移动端视口问题。
组件层推荐 tailwind-variants 或 class-variance-authority 实现类型安全变体，配合 cn()（clsx + tailwind-merge）处理动态类名合并。ESLint 生态提供 eslint-plugin-better-tailwindcss 自动拦截冲突类名、废弃类名及未知类名。
显著优点
1. 零配置负担：CSS 原生承载全部设计系统，消除 JS/TS 配置文件的认知开销与构建耦合
2. 运行时零开销：@theme 生成的 CSS 变量在构建时静态提取，无客户端解析成本
3. 类型安全闭环：tailwind-variants 提供完整的 TypeScript 推断，变体组合即类型组合
4. 迁移工具链完善：官方 @tailwindcss/upgrade codemod 覆盖 90%+ 的 v3 语法转换
5. 语义化暗色模式：CSS 变量驱动，无需 dark: 前缀堆砌，主题切换无闪烁
潜在局限
- 学习曲线陡峭：v4 与 v3 配置哲学相悖，团队需重新建立肌肉记忆
- 生态滞后：部分第三方插件尚未适配 v4 的 CSS-first 架构
- 构建工具绑定：要求较新的 PostCSS/CSS 解析器，旧版 webpack 配置可能失效
- 调试复杂度：
@theme生成的工具类映射关系需开发者脑补或借助 devtools
适合人群
- 追求极致构建性能与类型安全的中大型前端团队
- 已使用或计划使用 React/Vue/Svelte 组件库的工程化项目
- 需要从 v3 平滑迁移、减少运行时依赖的存量项目
- 对设计系统 tokens 有强管控需求的设计-开发协作流程
常规风险
1. 版本混淆风险：v3 类名（如 bg-opacity-60）在 v4 中静默失效，需 ESLint 拦截
2. 动态类名陷阱：模板字符串构建类名（text-${color}-500）导致 Tailwind 扫描遗漏
3. CSS Modules 兼容：需显式添加 @reference "#tailwind" 否则令牌不可见
4. HSL 双重包装：hsl(var(--color)) 错误用法会导致色值全黑/全白
5. 嵌套 `@theme` 失效：v4 不支持嵌套规则，需改用 :root/.dark 配合 @theme inline