so far you can see that uh there is a project and we are getting the, you know, the, the blogs here, the posts and when I click on any specific post, like I click here, I get the other data inside the post, you can see that it's all fine but something's missing actually it's not styled so now we're gonna put some style and we're gonna make it, you know, proper good looking blog to do that. We have a few methods. First of all, we can create our own style using the global dot CSS like you know here in the global dot CSS we can do a lot of things, we can write code to start the page but there are some more some more good solutions for example, the tailwind is a solution then we also can go for the bootstrap. I mean if you like the bootstrap you can go with the bootstrap, if you like the tailwind, you can go with the tailwind or any other the material ui is also here, which is created by the angular by the way, but you can use it. I'm going to use the tailwind CSS for this project here. So first of all we need to install the tailwind tailwind is you know, just styling framework. So I'm gonna go to the docks right here in the docks, you can see that there are a few things, the installation, the editor setup and whatever. Now in the sea you can see that the simplest and fastest way to get up and running with tailwind CSS from scratches with the, the cli tool and that's totally understandable but I want it, I want the tailwind with the specific framework which is the, you know, next Js. So I need to click on the the framework guides and you can choose whatever you want. Like, you know, next next gets the deliverable divide and I'm going to click on the next Js. Once I do that there is, you know, the creative project and then a few more things. So we have already have created the project, the project here. Up and running now, we do not need to do these steps, we need to go to the right here then install tailwind csx to install that. You need to put two commands. I'm going to go with the first one which is actually installed, installing the tailwind CSS post CSS bow. Actually it's installing uh kind of two dependencies, I'm going to copy that and after that I'm going to go to the there is a project and this project is in the actually I need to open the here, I need to open it in the terminal and I need to paste it like that. You need to be inside the blog and then the Npm install hyphen D D capital Children CSS space, post CSS space auto prefix sir. And I'm going to press the enter key and then Absolutely, I need to wait a little Okay. It's uh it's installing the tailwind. Okay, now you've got it. The next thing we need to do is actually you know write this command. The nps tailwind I N I T hyphen p. It is actually going to initiate detail mint which will create two files detail mint dot conflict dot Js. Post CSS dot conflict dot Js. So the configuration files for the Children and the post CSS uh will be generated by running the initiate command and I'm going to do that. So they simply pasted enter key and now okay the created killed when CSS convict file created post ceases convict file. We got two files here and you can see that the tailwind file and deposed CSS file. Okay now when we got the configuration file there are something to configure. You need to go there and you need to put these commands in the content. Actually these these codes, these are the paths actually we do not have the components for now we just have the pages. I'm just simply going to copy that and I'm gonna go where I need to go. I need to go to the tailwind dot conflict dot Js. So go there in the tailwind dot conflict dot Js And inside the contents go there back and verify that it is inside the content. So inside the cotton, I'm just gonna pre press the enter key and I'm gonna paste that and save it. Okay we've got it. That's awesome. Okay there is nothing more we need to do. Um yeah one more thing we need to do is adding the tailwind directives to your CSS. So that is the next important thing. I'm going to copy them all of them and I'm going to go back to the uh, to the visual studio code. I need to copy and paste these directives to the global dot CSS and here I need to go to the global dot CSS and at the very top of everything in the global dot CSS, I'm going to paste it. Okay. It's gonna give us the yellow light. There is no problem because um that's fine. I mean it's just the warning we need to ignore anyway, now we can start building the process, build process actually. So we've already ran the granite so I need to refresh it and now you can see that actually it was supposed to be the hitting but it is, it looks different now. That means it actually worked anyway to test it. I mean to test that, it's working, there is a little command they just gave us which is adding the Hello world inside the page. I mean start using tailwind in your project. So this is a simple line, I'm going to simply copy that and I'm gonna see if we've installed the clean wind perfectly. I'm going to go to the note pad back. Sorry, you know the note packed, but the visual studio code back and in the homepage, I am simply gonna, I'm simply gonna, you know, I'm just gonna copy these commands actually, the class, and I do not need all these things. So I'm going to paste the class inside this f one the next day's blog. Which one? I'm gonna go there and okay, it is capital now with the underlying, the underlying command is also there in the class, in the class name. So instead of three XL, what if I call it? Five XL six XL? And I'm gonna go back and you can see that it's big now. So that means detailed wind is actually working fine. And we got it and I think, you know, can start styling with the tailwind and by the next video, we're going to do something more um using tailwind in the same project. Till then stay tuned.