Add Tailwind CSS In Your React Native App
ฝัง
- เผยแพร่เมื่อ 8 มิ.ย. 2024
- Hello everyone, today's video is about how you can add tailwind css into your react native app, I'm going to show you two methods to integrate tailwind into react native app.
make sure you like this video and subscribe the channel for more react native videos.
Github repo: github.com/syednomishah/React...
React Native : reactnative.dev
First Method (TWRNC) : www.npmjs.com/package/twrnc?a...
Second Method (NativeWind) : www.nativewind.dev
Tailwind CSS classes cheatsheet : nerdcave.com/tailwind-cheat-s...
Add Navigation in React Native : • Food Delivery App with...
If you appreciate my work and you would like to support my channel: www.buymeacoffee.com/syednoman
🚨 more videos on react native:
Food Recipe App with Reanimated : • 🔴 Build Food Recipe Ap...
AI Voice Assistant with ChatGPT & DALL-E : • 🔴 Build a React Native...
Weather App : • 🔴 Build Weather App Us...
Movie App : • 🔴 Build Movie App Usin...
Coffee App UI: • 🔴 Coffee App UI - Reac...
TH-cam Clone App: • 🔴 TH-cam Clone - Reac...
Login | SignUp UI : • 🔴 Login | SignUp UI - ...
Fast Food App : • 🔴 Fast Food App UI - R...
App Store UI : • 🔴 App Store UI - React...
Fruit Shop UI : • 🔴 Fruit Shop UI - Reac...
Firebase Authentication React Native: • React Native Firebase ...
Food Delivery App : • Food Delivery App with...
Learn React Native: • Build Expensify App Wi...
Learn Reactjs: • Modern React For Begin...
#expo #reactnative #tailwindcss #javascript #programming #typescript #speedcode #coding #design #appdevelopment #reactjs #ui #uiux #reactnavigation #reactnativetutorial #react #animation #reactjs #navigation #navigationbar #uidesign #mobiledevelopment #iosdeveloper #buildinpublic #opensource #reactnativeapp #reactjstutorial #typescript
react native animations
animations in react native
react native tutorial
react native app
react native tutorial for beginners
react native project
react native course
add tailwind css in react native
react native ui
▬▬▬▬ Contents of this video ▬▬▬▬▬▬▬▬▬▬
00:00 - Intro
00:18 - Create React Native App
01:32 - First Method (TWRNC)
04:24 - Second Method (NativeWind)
you may face this error with newer version of tailwindcss.
Error: Use process(css).then(cb) to work with async plugins]
To fix this error just downgrade your tailwindcss version, run this command:
npm i --dev tailwindcss@3.3.2
If you are using yarn then run this command:
yarn add --dev tailwindcss@3.3.2
how to setup dark and light mode
@@sdk_gyan will create a tutorial on this 😉
bro I have struggled for ages to solve this , i was about to give up
@lets connect brother am a react native dev too
Thanks a lot, but i had the one issue with react-navigation. It didn't work
@@chintype91 th-cam.com/video/-Kr247pr9hQ/w-d-xo.html
So simple! Thank you very much
Very mesmerising listening to your voice today ❤
Great tutorial. Thank you very much sir !
Thank you ❤️
i was waiting for it
If you're runnig Expo on ANDROID and you're having issues adding the shadows, use this:
For TailwindCSS (only):
style={[tw`bg-teal-500 p-4 rounded-lg`, Platform.OS === 'android' && { elevation: 20 }]}
For NativeWind & TailwindCSS:
className="bg-teal-500 p-4 rounded-lg" style={[Platform.OS === 'android' && { elevation: 20 }]}
Thanks for sharing, Nomi. Nice Tutorial.
Thanks a lot man, solved my nighmare in just minutes... stay blessed.
:)
Awesome, thanks!
I love you brother... Thank you
thank you dude)
Thanks, a lot.
bro it works well with first method but when i try to switch on 2nd method using on cli it just dont apply classes added on elements you know how to fix it?
Hey , sir
I am not able to use colors like bg-teal-200 or whatever color
dude ur awesome
Thanks =)
Thanks
if you're using the nativewind css and opening the app in web then in the App.js add this after the import:
import { NativeWindStyleSheet } from "nativewind";
NativeWindStyleSheet.setOutput({
default: "native",
});
I don't know if this'll help anyone but I noticed (ON MY COMPUTER) that if I install method 1 before installing method 2, then method 2 won't work at all (i.e. I won't be able to use className= "..."
To fix this, I only install "NativeWind" first (or alone). If I want to install both NativeWind & twrnc, I'll install NativeWind first and then later, I'll install twrnc.
I don't know if this is a general issue but maybe it'll save someone's time while coding. Thanks, Nomi.
Do a video on implementation of RTL and LRT with Tailwind CSS
thanks a lot
If it was received, I would give you 10000000 likes thank youuuu
I have tried using it with typescript tsx file but it was giving error with the ClassName getting red lines.. How does one solve it??
className - no capital C.
thanks for the tutorial, but it does not work on CLI
Hi Nomi, thank you for this video. I did this app and I tried to build .apk with expo eas. In development everything works but when I install .apk to Android phone, it starts, it opens expo splash screen and then just shuts down. There is no errors or any log and I can not find what is the problem. Have you ever had this situation. Do you have any advice for me? Thank you. And again thanks so much for these videos.
facing same issue
Sir I'm following all the steps as you shown in video but at the end i got error and when i search this error on stack overflow it suggests me to downgrade the tailwind css version when i do so its classes only work in app. Js file not in other files. Please help me I'm stuck here very badly
you need to specify other files directory in the contents property of tailwind config file, this may solve the issue
@@codewithnomi sir I've done that but it is not working
MashaAllah shah g i miss u so much
me too bro 🥰
Boss 👍
Is it possible to add the conditional styles using nativewind? If yes how can I do that?
yes
className={ condition? "style1" : "style2" }
@@codewithnomi thank you!
Nice tutorial. I'm facing an issue with text colors. When I change the className to modify the background color, size, or other properties, it works. However, when I try to change the text color, it's the only property that doesn't seem to work. I'm using Tailwind CSS version 3.3.2 because version 3.3.3 breaks everything.
thats very strange!!
it should work because I'm currently using this in a project.
Hi DId you get the solution for ir. I am also facing same issue.
@@prateekpuri796 I tried downgrading the tailwind version but doesn't works. So finally I made it without tailwind, just css
I found the issue, the issue is with the exp web only and it works just fine with expo go app on my android device
Expo web*
i am unable to add shadow
does it only work with expo projec?
the setup process is the same for both expo and cli
Could you make a tutorial where you explain how to get virtual phone device like you on the right ?
sure, I will make a video on this someday 😉
We are still waiting for this video@@codewithnomi
the expo gives me error: "use process(css).then(cb)"
do you know what it might be and how to solve it?
I'll check and get back to you 🙂
@@codewithnomi Thank you very much!
@@codewithnomi thank you very much!
try using this version of tailwind : tailwindcss@3.3.2
@@codewithnomi i did but still does not seem to fix the problem
Sir i am not getting tailwind classes suggestions in vs code when i start typing classes. what can i do for that
you need to install "tailwind intellicence" extension on vs code
@@codewithnomi sir have it installed already
@@codewithnomi thank you sir. i got the solution
Hi Nomi, followed the video, have tailwindcss and nativewind installed but when l write the className css in my homeScreen file, nothing happens, cant change background colour or centre text or anything. Any tips here?
Yes
Maybe it's not implemented correctly, did you follow all the steps?
@@codewithnomi I followed all the steps provided for Nativewind v4 in their documentation, I’m using React Native with Expo Router v2 and Typescript. Not getting any errors but it’s just not doing anything in the simulator.
@@RonanThomas I'm currently working on a series where I'm building a firebase app, I'll explain nativewind 4 setup in that series 😉
still not working using nativewind any suggestions
try installing latest nativewind 4, i'll create a tutorial on that soon 😉
bro how to open , mobile preview on windows like ios ?? plz replay..
install android studio for android simulator
not working nativewind. frustrating to do the react native project using tailwind css.
try using tailwindcss 3.3.2
not working with me
Hi, nice video, how to add google font?
I'll create a tutorial on adding custom fonts 😉
@@codewithnomi thanks, i wait it very much)
@@codewithnomi please, custom and google fonts
which one do u prefer?
nativewind
nativewind doesn’t work for me and i’ve done everything to make it work
if you've followed the docs just restart the server and it should work 😉
@@codewithnomi is there a way i can send you a message privately and show you how my code is? or could it because of react navigation
sure lets connect on Instagram
instagram.com/codewithnomi_?igshid=ZDc4ODBmNjlmNQ==
@@codewithnomi i’ve sent you a dm bro
@@danieliberi any luck??? not working for me as well.... done everything according to the docs....
Where are the auto suggestions
suggestions only show up when we use the className property not inside the style property
@@codewithnomi he thnx buddy 🫡
why don't you make a tutorial from scratch, I'm a little confused about where to start
I literally created this tutorial from scratch 😶
@@codewithnomi I mean from the start since installing the dependencies😅
i am using typescript when i write className in View Tag it gives me this error can u plz resolve my issue No overload matches this call.
Overload 1 of 2, '(props: TextProps | Readonly): Text', gave the following error.
Type '{ children: string; className: string; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly'.
Property 'className' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly'.
Overload 2 of 2, '(props: TextProps, context: any): Text', gave the following error.
Type '{ children: string; className: string; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly'.
Property 'className' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly'.
not sure about this one bro, you have to search online 😉
@@codewithnomi ok if u find something regarding this do let me know
did you solve it???
I need to contact you, how to, email or anything
send a message on Insta
instagram.com/codewithnomi_?igshid=ZDc4ODBmNjlmNQ==
thanks alot
Happy to help