Tailwind CSS无效果求助：React Native中元素无法居中问题

问题描述 #

在React Native项目中使用tailwind-rn时遇到样式失效问题：运行expo start启动项目后，代码中设置的flex-1 items-center justify-center居中样式未生效，元素无法实现居中对齐。

项目代码及配置 #

App.jsx代码 #

import { StyleSheet, Text, View, Button } from 'react-native';
import {TailwindProvider} from 'tailwind-rn';
import utilities from './tailwind.json';
import {useTailwind} from 'tailwind-rn';

export default function App() {

  const tailwind = useTailwind();
  return (
    <TailwindProvider utilities={utilities}>
      <View style={tailwind('flex-1 items-center justify-center')}>
        <Text>Hello</Text>
        <StatusBar style="auto" />
    </View>
   </TailwindProvider>
    
  );
}

package.json配置 #

{
  "name": "mari-application",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject",
    "build:tailwind": "tailwindcss --input input.css --output tailwind.css --no-autoprefixer && tailwind-rn",
    "dev:tailwind": "concurrently \"tailwindcss --input input.css --output tailwind.css --no-autoprefixer --watch\" \"tailwind-rn --watch\""
  },
  "dependencies": {
    "expo": "~45.0.0",
    "expo-status-bar": "~1.3.0",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-native": "0.68.2",
    "react-native-web": "0.17.7",
    "tailwind-rn": "^4.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "concurrently": "^7.2.2",
    "postcss": "^8.4.14",
    "tailwindcss": "^3.1.6"
  },
  "private": true
}

解决方案 #

1. 修正useTailwind的调用位置 #

useTailwind必须在TailwindProvider提供的上下文环境内调用，当前代码中useTailwind()写在了TailwindProvider之外，导致无法获取到样式配置。将其移到Provider内部的组件中即可解决：

import { StyleSheet, Text, View, StatusBar } from 'react-native';
import { TailwindProvider, useTailwind } from 'tailwind-rn';
import utilities from './tailwind.json';

// 拆分出内部组件，在Provider上下文内使用useTailwind
function MainContent() {
  const tailwind = useTailwind();
  return (
    <View style={tailwind('flex-1 items-center justify-center')}>
      <Text>Hello</Text>
      <StatusBar style="auto" />
    </View>
  );
}

export default function App() {
  return (
    <TailwindProvider utilities={utilities}>
      <MainContent />
    </TailwindProvider>
  );
}

2. 确保tailwind.json已正确生成 #

执行以下命令生成或更新样式配置文件：

• 生产环境：npm run build:tailwind
• 开发环境：npm run dev:tailwind（监听文件变化自动更新）

3. 检查input.css文件完整性 #

确保项目根目录下存在input.css文件，且包含Tailwind的基础指令：

@tailwind base;
@tailwind components;
@tailwind utilities;

内容的提问来源于stack exchange，提问作者airjlee