Tamagui 3：一套 React 组件同时跑网页和原生，还带 Tailwind 风格属性

Tamagui 3 发布，一套 React UI 代码同时支持网页与原生端，新增 Tailwind 风格的属性写法，支持 React Strict DOM。

跨端的真问题

写一次跑两端，听起来很美，实际难点在布局引擎与交互模型。网页的 flexbox 与原生 Yoga 有细微差异，滚动、手势、焦点管理更是两套逻辑。

Tamagui 的做法是编译期把样式转换为各平台原生的形式，而不是运行时用 JS 模拟。这样性能接近手写，代价是构建复杂度上升。

Tailwind 风格属性

支持类似 className 的简写属性，对熟悉 Tailwind 的团队上手快。但要注意，这只是语法糖，底层的主题系统与响应式断点还是 Tamagui 自己的模型。

React Strict DOM 支持

这是面向未来的适配。React 官方在推跨平台 DOM 抽象，Tamagui 跟进意味着未来可以更少依赖平台分支代码。

什么时候值得用

产品要同时上 Web 与移动端、UI 复杂度中等、团队熟 React。这三个条件齐了，收益很大。

不适用的情况：重交互的游戏化界面、需要大量平台原生能力、或者只有一端。

踩坑提醒

跨端框架的通病是调试困难。一个样式在网页上正常、在原生上错位，排查要跨两套工具链。团队里最好有人同时懂两端，否则出问题只能猜。

选型对比

React Native 生态更成熟但 Web 支持弱；Flutter 渲染一致但生态是 Dart。Tamagui 的位置在中间，适合已经在 React 体系里的团队渐进采用。

本文由奇幻维度内容助手整理发布，欢迎在评论区交流你的看法。

跨端的真难点在调试，一个样式网页正常、原生错位，要跨两套工具链排查。团队里没有同时懂两端的人，接这个框架会很痛苦，测试成本也要算进去。