Next.js Blog | Styling the Navigation Bar w. Tailwind
Transcript
English (Auto-generated)
in the navigation bar. So we have actually installed the tailwind and we've set up the tailwind which is already working because this design, I mean the the the capital text and everything they're hearing style comes from the you can see that it comes from the tailwind so that's awesome. Now we can go to the next level and we are going to design this navigation bar. Okay so where is the navigation bar? It's uh it's in a quite interesting place. It is in the app dot Js file which is actually bootstraps the whole website. Anyway. Now here what we first need to do is to design put some design on the navigation, the main navigation. So what I'm gonna do I'm gonna create a class name, sorry spelling the class name and then I am gonna call the B. G. Slaves. This is a design we displayed 400, save it go to the browser back and oh It looks nice but um what if I just make it five a little darker but let's just make it 900 and go to the browser back and yeah that's quite dark. The text is uh is not very good now but we absolutely can make it work. So this is the first thing we need to do now we are going towards the next one and which is we need to change the color of the text. So here you're going to change the color of the text. You can change the color of the text here individually here but I preferred where we have added the B. G. We can add the text color. I mean when you're when you want to would be when you want to style the text you need to write texts late. If you call the bee gees late you would be um you would be getting the background color change. But you're if you're talking about the text Slade you're getting the text color changed now if I write the uh sorry? Uh it is not about the texts late, it's just about the B. G. And text. I'm sorry about that. Um So the B. G. Color can be slayed. BG color can be gray. BG color can be dark. BG color can be not can be light. So the slate is a color is a color from the theme. Uh the detailed wind theme. So we are using slate color anyway. V. G. Slate 900. The text slate. I'm gonna put I cannot put the 900 because the text color would be the same as this one. And then we wouldn't be able to see the the text actually. So I'm writing, let's say I'm writing 400 here and I'm saving it. I'm going to the browser, you can see that it is, it is right here and that looks pretty convenient. That looks nice. The next thing we need to do is we need to be here and we need to create another class, the class name and we're gonna we're gonna make it flex and we're going to apply the flex row design. I'm gonna go back and you can see that the text is in a row and that's um that's that's kind of what we needed for the navigation. I'm going to go back to the to the visual studio code and I'm going to add in the space and I'm going to write this space X. It's not about Tesla anyway it's peace x. two. Go there and we got some space but this is very less space. What about making it three? Uh Three saving it and now yeah it looks fine. You know you can make it four or five. I'm gonna go with four and that's kind of the space I was looking for. Sixes I think six. Sixes. Okay now the next important thing I need is this is a navigation bar right now but this navigation bar is actually um this doesn't look very cool to me because it is uh you can see that it is uh you know have no padding, no spacing, it has a spacing but no padding definitely. So to add the padding in the in the tailwind you need to go back there and uh I'm writing for now. I think I need the py or this p I'm gonna write p. three p. 3. Okay let's see I got the padding. If you if you want more padding you can put like that go back and I've got I've got big padding but I think three was good. Anyway let's make it three save it. Yeah that looks fine. Okay that works. We got the navigation very simple navigation but at least there is a navigation and it's using the tailwind and I think that's awesome. Um The next thing we need to do is to centralize the blog, the whole blog. But that's absolutely we're going to do in the next cast till then stay tuned.