CODEWITHSUNDEEP
androidreact-nativeexpotailwind-cssnativewind
Supriya Gorai
Supriya Gorai

Reputation: 372

Nativewind not working in both android and web expo

I Set up a project in expo Nativewind for both web and android platforms. But getting errors in the CSS file. But project is running in web.

Android Bundling failed 2084ms Unable to resolve "./styles.css" from "App.tsx"

styles.css

@tailwind components;
@tailwind utilities;

App.tsx-

import { StatusBar } from 'expo-status-bar';
import { Text, View } from 'react-native';

import './styles.css';
export default function App() {
  const variable: string = 'variable';
  return (
    <View className="flex-1 items-center justify-center bg-gray-600">
      <Text className="text-red-200">
        Open up App.js to start working on your app!
      </Text>
      <StatusBar style="auto" />
    </View>
  );
}

Upvotes: 1

Views: 379

Answers (1)

Xero
Xero

Reputation: 4173

You can use dynamic import Conditional imports in React Native

You must create

App.js # picked up by webpack, Rollup or any other Web bundler
App.native.js

with the import './styles.css';in App.js

In my case, to avoid to duplicate code in App.js and App.native.js, I have create a Main.tsx file to share code

  1. App.native.js
import * as React from 'react'
import Main from './src/Main'

const App = () => {
    return <Main />
}

export default App
  1. App.js
import * as React from 'react'
import Main from './src/Main'

// import in expo web
import './App.css'

const App = () => {
    return <Main />
}

export default App

Upvotes: 0

Related Questions