nativewind 必须配合 babel 插件和 metro 配置才能生效，否则 tw 字符串不会解析为 rn 样式对象；需运行 npx nativewind init、确保 babel.config.js 正确加载插件、入口文件顶部导入 'nativewind/tailwind.css'，并清理缓存重启 metro。
NativeWind 能直接在 React Native 中用 Tailwind CSS，但必须配合 Babel 插件和 Metro 配置，否则样式完全不生效——这不是写法问题，是构建链路断了。
NativeWind 的安装和基础配置必须一步到位
NativeWind 不是纯 JS 库，它依赖 Babel 在编译时把 tw 字符串解析成 RN 样式对象。跳过插件或配错 Metro，tw`text-blue-500` 就只是字符串，不会变成 {color: '#3b82f6'}。
- 运行
npx nativewind init（自动添加@nativewind/babel-plugin和修改babel.config.js） - 确保
babel.config.js包含@nativewind/babel-plugin，且排在react-native-reanimated/plugin之后（如有） - 在
index.js或入口文件顶部加import 'nativewind/tailwind.css'—— 这行不能漏，否则 Tailwind 预设（如theme.colors）不载入 - 重启 Metro：关闭所有终端，删掉
node_modules/.cache/metro和ios/build/android/app/build，再npx react-native run-ios
class 与 tw 属性不能混用，且 tw 不支持动态拼接
React Native 的 style 是对象，而 NativeWind 的 tw 是标签函数，返回已计算好的样式对象。二者机制不同，强行混合会覆盖或失效。
Ainative React Sdk
下载
使用 @ainative/react-sdk 为 React 应用添加 AI 聊天和积分。适用于 (1) 安装 @ainative/react-sdk，(2) 使用 useChat hook 实现聊天完成。
- ❌ 错误写法：
tw="text-red-500" style={{ fontSize: 16 }}——tw不是字符串 prop，这样写会被忽略 - ✅ 正确写法：
className={tw`text-red-500 text-base`}（推荐）或style={tw`text-red-500 text-base`}（也合法，但失去类型提示） - ❌ 动态拼接无效：
tw`${isError ? 'text-red-500' : 'text-gray-700'} px-2`—— Babel 插件只处理静态模板字面量，变量内容无法分析 - ✅ 替代方案：用三元或逻辑表达式分拆：
tw`${isError ? 'text-red-500' : 'text-gray-700'} px-2`改为tw`${isError ? 'text-red-500 px-2' : 'text-gray-700 px-2'}`，或用tw.style()（需 v4+）
自定义 Tailwind 配置需同步更新 nativeWind 配置文件
修改 tailwind.config.js 后，NativeWind 不会自动感知。尤其新增颜色、字体尺寸或启用了 darkMode: 'class'，必须显式告知插件。
- 在
tailwind.config.js中确保content包含所有 JSX 文件路径，例如：['./src/**/*.{js,jsx,ts,tsx}'] - 如果启用了
darkMode: 'class'，需在babel.config.js的插件选项里加darkMode: 'class'，否则tw`dark:bg-black`不生效 - 新增自定义颜色如
myBlue: '#1e3a8a'，必须重启 Metro 才能出现在tw`bg-myBlue`的类型提示和运行时解析中 - 注意：NativeWind 默认只扫描
tw标签函数，不会处理className="..."字符串 —— 所以不要指望用原生 className 写 Tailwind 类名
最常被忽略的是 Metro 缓存和 Babel 插件执行顺序。改完配置不清理缓存，或者把 @nativewind/babel-plugin 放在 react-native-reanimated/plugin 前面，都会导致样式“看起来写了，实际没渲染”。遇到不生效，先删缓存、再查 babel.config.js 顺序、最后确认 import 'nativewind/tailwind.css' 是否在入口第一行。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
