TAILWIND CSS V4 IS HERE! Install & Use It in React & Next.js 🔥

Hello what's up guys, in this video I'm going to show you how to install tailwind v4.0 in react and next.js So guys without any delay let's start the video So you can see that finally finally finally version 4.0 of tailwind ss is stable and official So there is nothing to do, it's easy, you just have to go to docs And this time guys you can see that they have made a separate version for v2.0 I mean if you see the previous version, it was a little different, but now in the installation, they have kept v2.0 Using v2.0 has become so much easier But if I want to use it in the react application, I can't apply this command directly Why? Because before that I have to install react So if you go to wait and here if you go to the react version of getting started, then you will get your code Simple, no big deal, you can easily install it here So guys without any delay, let's go to our code editor and tackle it So npm create wait at the rate latest So guys I would like to tell you two ways to do this, first I click on yes So it is doing its job, it is asking you the name of the project So I write react underscore tailwind What do you want? I want to install react And you can see that guys, wait has also got its new look, how awesome it looks I run with javascript and my work is done So this look was not there before So I went to cd react tailwind npm, I have to write npm install And then I just have to run npm and then dev, my work will be done But if you want to react directly, then you can do something like this Though it is for your view application, whatever it is, but you can write react here So my work is done, npm run and then dev if I do So you can see that you can see it like this And my work is done Now what do I want here guys, I want version 4 of tailwind css But did you notice one thing or not guys, wait also had such an awesome interface that was not there before So there is nothing to do, I will give the link in the description First of all, we need to install the tailwind css, you can see over here So just copy this particular code, you know, and come here, I am closing it now And I will paste it So you can see that your work is going on like this Till it is pasted, now we need to configure the wait plugin So there is nothing to do, on wait.config.ts file, these two extra pieces of code What you have to do is, copy and then paste it So I guess in our case, it should have already been done On package.json file, if I show you tailwind, so now it's your tailwind version 4 And even react's version 19 has come automatically So here I would like to go, wait.config.js file Okay, if I tell you, so this is a line, let me copy it And yeah, okay, I will go below it and paste it And this tailwind css below the plugin, after the plugin, I give a comma And here I paste it, something like this, okay So we have a react and tailwind css, which I have added in this way I hope you can see how I have done it here, okay Now after that, import tailwind css So your main file, that is in react's case, it is index.css So you go to the top and add it like this, okay And then you don't have to do anything, your work is done, just do this I mean, not just post css, nothing, there was a work of 3 seconds here And if I refresh it, then look at this, guys, it's a little different Its look and feel has changed Where if you see, okay, one second here Let's say guys, you can see, h1 hello world, which is, I copy it And even we have a hello world also, right So I go to source, I go to index, main.jsx file, what we have We have a app.jsx, I go here And if you see here, I copy these classes, h1 And somewhere here, my wait plus react, you can see, I have installed it here So I am calling the text triple axel, you know, three axel Bold the font and then underline it, this is what I am saying If I go here, and boom guys, see now you can see It's bold, underlined, and font size, I mean, It has increased the font size, if you want the color, text red and 500 Is it something like this? Yes, see You can see, guys, finally, in our react application, First of all, the latest version 19, on top of that, the wait was not over, Like, it was showing such a dangerous animation And version 4, which is of telewinz css, we did it You can see the code is also being applied So guys, this way, you can see how easily you can install it, okay? So guys, let me do one thing, I am closing it I would like to tell you that I have already uploaded the playlist on telewinz So you can definitely check it out Now guys, as far as how you can install in next.js, So I would like to tell you, okay, next.js install, okay If you go like this, getting started with your next.js And the version that is coming now, see, what is the code? It's your npx create next-app at the latest, okay? So the moment you hit the command enter, So guys, first of all, what does it ask you? First of all, it asks, create next.js app, whatever it is, okay to proceed, I am clicking on yp So first of all, it is asking you the name of your project I will write next-telewinz, okay? Or whatever it is, I will write next-t, telewinz Now I will hit enter, it asks, do you want type script? Yes, do you want eslint? Yes, do you want telewinz css? Do you want telewinz css? Yes, done I'm not going to go ahead now, guys, that's it Because the moment if you, come on, let me show you Import, whatever it is, we keep all the defaults Now it's doing its job So next-js doesn't need to go here and there, install npm and all those things By default, you get support for telewinz css So guys, you can see that this is installed, if I go here, okay? So I'm removing this Next, if I go to telewinz And let me do one thing first, let me clean this I will go to package.json file So this is our next application, right? And if I go to dependency and boom, guys, see See this, your telewinz or whatever telewinz post css is, that is your version 4 See this, version 4 So officially, it has been supported So if you install by default, you get version 4 by default So there is no tension So that's it for today's video I hope you liked the video Guys, if you liked the video, please like it Share it with your friends And next target is 8 lakh subscribers And I would like to tell you guys I have already uploaded the world's best react playlist on react If you haven't checked it out, please do I have already uploaded telewinz Please check it out, okay? So guys, see you in the next video Till then guys, thank you so much Take care