Add Tailwind CSS to React Native / Expo App in 10 Mins

hello everyone hope you're are doing great uh so I'm going to show you how you can add tent to your native or Expo project it's a CSS library and it helps you in different kind of CSS properties so you don't need to write these kind of things which you usually write with the stylesheet as you can see I have a simple button over here which I can click on as you can see nothing happens just a simple demo button I'm going to add Tailwind to it and I'm going to style it with with the help of Tailwind so I want you to go to this website called native wind uh and uh basically it's a website for the react native Tailwind version and here you can select the kind of project you running so I'm on a Expo project as you can see do Expo is over here and whatever project you have just selected from here I'm going to select XO and after that I'm going to come here and uh copy this and add this uh Native Tailwind to my uh package Json or to my packages so I'm going to install it it's a simple app and uh basically it's just a budget app but this is just a welcome screen of it just to show you a demo and um then I'm going to do this one also you can also do this with the npm or the ywn package so I'm using npm and that's why I'm going to use the npm commands uh so now we are going to wait so that it's the native wind Library appears over here right now we can see that there is no uh Native wind Library so just wait for it and uh as soon as it is it is installed it will appear over here in this package J file so yeah so as you can see it has been installed and uh now I'm going to uh install a version of the Tailwind CSS 3.3.2 why because I faced a lot of issues with it uh it was not working with my project so so you can install this package that's uh that is mentioned which will install the latest one if it's not working it's because uh because of the support for the uh react native projects so you can install the uh 3.3.2 version it will work with any re native or EXO project so most of the time this latest version does not work so this is the uh version that you would need to install so I'm going to run this command and if you guys are wondering how I know this because I have practiced this a lot of times in my projects that uh the latest elevant Library does not work with the native I don't know why they are not you know solving this issue but it's a very uh major issue in I think they should solve this issue so now we're going to run this command so that we can this command will basically create uh a file a t config file over here on the left side of the directory as you can see so as soon as this command is run it will generate this file which is a Tailwind configuration file now we are going to paste some content into it so first of all I'm going to copy this uh whole line and I'm going to come to this file and in the place of the I think I should I cop yeah so now I'm going to paste this I have pasted and now it says custom directory here you have to add the directory where you want to use the Tailwind so my welcome. Js file it is inside the pages right Pages directory so what I'm going to do is I'm going to change this to do pages right so now it will look for the files inside pages and it will look for these file extension extensions sojs or TS which is basically typescript and other than that they are saying to add this line to beel file beel config is a uh here it is so we are going to add this below the preset preset line so as soon as that is done uh we need to restart this because B.C config uh was changed so let me restarted let's see if this reloading works and uh now I'm going to do some change over here in the text of this and I'm going to say class name is equal to let's say um background is black and text is white right so let's see if if it's working if it's not working then I think we need to restart the whole app so basically just uh you know stop the server and then restart it so npm run Android again and I think this is what they meant to restart yeah I think I just misunderstood whatever they say okay so you needed to restart the whole uh server not just the app so let's see what happens now okay I think it's restarting so let's see it it will restart here on the on the right side of the emulator uh you can use Expo on your own app which is very helpful but I'm using an emulator over here so that I can do both these things side by side anyways let's see what happens over here so if this thing doesn't work that means we need to change the directory paths over here so right now I have given it a path of pages so then I will try to change it to something else and I will show you why I'm changing it and if your one is not working it's because of this uh directory paths so first of all yeah it's not working as you can see we have given it a back U black background and a white text right you know what let's make this uh background as red 500 so that we know that it's a major color and it should appear over here so these are tell in classes right and they are not working and the reason is because I think uh this folders need to be renamed so let me let me just fix it and then I will show you what or tell you what I'm doing um okay so now it's working so the problem is the above line did not work why because it was looking for folders for files in in this kind of folder so it was going to the pages folder and then it assumed that there is another folder inside Pages for example test and inside those test there are files for example pcjs and so this is what it was assuming but that's not our case in our case there there's only files inside the pages so we don't have any extra directory so double star means a directory and a single star means uh pages so when I edited uh let me just comment this out when I edit this line this means that all the files inside the Pages directory you can apply the I can use the uh delin inside it so in the above line which is right here it says that inside Pages there is another directory where I want to use the Tailwind but that's not correct right so or welcome is right here so we don't need to go inside into another folder so make sure that this you correct this or else it won't be working for you so now let me change add another change over here so Flex one justify and align so we are going to try to do this with the help of uh CSS so if I remove it and the button will go to the top of the page because the CSS is not there anymore so now let's say it has a flex one right the justify is uh Center and the items are also Center so now you will see that it is working again so you can add other things that you want so it's finally working and and let's say for example you want to use it inside the components as well you know what there's another folder inside components called test right and inside that test you have another file so how do you if you want to use it there how are you going to use it so you're going to do something like this that inside the components I have another folder called test and anything any file inside test that has this extension I want to use DND over there so this is basically how you're going to uh use the DND configuration so that's it if you have any issues uh let me know I'm available 24/7 and I will try to answer your queries and if you find this video helpful make sure to hit that Subs button and thank you so much for for your time and thank you so much for watching have a great day

Channel: Johar Khan

Views: 1,322

Keywords:

Id: 0mfrmrwRmW4

Length: 8min 41sec (521 seconds)

Published: Sun Feb 04 2024