Gus
Gus
PostsComments
TTCTheo's Typesafe Cult
Created by Gus on 7/10/2023 in #questions
can't get to work NativeWind for Expo Mobile and Web
Hi, I've been trying the whole day to achieve this. I've installed NativeWind, followed the guide (https://www.nativewind.dev/quick-starts/expo) and it worked for mobile but not for web. So, after playing a while with webpack and postcss, I managed to get it work, but then it stopped working for mobile. 
import { StatusBar } from "expo-status-bar";
import { Text, View } from "react-native";

/* import "./style.css"; */

export default function App() {
  return (
    <View className="flex-1 items-center justify-center bg-white">
      <Text className="text-red-600 text-2xl">Tailwind is up now! :D</Text>
      <StatusBar style="auto" />
    </View>
  );
}
import { StatusBar } from "expo-status-bar";
import { Text, View } from "react-native";

/* import "./style.css"; */

export default function App() {
  return (
    <View className="flex-1 items-center justify-center bg-white">
      <Text className="text-red-600 text-2xl">Tailwind is up now! :D</Text>
      <StatusBar style="auto" />
    </View>
  );
}
If I import the stylesheet, it works for web but not for mobile. If I don't, it works the other way around (i think). Adding 
NativeWindStyleSheet.setOutput({ default: "native" });
NativeWindStyleSheet.setOutput({ default: "native" });
solved the problem, but this is a workaround for Expo SDK <=45, as stated in the docs. I'd love to make it work the intended way
7 replies