How to Add TailWind CSS in React Native | Dark Theme using TailWind in React Native

hey guys welcome back to my YouTube channel today in this tutorial I am going to show you how we can add teluent CSS to our react native project and then we can use Tailwind CSS to style our app and I will show you how we can Implement Dark theme and light theme and how to switch between those so if you are interested in this kind of tutorial then hit the like button subscribe to my channel for more tutorials like this and don't forget to hit the notification Bell icon so that you get notified whenever I post a new tutorial on this channel so without wasting any more time let's get started [Music] so here you can see I have created a react native project by using Expo and it is running on iOS simulator now to add the Telvin CSS to our react native project we need to First install a package and that package name is native wind so here you can see we have the quick start guide and here we have the guide for different setup like typescript X4 react native CLI Etc so right now as I have created the project with Expo so I am going to use this but if you are using react native CLI then also you can use that and it is pretty much similar for both of these okay so it will not make any difference if I show you any one of these so let's go to your respective menu and then we need to install the native wind and these two commands we need to use and I am not using yarn so I will just copy this name and then let's close the server and then I will use npm install I is the shorthand for install and then I will use this native wind so let's install it and along with it we need to add this Telvin CSS Dev dependency also and that also we can do similarly npm install this command so these have been added now let's check it here native wind have been installed and we have the Delvin CSS right now after that we need to set up the Telvin CSS and that's why we need to create this tailwind.config.js file and we can create that by using this command so let's paste that here and here we have this file created now we need to do something here so here we can see we need to add this line so let me just copy this from here and replace this content with this one and here we can see custom directory so normally in a react native project we will use SRC directory and within this SRC directory they create components directory screens directory and many more other directories also for the app right so this is a basic structure of our react native app so here in this custom directory we need to mention this SRC directory so instead of this we need to mention SRC if we are using SRC or if you are using any other name any other directory just mention that name here also if you are not using any directory then you don't have to use any directory name here I have seen it is working well on app.js if you don't have any other directory but normally for an app you will need a directory and that directory name should be specified here okay now save this one and after saving it here we have some other configurations for the Babel plugin and we need to add this line in our babel.config.js file so let's go to this file here we don't need to change anything we just need to add this native wind Babble plugin so just save it and after that that's it we can now start writing our code now let's start our project so our project is running and in the app.js we don't need this style sheet we can get rid of this style sheet component from react native and we don't require this one instead now we can start using our Telvin CSS and to use the Telvin CSS we need to provide the class name so this is similar to the web application in react app or Nexus app you would normally need to add this class name and then you can add all Telvin CSS classes and as you can see here it is already giving me the citations obviously because of an extension which I have installed for Tailwind CSS in vs code so I have provided Flex 1 then let's give a background color let me give this background color here now let's see so here you can see the changes so the Telvin CSS is working perfectly well on our app right now we can start styling our app little bit so instead of this background color we don't need to use any background color because normally it would be white and that is what we want but this text was in the center let's just Implement that and to implement that we need to add this justify Center which means it is just justify content Center and then we have item Center which means align item Center so now it is identical as before now let's import use color scheme from native wind and by this use color scheme hook we can add Dark theme to our app so from this we will get color scheme and we will get toggle color scheme so buy this color scheme we can get the current color scheme and by this we can toggle between dark and light theme so let's just Add a switch here and let's give it a value and here check for the color scheme and we have dark and light so I will provide dark so here we can see the switch and it is a react native component by providing this color scheme equal to dark in the value we are implementing it right now it is off that mean it is not dark but if it is on then it will be dark so that is what it means if color scheme equal to light if we provide this value then it means when this switch will be active that time the color scheme light will be activated but I want to activate dark color scheme by turning on the switch and it is not working properly because we need to implement this on change and for this on change I will add this toggle color scheme now our switch is working perfectly well now let's just implement the functionality of this switch and first it will be dark for dark I am going to use a dark background color and in Telvin CSS we can specify Dark theme styling by using this dark colon right so that's how we are implementing it and right now the color scheme is dark so that's why this style is activated if we are switching it off then we can see that we don't have this dark background color right now let's Implement another thing which is the text size and let's add the 2XL text size to this text and after adding this we can see nothing have been changed and that is because in react native we need to add text styling in the text component in web app we can add the text styling like this to the wrapper div element but in react native we cannot do that like this let's cut it from here and let's add that here now we can see it is working perfectly well and also we can add text Center to it and let's add our Dark theme color here and it will be text white so it's good and let's change the text okay so it's working good and I will increase the size to 3XL and I will make it bold so that's how we need to add the text styling to the text component and now I want to do another thing which is this status bar here you can see in the dark mode it is also dark so in the status word style it is auto as we have checked here for the Dark theme so here we need to do that if it is dark then it will be light other than it will be dark so now it is working perfectly well right so this is how we can add Telvin CSS to our diacinative project and as you already know and see here that Telvin CSS is a very popular CSS framework and by using this you can Implement styling very easily to a project as you can see we have very less coding here but we have implemented a very good functionality and some styling also which is still similar to our default styling of the app but it is less coding and with some more functionality to it right for the text we have added this styling if we were using this style sheet component from react native then we will need to create another style object for the text separately on top of the container object which we have added here by using this three class name so this is the power of the tell me in CSS and previously I have already created a short video on my channel Channel regarding this same topic adding the Telvin CSS in react native but that was by using another package and that also works but I find this one much more useful than that so that's why I have created this tutorial and seriously I am loving the experience of this package and personally I prefer to use telwyn CSS so I think in my next tutorial also you will see an app UI by using Telvin CSS in react native so stay tuned for that so this is the tutorial guys I hope you have learned something new from this tutorial if you do so then hit the like button subscribe to my channel for more tutorials like this and let me know by commenting down below if you have any kind of session for me then also let me know and don't forget to share this tutorial with your friends and colleagues and I will see you guys in my next tutorial in the meantime have a great day goodbye

Channel: Pradip Debnath

Views: 9,218

Keywords: tailwind css in react native, tailwind css react native setup, tailwind css react native expo, tailwind css react native install, add tailwind css to react native, how to add tailwind css to react native, how to install tailwind css in react native, nativewind react native, nativewind, nativewind expo, tailwind css, react native, how to use tailwind css in react native, tailwind css in react native using nativewind

Id: 74UCuXzGY4A

Length: 11min 8sec (668 seconds)

Published: Mon Apr 17 2023