How to use Tailwind CSS in React JS for Beginners | Install Tailwind CSS in React App from Scratch

hello everyone welcome to devtamine in this video I'm going to show you how to install Tailwind CSS in react if you like this video don't forget to click like subscribe and comment down below alright let's get started I have created react application over here so the application is pretty simple it's only show this text hello Tailwind CSS react on the screen for example you come to this screen you will see this message alright how to install Tailwind theaters in react first of all you go to Tailwind website and then you click on get started and then you go to framework guides and you go to create react app here it will show you how you can install Tailwind status in react project this is how you can create react application I will skip this process because I've already created a react project on my computer so let's go to step 2 install Tailwind CSS you copy this command and if your application is running try to stop its first Ctrl C press y pass the command over here in the terminal hit enter if we download and install Tailwind on your project the next step if you go to package.json you will see Tailwind CSS over here in-depth dependency The Next Step you need to run this command to enable Tailwind config files here tailwind.config.js and post css.configs.js let's pass that command over here hit enter over here you will see two files are created for css.configs.js and tailwind.configs.js The Next Step you need to specify the react components path in tailwind.config.js let's copy this one and go back to tailwind.config.js and let's paste what we've copied over here okay The Next Step you need to add Tailwind directive in index.cs copy this directive and go to index.cs paste this is over here save Next Step Run npm Run start okay just go over here and npm Run start and hit enter we'll close this one the application is running again you will see the font styles of this tag has been changed this mean Tailwind has been already applied to our project for example if you go to index over here you will see that index.js import index.css and index.css include all Tailwind directive layer over here so if you go to app.js and if you try to change font over here for example you put class name text and then you put XL 5xl or 6xl save you will see the text go bigger and then you can change the color of the text for example text Red 500. you will see the text color change to red all right for example if you put background BG purple 200 save okay this look good for example if you create another component over here new hello.js and then you generate component ifce and you can put class name over here for example I put like text to XL and then I import hello component in app.js for example let me import hello okay save you will see that Tailwind CSS has been applied to a child's components as well because Tailwind has includes to the top component which is index.js so all styles will be applied to any components in your application all right thank you for watching this video If you like this video feel free to click like subscribe and don't forget to comment down below thank you so much for watching

Channel: Devtamin

Views: 98,585

Keywords: React, React JS, React Basic, React tutorial, install tailwind, install tailwind in react js, React JS tips, React JS crash course, Tailwind React, React JS Tailwind, React JS Tailwind CSS, React Tailwind, React Tailwindcss, set up tailwind in react project, set tailwind in react js, start tailwind in react, tailwind css, Tailwind CSS, Tailwind and react, setup react with tailwind, install tailwind in react, use tailwind in react app, use tailwind with react js

Id: 1WdL1TLfkYo

Length: 4min 33sec (273 seconds)

Published: Mon Oct 10 2022