Tailwind css 无法在 React Native 中工作

Question

<View className="flex-1 items-center justify-center bg-white">
  <Text className="text-3xl">Hello World!</Text>
  

tailwind css 在 React Native 中不起作用。它显示在移动设备屏幕的左上角

我尝试安装所有必需的组件，例如

npm 安装nativewind npm 安装 tailwindcss --save-dev npx tailwindcss 初始化 npm 更新 tailwindcss nativewind 添加了 tailwindcss 配置

内容：[“./app//*.{js,jsx,ts,tsx}”,“./components//*.{js,jsx,ts,tsx}”],

在 bable 文件中添加了插件：["nativewind/babel"]

Answer 1

添加 Babel 预设模块：metro-react-native-babel-preset 对于您的 React Native 项目至关重要。它允许 Babel 为 React Native 环境正确转换代码，从而支持 JSX 和现代 JavaScript 功能。

您的 Babel 配置应如下所示：

module.exports = {
    presets: ['module:metro-react-native-babel-preset'],
    plugins: ['nativewind/babel'],
};