nativewind不能直接复用web端tailwind配置，但可通过环境分支（如nativewind_os）实现高度共享；需修改content路径、移除dom依赖插件、禁用伪类/响应式前缀/渐变等web专属特性，并统一使用px或数字单位。
NativeWind能直接用Web端Tailwind配置吗？
不能直接复用，但可以高度共享。NativeWind不是Tailwind CSS的浏览器运行时，它在构建期把类名解析成React Native的StyleSheet.create对象，因此不支持Web专属特性（如@layer、@apply、伪类hover:/focus:、媒体查询md:等），也不加载tailwind.config.js里的plugins或content字段中的HTML模板路径。
- 必须保留
content字段，但值要改成RN源码路径，例如['./src/*<em>/</em>.{js,jsx,ts,tsx}'] - 删除所有依赖DOM的插件（如
@tailwindcss/aspect-ratio、daisyui需换为RN兼容版本） -
theme.extend.spacing里用rem或%会报错，只接受数字或px单位（如4: '16px'） - 自定义颜色若含
/（如emerald-500/20），RN不识别，得拆成backgroundColor+opacity手动处理
class名字写法和Web一致，但哪些类根本不会生效？
大部分布局、颜色、字体类可用，但以下几类在NativeWind中被忽略或需替代：
-
hover:bg-blue-500→ RN无伪类，改用onPress配合useState切样式 -
md:flex-row→ RN无响应式断点，删掉前缀或用useWindowDimensions手写条件逻辑 -
bg-gradient-to-r→ RN不支持CSS渐变，需用react-native-linear-gradient组件封装 -
shadow-lg→ Android默认无效，需加elevation（Android）和shadow*（iOS）双写，或统一用react-native-shadow-2 -
border-dashed、border-double→ RN只支持solid边框，虚线需用绝对定位+重复View模拟
如何让同一套tailwind.config.js同时服务Web和RN？
靠环境分支 + 配置合并。不要写两份配置，而是导出函数：
module.exports = ({ mode }) => ({
content: mode === 'web'
? ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html']
: ['./src/**/*.{js,jsx,ts,tsx}'],
theme: {
extend: {
colors: {
primary: mode === 'web' ? '#3b82f6' : '#2563eb',
},
spacing: {
'1/2': mode === 'web' ? '50%' : '50%',
}
}
},
corePlugins: {
preflight: mode === 'web', // RN不需要重置样式
},
plugins: mode === 'web' ? [require('@tailwindcss/forms')] : [],
})
然后在postcss.config.js里传mode参数，RN打包脚本调用时加--env.mode=mobile，Web端用--env.mode=web。
Orderly Sdk React Hooks
下载
Orderly React SDK 钩子使用参考指南，包括 useOrderEntry、usePositionStream、useOrderbookStream、useCollateral 等。
开发时样式热更新失效或类名不生成？
这是NativeWind最常卡住人的点：它依赖PostCSS插件扫描源码中出现的类名，再生成对应样式对象。一旦类名是动态拼接的，就无法提取：
- ❌
className={<code>text-${size}-500} → 不会生成任何样式 - ✅
className={size === 'sm' ? 'text-sm-500' : 'text-lg-500'}→ 可以 - 更安全的做法是预定义组合：
const sizeClasses = { sm: 'text-sm-500', lg: 'text-lg-500' }，再className={sizeClasses[size]}
另外，确保nativeWindPreset已正确安装，并在babel.config.js里启用babel-plugin-nativewind；否则className会被当普通prop透传给View，完全没效果。
实际项目里，真正难的不是配置同步，而是习惯切换——你得时刻记住：那个在Chrome里点点就能调出来的hover状态，在手机上根本不存在。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
