Now that we have Tailwind CSS set up, let's use it to style our application. I have the same project open that we used for setting up tailwind. This is the index dot html and let me open it up in the browser as well. And let's start fresh by removing all of these. The first thing we do is set a background color and a text color for the entire app. And we are going to use a particular shade of gray, which is

and a text color for the entire app. And we are going to use a particular shade of gray, which is zinc, that's available in the in CSS. So here, uh, let me set the background of the entire page to this shade. BG zinc 50. That's the very light shade of gray. You might not even notice the difference here. It looks almost white, but when we add some white cards, you'll be able to make out.

but when we add some white cards, you'll be able to make out. And, uh, in the previous episode, I think I forgot to tell you how to get these auto completions right. So for that, in your visual studio code, you can go to view and you can go to extensions here. If you type tailwind, the very first suggestion you will see is tailwind CSS Intelligence. This is something you will have to install

CSS Intelligence. This is something you will have to install and enable for you to start seeing these. Also, make sure that, uh, this command, NPX Tailwind CSS is running in the background, otherwise you will not see any changes in your browser. Alright, let's continue now by setting the text color as text. Zinc 800. Usually we don't use text black because black is too harsh.

Zinc 800. Usually we don't use text black because black is too harsh. We, we try to set a very dark shade of gray for text. And now the first thing we do is have a navigation bar. So let's use Nav ul, LI and we need, uh, three links on the top. One is the dashboard and then we have our bookmarks, the jobs that we need to, we like to bookmark, the user likes to bookmark. And finally we have logout or login.

to, we like to bookmark, the user likes to bookmark. And finally we have logout or login. Now it's time to style this. The first thing we do is, uh, use flex so that, uh, all of them are stacked next to each other. Let's give them some gap, maybe gap 10. And then, uh, I want all of them to be slightly smaller. So text SM is what I do. And then I want to give a piling for this entire nav bar.

And then I want to give a piling for this entire nav bar. So I can add some horizontal padding, which is, uh, PX 10, something like that. Uh, it's about 40 pixel cells. And then let me add some vertical padding as well. Something like PY four. Let's see. Yeah, that looks good. Maybe the horizontal padding is too much. I can change it to PX eight. And I want them all to align

I can change it to PX eight. And I want them all to align to the right most to the right end. And that can be done using the justify, um, utility class. So we can say justify end, which adds this particular CSS rule, which is justify content flex end. Now let's pause for a moment. You might be wondering, do I have

Now let's pause for a moment. You might be wondering, do I have to remember all these tailwind classes? Like apart from learning CSS, now do I also have to learn tailwind css? Not really. If you've noticed, all the utility classes are very intuitive. They're mostly short forms of the CSS rules themselves. And at any point you get stuck. Tailwind documentation is really amazing.

And at any point you get stuck. Tailwind documentation is really amazing. Just come to tailwind css.com and type in any cs s property that you need. Let's say you forgot how to add padding type padding. And you can, you get to see here you add P number and this is the padding that you get. And it's an extensive documentation. Let's say you forgot how to add, um, rounded corners like border radius, right?

Let's say you forgot how to add, um, rounded corners like border radius, right? So you can type the actual CSS property border radius. As you can see here, you will be able to see the exact tailwind class that you need to add on the left. So in your initial days, have this documentation open in the next tab, and for every single class name you might have to refer. But after designing or styling a couple of web pages, you'll be on your own.

But after designing or styling a couple of web pages, you'll be on your own. So once we do this, we have all of them to the end. And since each of these items are links, let's make them links for now. I will just say hash. We can uh, mention the link a little later. Let's do the same for bookmarks and logout as well. Logout might be a button. Um, so let's call it a button itself.

Logout might be a button. Um, so let's call it a button itself. That makes more sense. Alright, and now let's, um, add some styles to these. Let's style the first one and then we copy the same thing. So here we have the text color set, but I want to set some hover styles so I can use the hover modifiers in Tailwind and say Hoover, change it to maybe underline so

so I can use the hover modifiers in Tailwind and say Hoover, change it to maybe underline so that I get a hint that this is being hobert. That's great. And let me also set the same underline for focus as well. So if somebody is using the keyboard and they would want to navigate, they'll be able to hoover and focus. Like if I press tab here, this is being focused. I would not like to remove this outline

Like if I press tab here, this is being focused. I would not like to remove this outline because that's okay if, uh, people would like to see that it's better for accessibility. And now let me copy the same class and paste it for bookmarks and the button as well. Great. Let's move on to the main section of our application. And here we have hedge one. And, um, let's give a name

And here we have hedge one. And, um, let's give a name to our job app called tale two. Let's style this. Add some, you know, bold font, like font bold, and then maybe text for Excel. And here, let's, uh, add a primary color to our web application. And I like to choose amber. That's a very nice color and tailwind.

And I like to choose amber. That's a very nice color and tailwind. So let's say text Amber and I choose 600. So if you refresh, this looks great. Now let's make it not stick to the end of the page by adding a padding and overall padding to the main section. Something like P eight. And this is where we have our heading. Let's add some paragraph below it saying, discover roles worth your skills.

Let's add some paragraph below it saying, discover roles worth your skills. This can be styled. Let's add a very light shade of, uh, grade, the same grade that we've picked at the zinc. So text, zinc, maybe 500. And uh, yeah, this looks good. Let's add a slight gap at the top of this by using margin. Something like MT one maybe. Yeah, that looks great. And here comes a search bar.

Something like MT one maybe. Yeah, that looks great. And here comes a search bar. So let's add an input and input type equals text. Placeholder is search for, um, rules, companies and type. Now let's style this input. So as you can see, tailwind removes all the border, uh, around the input. So this looks like a paragraph to us, but this is input.

uh, around the input. So this looks like a paragraph to us, but this is input. If you click on it, you will know that it is. Let's add a border. First, it removes the border. So border zinc, maybe 300 around it. All right, and, uh, let's space it using mt, maybe MT four or even MT six. Let's add some rounded corners to this rounded md. And, um, let's increase the width by saying W full so

Let's add some rounded corners to this rounded md. And, um, let's increase the width by saying W full so that it occupies the complete screen. And now some padding, uh, a different horizontal and vertical padding. So PX five and then maybe PY two. Now I'd also like to change this color when I focus on it, right? We would like to match this with our, uh, primary color. We can do that using, uh, the focus modifier.

We would like to match this with our, uh, primary color. We can do that using, uh, the focus modifier. But first we need to remove the outline that the browser is adding by default. So we say focus outline none, and then set the color that we need. So we can use the ring utility classes of tailwind CSS. So you say ring, you select the width, like you want ring one, ring two. It's one pixel, two pixels basically. So let's set ring two.

like you want ring one, ring two. It's one pixel, two pixels basically. So let's set ring two. And you also need to say which color you want your ring using ring, um, whatever color you need. So let's say ring amber 400 and we will see. Now if you click on this, you'll see a nice yellow ring. We can change this during ambo 500. Maybe that looks nice. Now we have our basic page layout, like our navigation search bar and heading and everything. In the next episode, let's design and style our job cards.

like our navigation search bar and heading and everything. In the next episode, let's design and style our job cards.