CODEWITHSUNDEEP
react-nativeexponativewind
dkorsakas
dkorsakas

Reputation: 177

After setup nativewind does not work with expo

Update: tailwind started working, I have no clue why it just started working without changing anything in the code base. The only difference was that I switched to a different phone to pixel 4 in Android Studio when testing, but I do not think this is the cause.

Original question:

I followed every step in the documentation for the setup, but still cannot get nativewind to work

https://www.nativewind.dev/quick-starts/expo (documentation link)

enter image description here

enter image description here

enter image description here

enter image description here

Upvotes: 4

Views: 9363

Answers (9)

Ahmad Raza Khokhar
Ahmad Raza Khokhar

Reputation: 21

Well I solved the same issue by by passing the path to "global.css" in the root index.tsx/App.tsx file and the classes just started to work.

Another problem That I faced was for the mode switch, it was also solved by adding "class" into the tailwind.config.js which is as follows:

import gluestackPlugin from '@gluestack-ui/nativewind-utils/tailwind-plugin';

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: "class", // change this to class
  
  /* rest of the config code here*/
  }

Hope this one helped!

Upvotes: 1

Chirag Varu
Chirag Varu

Reputation: 1

hey there i tried every thing and here what worked for me,

do npm install [email protected]

this is the version u have to work with and than run

npx expo start -c or npm start -c

both command to start the app works as they both start an fresh app every time with clearing cache

Hope this helps someone

Upvotes: 0

Radek
Radek

Reputation: 1

I've tried all the methods with no luck then I randomly toggled prettier back to :

"singleQuote": true

and it started working again! Hope it helps!

Upvotes: 0

Pankaj Namotra
Pankaj Namotra

Reputation: 1

This is not working because it is not compatible with the nativewind package in package.json

  1. use command DEBUG=nativewind npx expo start -c instead of npx expo start -c
  2. I found a problem that [email protected] - expected version: 4.12.0 Your project may not work correctly until you install the expected versions of the packages.
  3. After running the command npm install [email protected] and npx expo start -c tailwind is working fine on both mobile and web

Upvotes: 0

hossain45
hossain45

Reputation: 101

I had the same problem. I followed the documentation and set everything correctly, but styles were not applied. Hours after crawling on the internet I found a simple solution, which is "clear the cache".

expo start -c

for more details, check nativewind docs

Upvotes: 3

Krystian
Krystian

Reputation: 1

Thanks for the instructions, but the additional index.js file and the change in package.json were not necessary. I just followed the steps from the link you provided with the v4 docs https://www.nativewind.dev/v4/getting-started/expo-router. The crucial step was resetting the cache with npx expo start -c, which is mentioned in the troubleshooting guide on the NativeWind page https://www.nativewind.dev/guides/troubleshooting. Everything is working perfectly now.

Upvotes: 0

Chukumela Wilson
Chukumela Wilson

Reputation: 81

Ok, for expo sdk >=50, follow this link https://www.nativewind.dev/v4/getting-started/expo-router

after setting up,

create an index.js file in the root of your folder and add the following lines of code:

import "./global.css"; 
import { registerRootComponent } from "expo";
import { ExpoRoot } from "expo-router";
export function App() {
 const ctx = require.context("./app");
 return <ExpoRoot context={ctx} />;
}
registerRootComponent(App);

Then go to your package.json file and change the main field to point to index.js i.e "main":"index.js"

Let me know if this helps.

Upvotes: 0

Joe Smalley
Joe Smalley

Reputation: 313

I also had the same issue following the Nativewind + Expo docs. The example project is now two years out of date and uses Expo v46 (v51 is current).

Then I found this starter repo which has v51 working with Nativewind v4. I updated my project's dependencies to suit, and I also copied some changes from metro.config.js and tailwind.config.js into my project. It's now working.

Hope this helps someone.

Upvotes: 4

Juanma
Juanma

Reputation: 686

Your problem probably is in your tailwind.config.js. This line:

content: ["./App.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}"],

The file app/index.js that you are trying to use is not included. All the files (or folders) that you are planning to use with library should be listed there.

Try updating that line to this:

content: ["app/index.js", "./App.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}"],

In this line, we added the index.js file.

More info, check the docs.

Upvotes: 1

Related Questions