6 replies

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

Expo | NativeWind

A example of an Expo project can be found on Github

TTC

Theo's Typesafe Cult•3y ago•

6 replies

Gus

can't get to work NativeWind for Expo Mobile and Web

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

Expo | NativeWind

A example of an Expo project can be found on Github

can't get to work NativeWind for Expo Mobile and Web

Similar Threads

can't get to work NativeWind for Expo Mobile and Web

Similar Threads

Similar Threads

Similar Threads