tailwind-rn在React Native项目中无作用问题求助

AI 小北

2026-8-6

tailwind-rn在React Native应用中无法生效

执行yarn build:tailwind时，CSS文件与json文件可正常构建，但应用内tailwind样式完全不生效。已尝试Stack Overflow相关问答及tailwind-rn官方GitHub仓库的建议，仍未排查出问题。

代码信息

App.js

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

export default function App() {
  const tw = useTailwind();
  return (
    <TailwindProvider utilities={utilities}>
      <View style={tw("justify-center flex-1 items-center")}>
        <Text style={tw("text-red-600 justify-center")}>
          Open up App.js to start working on your!
        </Text>
        <StatusBar style="auto" />
      </View>
    </TailwindProvider>
  );
}

Tailwind-config.js

module.exports = {
  content: ["./*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
  corePlugins: require("tailwind-rn/unsupported-core-plugins"),
};