Installation, and we will grab it through npm. So I'll paste that in. Next we have to generate the Tailwind configuration file. So I can say npx tailwind init, all right. So now you'll see that creates a tailwind.js file within your project root. This is where you can define all your measurements and all your colors and things like that. OK. Next, we need to use the Tailwind directive to inject Tailwind's preflight and utilities into our CSS. So what I will often do is just grab this whole thing.

into our CSS. So what I will often do is just grab this whole thing. And then if I switch to Sublime, we'll go into Resources, SASS, app.scss, and I'll replace it entirely. Finally, if we switch to step four, we can either use Tailwind directly to compile it down, or we can use Laravel Mix. So you can see we pull in Tailwind CSS, and then we pass it as a PostCSS plugin. Or I will often use Laravel Mix Tailwind, which is a small little extension to make this a bit more streamlined. So let's do that.

this a bit more streamlined. So let's do that. And then you can see we just pull it in, and then we call mix.tailwind. OK, great. So I'm going to go to webpack.mix.js. I will pull it in, and then call tailwind. OK, let's give it a shot. I will run npm run dev, and that should compile everything down. Great. So now, if I were to take a look at public CSS, app.css, yeah, you can see we have all

Great. So now, if I were to take a look at public css, app.css, yeah, you can see we have all of the Tailwind classes. And remember, when we optimize this for production, we'll be sure to strip away any unused css. OK, great. So now, think about it. If we go to our routes file, we're loading this welcome view, but I'm going to change that to app, and then we'll switch over there and rename that to app.blade.php. And then right up here, I'll pull in the css. All right, let's take a look in the browser.

And then right up here, I'll pull in the CSS. All right, let's take a look in the browser. Refresh. And there we go. OK, so once again, we're going to set up our container, then a header, then a main section, and then two columns within that main section. All right, let's get started. So we'll start here. So let's see. We're going to have our container, and we'll paste that back in.

Remember, this would be where the contents of each component would go. So things like this. When you load the about, this section would be inserted right there. It's sort of like yield with Laravel. All right, so this is what we get. We have our container, and then we have our header, and then two columns within the main section for the sidebar and the primary content. So if I now switch back to Chrome and give it a refresh, that's what we get. Now if it's a little easier to see, let's go right up here and set a background color of gray.

Now if it's a little easier to see, let's go right up here and set a background color of gray. And then we can see if this is our sidebar and this is the main content, then of course it should be left to right. So we can use a flex class to do that. And then for the primary content, that can flex to take up all of the available space. So again, if we had a background color of red, you can see that's how much it takes now. But we want that to fill the space. So we'll say flex: 1.

But we want that to fill the space. So we'll say flex 1. Finally, here for the sidebar, yeah, we can measure how much this should take or we can apply it. Something like width one-fourth or one-fifth. You get the idea. And we get something like that. Okay. Let's apply some of this. flex.

Next, if I switch back to Zeppelin, you can see the logo for all of this is Open Sans. I believe that's a Google font. Let's grab that, select the font, and then we can import it here, and then we can set the font family to Open Sans. Okay. So let's go back to the top here, paste that in. And then if I go to the Tailwind configuration file, I'm going to look for font. Here's our font stack. So I will add it here. And then notice I can reference this font by doing fonts, and then in this case, sans.

Just a little bit more. A couple of things. I can see the black he's using is 22222, so I will add that. And then for each of these links here, it is 14 pixels, and then we have a decent amount of space below each one. All right. So let's go to our Tailwind configuration file, and I'm going to look for my colors. Yeah, this is what we have by default, so I will swap this out like so. Next, for each of these links here, we can say text-small, and I think that'll bring us down to 14.

So now, we have our home page, and then every other one is just taking us to About. But those do, in fact, work. And then later, we'll make it clear which one you've selected. Okay. So for the remaining step for this lesson, I want to grab my logo. So I will save that as an SVG, and we'll put it within the public/images directory. All right. So we'll come back here, and then reference it. images/logo.svg. All right.

So this will be in the router view. So for each one of these, we would have the top level section here. So that would be, in this case, fullLogo. And then let's be explicit that the font should be normal. Okay. So come back, and that's what we get. Hmm. Is that right? Font size of 30. All right.