How to install TailWind CSS and Nativewind v4 in React Native v0.76 and Expo v52

[@zawadbinsharif]

Nativewind docs: www.nativewind.dev/getting-started/expo-router
React Native docs recommended the framework: reactnative.dev/docs/environment-setup
GitHub: github.com/ZAWADBINSHARIF/Expo-v52-Nativewind-v4-tailwindCSS-v3.4.15-with-typescript

[@laxmanraiyt2536]

please tell us how to install nativewind in npx create-expo-app@latest --template blank

[@Faraz-o2m]

I am just started learning react and i was stuck i this ...but you saved my a lot of time ....Thank you...

[@zawadbinsharif]

@@Faraz-o2m your're welcome. I'm happy to help you 😄. I hope you can achieve your goals.

[@CaseStudyQB]

Thanks for this, I didn't know I had to create the babel file

[@ayowj]

Thanks! I've been trying to figure this one out for a long while lol those outdated vids got me confused lmao

[@samuelaubyn6919]

thank you very much. i have spent the last trying to get it to work but was unsuccessful. but now it works thanks to your video. thanks again

[@zawadbinsharif]

@@samuelaubyn6919 You're most welcome 🤗

[@emswoo]

This is the only tutorial that worked for me. Thank you so much.

[@zawadbinsharif]

@@emswoo you're most welcome 🤗

[@ghislainkouassi7098]

Thank you very much. I was able to implement version 4 of NativeWind in my project thanks to your tutorial. 👍👍👍👍

[@zawadbinsharif]

@@ghislainkouassi7098 your're welcome. I'm happy to help you 😄

[@tecsoluctions8684]

thanks bro you saved me, i had no idea how to install tailwind

[@zawadbinsharif]

@@tecsoluctions8684 you're most welcome 🤗

[@fathulirfaan3917]

Thank you bro for your amazing vid! Just curious, what's font are you using?

[@zawadbinsharif]

font family name: MV Boli, 'Courier New', monospace

[@fathulirfaan3917]

@@zawadbinsharif Thank you!

[@masiemil2584]

why do some stylings dont work? only bg-white is working and flex. I cant edit text in any way.

[@zeecreations8928]

Excellent bro U gave solution to do what when babel.config.js didn't auto created with new project

[@zawadbinsharif]

Glad it helped ☺

[@keystoller]

Thanks bro
This is the best

[@AnuragKumar-ov3hb]

just a question, if i make more screens under tab route of auth do i need to import global.css into those file too or only importing in _layout.tsx will work for all of other screens

[@zawadbinsharif]

@@AnuragKumar-ov3hb You have to import the global.css file only once in the app/_layout.tsx file. You don't need to import it in the other layout files.

[@johnbenedictsantos9786]

Without expo, how to setup nativewind? I am using react native 0.76 or react-native-community/cli anyone can guide me?

[@zawadbinsharif]

@@johnbenedictsantos9786 The installation process is same like expo framework. Here is the link of Nativewind docs which have the steps to download Nativewind in react native Cli. www.nativewind.dev/getting-started/react-native

[@DungLe-rc7ex]

unfortunately I couldn't make it work :( I followed the documentation step-by-step, including adding custom metro.config.js with global css. But it does not work at all :(( any ideas?

[@zawadbinsharif]

@@DungLe-rc7ex maybe you miss something. This is the GitHub link of the Expo project with Tailwind CSS github.com/ZAWADBINSHARIF/Expo-v52-Nativewind-v4-tailwindCSS-v3.4.15-with-typescript
Download it and run it. Match this GitHub project to your project step by step. Also, match all the package versions in the package.json file.

[@DungLe-rc7ex]

@@zawadbinsharif it's extremely strange that I've cloned your repo and compared every file (configs, package.json). I even tried replacing your files with mine, and everything worked perfectly on your repo, lol. But it didn't on my project, haha. I gave up for now and backed to nativewind v2, and it works as expected :|

[@axelmsilvadev]

@@DungLe-rc7ex i didnt have errors, maybe is your import, i had a problem but i had resolve importing global.css in _layout.tsx principal not the layout in (tabs)-_layout.tsx

[@rizzwanahmed2870]

thanks bro this helps alot

[@fernandonunezvela]

thank you so much for the help

[@NayeffBOINARIZIKI]

Thank you so so much bro 🙏

[@zawadbinsharif]

@@NayeffBOINARIZIKI you're most welcome 🤗

[@abr2736]

Thank You Very Much!

[@SimaDutta-w6t]

You are great sir

[@surhodev9826]

Thanks :)

[@katadayat3746]

Thanks mate

[@zawadbinsharif]

@@katadayat3746 you're most welcome 🤗

[@Comp-j7h]

thank you so much

[@a.v5221]

thank u sir

[@AkobirZiyodullayev-l1l]

Best of best

[@zawadbinsharif]

Thanks 😊

[@alexandrepellegrino2699]

thanks bro!

[@zawadbinsharif]

Welcome!

[@MohammedAlziko]

nice

[@dilannawarathne]

Thank you so much!

[@zawadbinsharif]

@@dilannawarathne you're welcome