How to Integrate Tailwindcss In your React Native App

[Music] hello everyone how's it going welcome back to the channel in today's tutorial I'm going to show you how to integrate tearing CSS with your react native project so with that said let's Jump Right In so we always used to start or initialize our project with Expo in it what we like to name your app is for Native wind you can go ahead and name it whatever you want so in here it will start downloading the template and also install some JavaScript dependencies as well let's wait for a while so now that we have a successful installation let's change the directory to our folder that has explanative wind and open that in vs code so let's head towards the native when documentation so basically the native when uses the terrain CSS as a script language to create a universal styling system so for a quick start let's choose the Expo and see how it's been done so we need to create an expo project we've already done that you also need to install the native wind and also the terrain CSS as a Dev dependency so I'll copy that in place it on the command line so you can see we have a successful installation in here so when we open the packet.json file we can see our native when in the Tailwind CSS has been installed successfully so the next step you need to set up our tearing CSS and to do that we need to run MPS Tailwind CSS Inlet to create the tearing dot config.js file so we need to modify the content with the following path so I'll copy that and replace the content above so lastly we need to modify the bubble dot config.js by adding the native plugins so basically does it you can start writing the code we can get rid of the Star sheet and also the silence in here and start with the class name and proceed by giving it a flex of one items to be at the center and also justify Center and BG Dash White let's start the test with a green color and run and start to start the app there we go we can see the changes in here so basically it does it if you find this deteriority useful interesting consider subscribing by hitting the Bell icon see you in our next tutorial until then stay tuned

Channel: CodeWithDarkwa

Views: 9,150

Keywords:

Id: J1q_CNN5V1U

Length: 4min 12sec (252 seconds)

Published: Mon Sep 05 2022