React Native不支持直接使用Tailwind CSS类名，需通过nativewind在构建时编译为内联样式，并配合styled组件或Babel插件启用className支持；部分Web类名（如flex-wrap、hover、border-t）在RN中无效或行为不同，复杂场景应优先使用style。
React Native不支持直接使用Tailwind CSS类名
因为React Native的样式系统和Web完全不同：它不解析CSS，也没有DOM、CSSOM或类名映射机制。你在Web上写的 className="text-blue-500 p-4 flex items-center" 在React Native里完全无效——JSX元素根本不会读取这个属性，更不会自动转换成 style 对象。
用nativewind实现类名到style的运行时转换
nativewind 是目前最成熟、零配置（配合Expo）的方案，它在构建时把Tailwind类名编译为React Native兼容的内联样式对象，并通过Babel插件注入到 styled 组件或 className prop中。
- 必须用
nativewind提供的styled包装组件，或确保目标组件支持className（如Expo默认启用，纯RN需配Babel插件） - 不能直接在原生组件如
<view></view>上写className，除非你已用createNativeStyle或styled(View)封装过 - 只支持标准Tailwind类名，自定义插件（如
@tailwindcss/forms）需额外配置setup函数并启用对应解析器 - 响应式断点（
md:text-lg）默认不可用，需手动开启experimentalResponsive并搭配useColorScheme或屏幕尺寸监听
示例：
import { styled } from 'nativewind';
import { Text, View } from 'react-native';
<p>const StyledView = styled(View);
const StyledText = styled(Text);</p><p>export default function App() {
return (
<StyledView className="bg-white p-4 flex items-center">
<StyledText className="text-blue-500 font-bold">Hello</StyledText>
</StyledView>
);
}Web端class名无法1:1复用的常见坑
即使用了nativewind，很多Web常用的类名在React Native里会静默失效或行为异常：
shopify-app-react-router
下载
构建 Shopify 嵌入式应用（Embedded App）的开发技能：基于 @shopify/shopify-app-react-router + React Router v7 + Admin API 2026-04。覆盖 shopifyApp 配置、authenticate.admin 的 GraphQL/REST 调用、Webhook 校验、Session 存储、订阅计费、App Bridge 导航、部署，并新增：适用场景判断、安全最佳实践、错误处理与容错、最佳实践、常见问题 FAQ、高级场景。G
立即学习“前端免费学习笔记（深入）”；
-
flex-row/flex-col有效，但flex-wrap不支持（React Native的Flex不支持换行，需用flexWrap: 'wrap'手动加） -
hover:bg-gray-100无意义（无鼠标悬停概念），nativewind默认忽略伪类，除非你显式启用并自己实现press状态逻辑 -
border类如border-t只能作用于View，对Text无效（RN中Text不支持边框） -
text-center在Text内部生效，但在View上写等同于alignItems: 'center'—— 和Web语义不同，容易误判 - 字体相关类（
font-mono,tracking-wider）需提前在expo-font或react-native-fonts中加载对应字体，否则被忽略
复杂布局建议放弃纯类名，混合使用style prop
当遇到以下情况时，硬套Tailwind类名反而增加调试成本：
- 需要动态计算尺寸（如
height: SCREEN_HEIGHT * 0.6） - 依赖平台差异（
Platform.OS === 'ios' ? 'px-6' : 'px-4'不推荐，应改用style={[styles.base, Platform.OS === 'ios' && styles.iosPadding]}） - 动画属性（
transform,opacity）必须走AnimatedAPI，无法用animate-fade-in这类类名 - 第三方UI库组件（如
@gorhom/bottom-sheet）通常不接受className，只能传style
这时候直接写 style 更清晰、可控，也避免nativewind编译链引入不确定性。
类名复用不是目标，开发效率和运行时稳定性才是。Tailwind在RN里是辅助工具，不是样式真理。
