How to Setup Tailwind CSS in React JS?

hello everyone my name is atisha and welcome to my Channel today in this video I'm going to show you how you can install Tailwind CSS to your react project in the previous Tailwind CSS installation video we had used the Tailwind CLI so if you are building just a simple HTML CSS project you can refer to that video the link of it is given in the description box and also at the top so let's dive in so I've already created a project folder with the name react tailbone CSS installation and here first I'm going to create a react boilerplate project so I'm going to go within the terminal provided by Visual Studio code let me expand this a bit and in here I'm going to write the command npx create react app and since I want to create it within it I'm going to use a dot in here so after this is done you would be able to see certain new files and folder within our project folder that we have created okay so our boilerplate project is created let's open this and see what it shows so I'm writing the command npm Run start okay so we can see our project is created now it's time to install Tailwind CSS in it so for installation of Tailwind CSS we are going to refer to the documentation so I am going to go to this tailwindcss.com go within docs and in the installation there are certain ways by which we can install Tailwind CSS in our project so we are going to go within the framework guides and since uh we want to install it in react so this is what we are going to use so as the first step it is written that create your project so we have already done it we have already used this command as the next step we need to install Tailwind CSS via npm so I'm going to copy this from here open a new terminal and paste this line so once this has been installed we would be able to see it in our package.json file within the dev dependencies so yeah we can see the Tailwind CSS is installed as the next step we need to initialize statement CSS in our project so once this is done we should be able to see a new file called as tailwind.config.js file which will contain all the configurations related to CSS in our project for the third step we need to configure our template path what does that mean we need to specify in which all files and folders are we going to use Tailwind CSS so let me copy this from here and within the content I am going to paste this line so what this is saying is within the source folder whatever folder and subfolders it is going to have with the extension.js GSX TS or TSX it's going to uh look out for those files while seeing which all files have Tailwind CSS written in it since in the source folder we don't have any subfolder so I'm going to remove this also we just have Js files so I am also going to remove this from here and Save okay this is also done now for the fourth step we need to add the Tailwind directives let me first copy this and explain you what this is going to do so in our index.css file whatever code is there I am going to remove this from here and paste these three lines so this at the red Tailwind is nothing but a directive which is used to include the Tailwinds base components and utility style into our project okay now it's time to move to the next step so as the next step we need to just start up a build process so let me close the existing one that we have and write this npm Run start okay okay so now in order to see whether Tailwind CSS is installed properly or not I will remove all the code that is written our app.js file and we will just write hello world and try to style it so in here I'm going to remove all of these I also removed this one and then in here I will create a H1 which will say hello world let's see yeah hello world is there let's try try to style it with Tailwind CSS so I will give it a class name of text of say 7xl and also keep it in the center I will give it a text color of blue say 400 and Save yeah we can see hello world is written and it's in blue color uh similarly we can also give uh say background strip to it so let's give a background of black yeah so our Tailwind CSS is installed properly you can see how easy it was to install Tailwind CSS in your react project but if you are facing any issues installing it in your existing react project do let me know in the comments I will surely reply to that also if you want me to make other such videos on Tailwind CSS installation in different Frameworks do let me know in the comments as well and if you like this video don't forget to hit the like button and subscribe to this channel for more such videos in future see you in the next one [Music]

Channel: Etisha Garg

Views: 16,846

Keywords: tailwind css, tailwind, react, react js, react basic, react tutorial, install tailwind, install tailwind in react js, tailwind react, react js tailwind css, react tailwind, react tailwindcss, set up tailwind in react project, setup react with tailwind, install tailwind in react, use tailwind in react app, use tailwind with react js, tailwind css for beginners, how to install tailwind css via npm easily, how to setup tailwind css in react, tailwind css react, react tailwind css

Id: L3wJe66tlBk

Length: 5min 3sec (303 seconds)

Published: Mon Sep 25 2023