Add Tailwind CSS In Your React Native App

Подписаться 27 тыс.

Просмотров 41 тыс.

50% 1

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...
RU-vid Clone App: • 🔴 RU-vid 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)

Опубликовано:

2 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 108

@codewithnomi 11 месяцев назад

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

@sdk_gyan 11 месяцев назад

how to setup dark and light mode

@codewithnomi 11 месяцев назад

@@sdk_gyan will create a tutorial on this 😉

@MovieKaliReactions 10 месяцев назад

bro I have struggled for ages to solve this , i was about to give up @lets connect brother am a react native dev too

@chintype91 10 месяцев назад

Thanks a lot, but i had the one issue with react-navigation. It didn't work

@codewithnomi 10 месяцев назад

@@chintype91 ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE--Kr247pr9hQ.html

@aneneemmanuel7985 9 месяцев назад

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.

@user-qx8kb7xx9x 4 месяца назад

So simple! Thank you very much

@abdullahzafar8886 Год назад

Very mesmerising listening to your voice today ❤

@salmanhamza4202 Год назад

i was waiting for it

@hamzaeshoul 7 месяцев назад

Great tutorial. Thank you very much sir !

@codewithnomi 7 месяцев назад

Thank you ❤️

@ChungKang 5 месяцев назад

Awesome, thanks!

@user-sx7ri3fk6t 3 месяца назад

Thanks a lot man, solved my nighmare in just minutes... stay blessed. :)

@JuanMolina-tl2xc 5 месяцев назад

I love you brother... Thank you

@yuliav4682 11 месяцев назад

thank you dude)

@ghayoorhussain8930 Год назад

Thanks, a lot.

@shahmeergull2040 6 месяцев назад

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?

@brienaustinclayton 10 месяцев назад

Hey , sir I am not able to use colors like bg-teal-200 or whatever color

@ridamnibjia Месяц назад

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", });

@aneneemmanuel7985 5 месяцев назад

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.

@Thunderstormplus Год назад

Thanks =)

@whatsgoingonworld7556 10 месяцев назад

Thanks

@alimardan2665 5 месяцев назад

dude ur awesome

@MrGamalin 11 месяцев назад

Do a video on implementation of RTL and LRT with Tailwind CSS

@ZaminHesenov 10 месяцев назад

If it was received, I would give you 10000000 likes thank youuuu

@kntbruh 5 месяцев назад

thanks a lot

@rangga1204 7 месяцев назад

thanks for the tutorial, but it does not work on CLI

@tundeakinola8122 10 месяцев назад

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??

@dusekdan 4 месяца назад

className - no capital C.

@haidarDevDiary Год назад

Boss 👍

@supercica 9 месяцев назад

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.

@deepanshusinghal2154 6 месяцев назад

facing same issue

@haseebshabir1970 11 месяцев назад

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

@codewithnomi 11 месяцев назад

you need to specify other files directory in the contents property of tailwind config file, this may solve the issue

@haseebshabir1970 11 месяцев назад

@@codewithnomi sir I've done that but it is not working

@abdullahzafar8886 Год назад

MashaAllah shah g i miss u so much

@codewithnomi Год назад

me too bro 🥰

@JavierDiaz-jh7ly 9 месяцев назад

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.

@codewithnomi 9 месяцев назад

thats very strange!! it should work because I'm currently using this in a project.

@prateekpuri796 7 месяцев назад

Hi DId you get the solution for ir. I am also facing same issue.

@JavierDiaz-jh7ly 7 месяцев назад

@@prateekpuri796 I tried downgrading the tailwind version but doesn't works. So finally I made it without tailwind, just css

@prateekpuri796 7 месяцев назад

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

@prateekpuri796 7 месяцев назад

Expo web*

@chamaldezilva 11 месяцев назад

Is it possible to add the conditional styles using nativewind? If yes how can I do that?

@codewithnomi 11 месяцев назад

yes className={ condition? "style1" : "style2" }

@chamaldezilva 11 месяцев назад

@@codewithnomi thank you!

@JoDaniel_Keys 3 месяца назад

i am unable to add shadow

@Slayzan Год назад

Could you make a tutorial where you explain how to get virtual phone device like you on the right ?

@codewithnomi Год назад

sure, I will make a video on this someday 😉

