该技能用于把 gluestack-ui 项目迁移到 v5,无论起始版本是 v2、v3 还是 v4。v5 运行在 Tailwind CSS v4 之上,采用 CSS-first 方式,不再需要 tailwind.config.js,并提供两种样式引擎:NativeWind v5(支持 Expo、RN CLI;Next.js 支持待 NativeWind v5 Web 支持,现阶段建议 Next.js 继续用 NativeWind v4)和 UniWind(仅支持 Expo,无 PostCSS 步骤,配置更简单)。
用途与主要能力:检测当前版本、自动或手动完成升级。自动方式是先提交代码 git add -A && git commit,再运行 npx gluestack-ui@alpha upgrade;向导会检测版本并逐步处理包安装/移除、global.css 重写、metro.config.js、babel.config.js、tailwind.config.js 迁移提示、postcss.config.js 创建、lightningcss 锁定、类型定义文件等。Next.js 项目暂不支持自动升级,需走手动路径。
使用方式:v4(NativeWind)→ v5 时,NativeWind v5 需卸载 nativewind,安装 nativewind@^5.0.0-preview.2 与 react-native-css@^3.0.4,升级 Tailwind 到 v4,并在 package.json 中把 lightningcss 锁定为 1.30.1,重写 global.css、创建 postcss.config.js、更新 metro.config.js,删除 tailwind.config.js,创建 react-native-css-env.d.ts,最后 npx gluestack-ui@alpha add gluestack-ui-provider 与 npx gluestack-ui@alpha add --all。UniWind 则安装 uniwind@^1.3.0 及 @gluestack-ui/core、@gluestack-ui/utils 的 alpha 版,改用 withUniwindConfig,创建 uniwind-types.d.ts,删除 nativewind-env.d.ts,并在 babel 中改用 react-native-worklets/plugin。
适用场景:需要将 gluestack-ui 项目升级到 v5、切换到 Tailwind v4 主题令牌、或从 NativeWind 切换到 UniWind 的开发者。限制:Next.js 自动迁移暂不支持;UniWind 仅限 Expo;NativeWind v5 要求 lightningcss 恰为 1.30.1;Next.js Web 端 UniWind 主题选择器需置于 @layer theme 顶层,不能嵌套在 :root 内;裸 Expo 或 RN CLI 需重新执行原生构建。