uh the the the next day's application. So first of all, um you need to actually install the uh the tailwind and set up it in our application, I'm going to go to the docks and the docks. It's gonna tell you how you can do it, you know, get it started the tailwind and then you can see that the cli there it is then installed tailwind CSS we NPM or and then you need to do actually a few steps like install the tailwind and then configure your tablet paths and then add tailwind directives to your CSS. These are all important anyway. Um it is actually the html method. I'm gonna exactly go to the framework guys. If I click there now, you need to choose which framework you're gonna go with the parcel, the remix, the next Js the Gatsby. The angular it it can work with the angular very well the react, you know? And the next day is so I'm gonna go with the next days for now, uh in some videos we will be going with the angular two. So I'm clicking on the next day. S and here it is, you know, N P X. Create next step my project. So uh this is something like, you know, create your project. We've already have created the project. We do not need this part. The second part is installed tailwind, installed tailwind and it's peer dependencies. Why? Npm? And then run it, run the I n I t initiate command to generate both tailwind dot conflict dot Js and post CSS dot conflict dot Js. So it's asking for doing for us to do two things. First, install the the until when post CSS and auto fix, auto prefix these things uh and the dependencies has to be installed via npm as it is. Npm you can see that the node package manager and then the second thing we need to do is we need to run the I N I T command to generate the files for the post CSS and tailwind tailwind dot conflict dot Js and post CSS dot conflict dot Js. First I'm gonna go with that and I'm gonna copy this this one. Okay, I copied and I need to go to the terminal again and actually this terminal is pretty busy because this terminal is actually have the server running so I have to open another one or I can open the terminal in the code studio, I'm going to open another one here. Open and terminal And I think first let's open the code, uh the visual story of code and then there it is. Okay, we got it and there is uh you know, you can see that, I want you to make sure that there is no file like tailwind or post CSS right now, there is no file for now. Okay. I am gonna go back to the terminal and I'm gonna paste the command, come on. Okay, this is here. Now I'm gonna press the enter key and it's installing the the tailwind and we need to wait for a little while. Let's just okay now we've got it and now um the next thing we need to do is to run the N P X. Now I'm going to run the N p X. And I'm going to call the Children and I'm going to initiate it. I'm going back. Taste it. Okay, just open this up this way and then in Turkey, now you're gonna see these two files just came up here, the post CSS and the next dot sorry, the Children dot conflict. So actually we have installed the tailwind, we have we've got the files now we need to configure the template paths by opening the tailwind dot conflict. So there it is the Children dot conflict file. We need to put some content here and I'm going to go back and you know in the tailwind dot conflict, I need to just Copy This one and I'm Gonna Paste It. And actually what it does, we can discuss this later. I'm gonna delete that and duplicated. I mean replicated with the new one. Okay. And then we can see that we we've actually selected the pages and the components if we create the components folder only in that case. So any file with the J S T S. Jsx tsx is now in the in the contents of the tailwind will it means tailwind will be applied on all of them inside the pages folder which is here and the components folder and there is J S T S T Jsx Tsx and everything I mean, you know Okay, the next thing is we need to, the fourth step is add the tailwind directives to your CSS. So where is the CSS the CSS is is the global dot CSS now you if you do not know why where is the global dot CSS and why it is it is called global dot CSS than you again have to look for the the complete series we have on the next day gifts anyway anyway at the top of the the global dot CSS we need to copy this and we need to paste it right here at the top of the global dot CSS and just simply paste it. I can see that it it made these, you know these directives as yellow because this is unknown to the, to the system but they are not unknown. I mean they're recognized anyway. The NPM run DEV is already working so we just need to go there and actually the tailwind is applied to this system. Let's just check it by going there and um for now I'm not gonna delete anything. I'm just gonna well I'll clean the code by the next video. No problem. But um to this heading, I'm going to believe this title thing. Okay and this way I'm going to write something um the title is small now but I'm going to write um okay, slate BD slate. Hmm Um 900. Save it go to the browser. Um Actually slave is not the color I was I should apply if I write rose. Um I need to double check the color for now anyway. Mm hmm. Here is the colors where it is. Box colors, containers. Sorry, not the layout, spacing, typography. The background color. Let's just check. Okay. Yeah, actually. Mm hmm. B. G. Slate. It should be applied. Mm hmm. Let's apply this color. B. G. Green. Why it is not working? Save it. Go to the browser. Oh there it is not applying. That means something is still missing. Duplicate. Go back. Mm hmm. The tailwind should be applied already but it is not. Um I think the problem is I need to cancel the already running server and I need to rerun that nPM. Run dev I'm rerunning this app shouldn't work anymore. If I refresh because I just canceled or you know, deleted that server I've created. I'm rerunning it and I'm reloading the page. Let's see what I'm going to get. It is working man. I was just, you know, I was confused. Why that is not working. I was doing everything fine. You know, this was a mistake of fine after all because I I was expecting that the server anyway. Okay. I shouldn't apply the B. G. If it's a dark color, I should apply the text so you can see that the text color is there. And now it is the actually the, the tailwind is applied, I can make it Rose Rose is a color here. You can see that the color is now changed and uh I can apply the, the text Excel, Oh sorry, three XL Let's just say for Excel's, you can see that it is bigger now. This is all because of the tailwind and you can see that it's much bigger now so the tailwind is working. I mean that is totally fine. That is totally awesome. In the next video we are absolutely gonna learn some more points of the tailwind because we've installed it now, we can, we're going to play with the tailwind till then stay tuned.