@zaidshaikh2449 9 месяцев назад

We are still waiting for this video@@codewithnomi

@albinholmgren9045 11 месяцев назад

the expo gives me error: "use process(css).then(cb)" do you know what it might be and how to solve it?

@codewithnomi 11 месяцев назад

I'll check and get back to you 🙂

@albinholmgren9045 11 месяцев назад

@@codewithnomi Thank you very much!

@albinholmgren9045 11 месяцев назад

@@codewithnomi thank you very much!

@codewithnomi 11 месяцев назад

try using this version of tailwind : tailwindcss@3.3.2

@albinholmgren9045 11 месяцев назад

@@codewithnomi i did but still does not seem to fix the problem

@gangulyyadav2555 11 месяцев назад

does it only work with expo projec?

@codewithnomi 11 месяцев назад

the setup process is the same for both expo and cli

@RonanThomas 5 месяцев назад

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?

@lalithadwarapureddi3283 5 месяцев назад

Yes

@codewithnomi 5 месяцев назад

Maybe it's not implemented correctly, did you follow all the steps?

@RonanThomas 5 месяцев назад

@@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.

@codewithnomi 5 месяцев назад

@@RonanThomas I'm currently working on a series where I'm building a firebase app, I'll explain nativewind 4 setup in that series 😉

@abhishekpatil4649 9 месяцев назад

Sir i am not getting tailwind classes suggestions in vs code when i start typing classes. what can i do for that

@codewithnomi 9 месяцев назад

you need to install "tailwind intellicence" extension on vs code

@abhishekpatil4649 9 месяцев назад

@@codewithnomi sir have it installed already

@abhishekpatil4649 9 месяцев назад

@@codewithnomi thank you sir. i got the solution

@Anonymous-pf4cr 6 месяцев назад

still not working using nativewind any suggestions

@codewithnomi 5 месяцев назад

try installing latest nativewind 4, i'll create a tutorial on that soon 😉

@mohanj2849 9 месяцев назад

bro how to open , mobile preview on windows like ios ?? plz replay..

@codewithnomi 9 месяцев назад

install android studio for android simulator

@anikatahsin7716 8 месяцев назад

not working nativewind. frustrating to do the react native project using tailwind css.

@codewithnomi 8 месяцев назад

try using tailwindcss 3.3.2

@vuaiduong8918 9 месяцев назад

not working with me

@user-zq5iy8dr4j 8 месяцев назад

Hi, nice video, how to add google font?

@codewithnomi 8 месяцев назад

I'll create a tutorial on adding custom fonts 😉

@user-zq5iy8dr4j 8 месяцев назад

@@codewithnomi thanks, i wait it very much)

@user-zq5iy8dr4j 8 месяцев назад

@@codewithnomi please, custom and google fonts

@febrilian 10 месяцев назад

which one do u prefer?

@codewithnomi 10 месяцев назад

nativewind

@danieliberi Год назад

nativewind doesn’t work for me and i’ve done everything to make it work

@codewithnomi Год назад

if you've followed the docs just restart the server and it should work 😉

@danieliberi Год назад

@@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

@codewithnomi Год назад

sure lets connect on Instagram instagram.com/codewithnomi_?igshid=ZDc4ODBmNjlmNQ==

@danieliberi Год назад

@@codewithnomi i’ve sent you a dm bro

@rohitbarnwal1420 Год назад

@@danieliberi any luck??? not working for me as well.... done everything according to the docs....

@manojmohapatra986 Год назад

Where are the auto suggestions

@codewithnomi Год назад

suggestions only show up when we use the className property not inside the style property

@manojmohapatra986 Год назад

@@codewithnomi he thnx buddy 🫡

@harizfauzil7672 10 месяцев назад

why don't you make a tutorial from scratch, I'm a little confused about where to start

@codewithnomi 10 месяцев назад

I literally created this tutorial from scratch 😶

@harizfauzil7672 10 месяцев назад

@@codewithnomi I mean from the start since installing the dependencies😅

@waseemahmed5916 11 месяцев назад

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'.

@codewithnomi 11 месяцев назад

not sure about this one bro, you have to search online 😉

@waseemahmed5916 11 месяцев назад

@@codewithnomi ok if u find something regarding this do let me know