Let's review Tailwind's configuration in a bit more detail. Up until the last episode, we were referencing Tailwind through a CDN, but you're really not going to do that too often. Instead, you'll reference it through npm as a package. Like this. npm install tailwind-css. Now once that's pulled in, if you check out your node_modules bin directory, you should see a tailwind executable. We can use this file to generate the default Tailwind configuration. So you'll see I already have one here, but let's go ahead and delete that and do it together.

We can use this file to generate the default Tailwind configuration. So you'll see I already have one here, but let's go ahead and delete that and do it together. node_modules, bin, tailwind, and we'll reference the command init along with the filename. The standard is fine. tailwind.js. Alright, so now you'll see we get this file here. And if you take a look at it, initially it can feel a little overwhelming. It's a couple thousand lines of code. But it's really not complicated at all. This is where you define the basic settings for all of the various modules that Tailwind.

But it's really not complicated at all. This is where you define the basic settings for all of the various modules that Tailwind provides. So for example, let's go to width. Here's where you define your width utility sizes. So you'll notice we have a little example there. So as an example, maybe you want to set a width of 8 and a height of 8. Yeah, maybe you're making a circle or something like that. Alright, well these values are defined here. So in this case for width 8, yeah, you'll see it right there.

Alright, well these values are defined here. So in this case for width-8, yeah, you'll see it right there. So this means at any given time, yes, you can refer to the Tailwind documentation, but you could also go to this file and quickly learn which options are available to you. So here we can see 1/2. That means you can apply a class of width-1/2, and that will set a width of 50%. Or if you want 3/4, you get the basic idea here, right? Now this is going to be true for all of the modules that Tailwind provides. Let's take a look at the colors. Here we go.

You define them here once, and now all of those various classes will be generated. So this means I could have a class of text-gray-darker or maybe a background of gray-darker or a border color of gray-darker. It's very useful. Now of course, you can modify these however you want. You can remove ones. For example, if you're never going to have orange, then you can get rid of that. And now, when Tailwind compiles, it won't generate any orange-specific classes. But you can even add more. So maybe you don't like to use the color-specific names.

But you can even add more. So maybe you don't like to use the color-specific names. I don't really have a problem with it, but if that's your thing, no problem. You can define it here. So maybe secondary is red. And now, once Tailwind compiles down, you'll have a whole set of new classes, once again, like text-primary, or background-primary, or background-secondary, or border-secondary. And in fact, let's give it a shot. I'm going to run npm run dev, and this is going to compile everything down. Now in this case, we are using Laravel Mix.

I'm going to run npm run dev, and this is going to compile everything down. Now in this case, we are using Laravel Mix. I will assume you have some basic familiarity with that, and you can see here that I am using the Tailwind plugin, which we'll talk about in just a minute or so. Anyways, that has compiled down. So if we take a look at our compiled stylesheet, we should be able to see a text-primary class, and there you go, primary and secondary. Let's look for background-secondary. Yep, that class was generated too. Let's look for border-secondary.

Yep, that class was generated too. Let's look for border-secondary. You get the basic idea. Now you can see this is also true for responsive classes. So you can see for a small breakpoint, we want this, or for a large breakpoint, we want this. So you should be able to say large-text-primary. Yeah, all of these classes are being generated on the fly, and all you had to do was define it one time here. Now same thing is going to be true, we're not going to go through all of this, of course,

All right, no problem. Maybe add mb-5, and this will be 1.25 rems. Now once again, once Tailwind compiles down, you will have an mb-5 you can reference, margin-5 all around, mt-5, all of those various classes will be generated as a result of this. And of course, the same is going to be true for your negative margins, for your padding, all of this stuff. Now, if we scroll down to the very bottom, let's see, yeah, right up here. So here's all of the various modules, and this can be a little confusing at first, but you'll figure it out fairly quickly. You can see for any module here, for example, we looked at the width module, and then we

remove that. But you also see one here called hover. So this means when you hover over an element, do you want to change the text color. That will take the shape of something like this. Nice and intuitive. Let's see if we can find that in the compiled file. So when we hover, I want to look for a text of red. Yeah, here you can see one value here. And you'll notice in this case we're combining both variants. So we're saying for a large desktop, when the user hovers, then apply a text color of

So maybe you want to change the SVG fill. Alright, if that will be dependent upon hover, then you can add it in here. Alright, let's give that another compile, and we'll take a look. We'll switch back, and now we should have hover fill current. Yeah, now that's available specifically because we added it in here. But I'll go ahead and remove that. Okay, so to finish up, let's just do two final things here. Now you'll notice in my webpack.mix.js file, I'm pulling in a Laravel Mix plugin called Tailwind. Once again, you can pull that in very easily, or you don't even need a plugin, you can do