UnoCSS 对 Tailwind 4 的支持计划与技术实现

UnoCSS 作为一款灵活且无预设的 CSS 引擎，近期针对 Tailwind 4 的重大变更制定了详细的支持计划。本文将深入解析 UnoCSS 如何同时支持 Tailwind 3 和 Tailwind 4 两种预设的技术方案，以及相关的技术决策背景。

双预设并行支持策略

Tailwind 4 在配置和主题模型上进行了重大变更，考虑到现有项目迁移成本较高，UnoCSS 创新性地采用了双预设并行支持的策略：

1. 将原有 @unocss/preset-wind 重命名为 @unocss/preset-wind3
2. 新开发 @unocss/preset-wind4 以支持 Tailwind 4 特性
3. 逐步废弃原 @unocss/preset-wind 和 @unocss/preset-uno

这种设计允许开发者根据项目需求自由选择使用 Tailwind 3 或 Tailwind 4 风格的预设，无需强制迁移即可享受 UnoCSS 的持续更新。

技术实现细节

主题变量处理优化

在 preset-wind4 中，UnoCSS 对主题键进行了精简和重命名，主要出于以下技术考量：

1. 对齐 Tailwind 4 的行为模式
2. 减少主题 CSS 变量的过度输出
3. 统一相同行为的实现方式

例如，原先的 backgroundColor 和 borderColor 等细粒度主题键被合并到统一的 colors 键下，通过二级键进行配置。这种设计虽然增加了迁移成本，但提高了系统的整体一致性。

CSS 自定义属性支持

针对 CSS 自定义属性的使用，preset-wind4 采用了 $ 前缀语法（如 animation-$blink）来引用 CSS 变量。这与 Tailwind 4 的 (--custom-property) 语法有所不同，是 UnoCSS 团队基于工程实践做出的技术决策。

媒体查询变体处理

在媒体查询变体方面，preset-wind4 保持了与 preset-wind3 的一致性，继续使用 media-pointer 而非 Tailwind 4 的 pointer-coarse。这种设计避免了过度特定的媒体查询，同时保持了主题配置的灵活性。

迁移指南与最佳实践

对于计划从 Tailwind 3 迁移到 Tailwind 4 风格的开发者，UnoCSS 团队建议：

1. 字体配置需要将 themeKey 从 "fontFamily" 改为 "font"
2. 使用 themePreflight: true 选项导出所有主题命名空间
3. 通过 utilityResolver 自定义工具类解析逻辑
4. 对于特殊场景，可考虑开发社区插件辅助迁移

未来发展方向

UnoCSS 团队计划进一步优化对 Tailwind 4 CSS 配置的支持，包括：

1. 合并 JS/TS 和 CSS 配置，其中 JS/TS 配置具有更高优先级
2. 提供更灵活的主题变量输出控制
3. 考虑将预设移至独立仓库，使核心引擎更加通用

这种渐进式的技术演进策略，既保证了现有项目的稳定性，又为未来功能扩展留下了充足空间。

通过这种双轨并行的支持方案，UnoCSS 为开发者提供了平滑的技术升级路径，充分体现了其"灵活且无预设"的设计哲学。