TailwindCSS is a very popular CSS utility-based framework that allows us to easily add classes

that essentially almost one-to-one represent underlying CSS styling. So for our example, if we wanted our H1 to be blue, we could add a class to it called TextBlue500

or some variant there within, and our text would automatically be blue because TailwindCSS will provide that styling for us. It also comes with its own configuration file

that allows us to define what exactly we want those utilities to be, and it allows us to customize our coloring as we see fit. So to start with, we're gonna need to get it installed.

So let's go to our terminal here, and let's go ahead and stop our server by holding Control and hitting C, and then let's clear out our terminal. Okay, so a small update here.

TailwindCSS version four recently released, and along with it came a number of different changes, including the installation process. We're gonna have a completely separate lesson

getting up and running with AdonisJS version six and TailwindCSS if you're interested in that. But for now, I'm gonna recommend that you stick with TailwindCSS version three

for this series as that's what this series was written with. So to get that installed within our terminal, we want to run npm i, which is short for install,

hyphen capital D, which is short for hyphen hyphen save, hyphen dev, which we'll save this as a dev dependency, TailwindCSS at three,

which will install the latest major version three available from TailwindCSS. In addition to that, we also want to install auto prefixer,

which will automatically include vendor prefixes along with our generated TailwindCSS and other styles that we apply. So go ahead and run that and get those installed,

and then we'll be ready to progress further. Cool, let's clear our browser, and we can have TailwindCSS inject its command

into our project by running mpx TailwindCSS init hyphen p. MPX allows us to run commands from packages without necessarily having to have them installed

directly from the npm repository. And here we're specifically running TailwindCSS init, and this in particular will add in the TailwindCSS configuration file,

and the hyphen p is also going to add in the post CSS configuration file so that we can actually tell post CSS to use TailwindCSS as well as auto prefixer. So let's go ahead and run this,

and you should see it created TailwindCSS configuration file called tailwind.config.js, and it also created for us a post CSS configuration file called postcss.config.js.

Cool, so let's open back up our project, and if we scroll down, we should see two new files within our project structure, postcss.config.js and tailwindcss.config.js.

Within the Tailwind configuration, we can alter our theme, add an additional TailwindCSS plugins, and it also comes with a utility called purge CSS,

which will streamline any TailwindCSS utilities down to just those that we're using within our project whenever we build this out for production, keeping our CSS file nice and streamlined.

In order for purge CSS to work though, within this array, we need to provide a file path to all of the applicable files that it should check for our CSS usages. So for this, we'll do a string,

and let's point it to our resources, any folder inside of resources, and any file inside of resources, but we can specifically tailor this

to those that end in edge, JavaScript, TypeScript, and then if you happen to use it, JSX or TSX, or even Vue. So within our resources directory,

it will look inside of any folder within there and any file within any folders that end in edge, JavaScript, TypeScript, JSX, TSX, and Vue.

Any styles that it finds within any of those matching files, it will leave into our final CSS file whenever we build it for production. So we can give this a save. Next, let's take a look

at our new post CSS configuration file, and you see it has TailwindCSS and auto-prefixer automatically within here. So we should be a-okay to go on this front. I do wanna note that you want auto-prefixer

to be after TailwindCSS though, as that will allow auto-prefixer to add in any vendor or browser prefixes to the underlying TailwindCSS classes that we make use of.

So since we have TailwindCSS first, post CSS will run TailwindCSS first, and then it will provide auto-prefixer the result after it runs TailwindCSS. So the ordering here doesn't matter.

Cool, so now the last thing that we should need to do is scroll on up to our app.css file and add in the Tailwind declarations. So at the top of our file here, we can do @Tailwind base.

This is essentially like a CSS reset. So it will make our H1 the same size as paragraph text and remove all of the button styles and all of that fun stuff.

So it's basically a CSS reset. Then we'll wanna do Tailwind and add in their components. And lastly, their utilities. So Tailwind and utilities.

Let's finally scroll down to our H1 and let's remove our blue coloring, give this file a save. We should now be able to jump back into our homepage and let's scroll down to that H1

and let's add in the class of text. And we'll make this one red so that we can easily tell that the change did pick up within our CSS file and that TailwindCSS is actually working.

And we'll set this to the 500 variant of the red coloring. Let's give that a save. We do need to jump back into our terminal and boot our server back up. So we can run npm run dev here.

Once that boots up, we're a-okay to jump back into our browser. Cool, so we can see a definite change happened here. Everything pretty much looks the exact same

regardless if it's a link, an H1 or paragraph text. That's that TailwindCSS reset taking place, getting rid of all of the browser's default styling. So let's head into our homepage

because that's where we added in the text coloring. And voila, we see it works and it's in a nice red. So now we know that we have TailwindCSS working. Let's go ahead and get rid of our browser console

and let's add in a couple of classes just to make this a little bit easier on the eyes. So let's hide our browser back away, come back into our text editor. Let's take all of our page contents and let's cut that out

and let's wrap it in a div with a class. Let's set this to a max width of 3XL and let's center it by doing MX auto.

And we can paste our page contents back in and give it a nice indent. Let's also add some spacing around this as well. So let's do margin top, let's say something like six. So we should be able to give this a save,

jump back into our browser and there we go. So that's a little bit easier on the eyes. It's more centered, not tucked away all the way up here in the top left corner. And it's not starting right with the top of the browser tab.

We'll want to do the exact same thing on our movie pages here as well. So let's go ahead and take care of that. We also don't want our H1 to actually be red. So let's also get rid of that there too.

Give that a save and let's copy this div. Jump over to our show page and we can paste the div right inside of our body and wrap everything inside of that div. Give everything inside of the div an indent, give it a save.

Let's jump back into our browser and now our movie page looks a little bit better there too. Let's go ahead and add in a styling specifically for our headings so that they actually behave like headings.

So for this, we don't actually need to add in classes. We can jump into our CSS file and make that a global change. So let's do that. So within our CSS file, we can do, let me scroll down here a little bit.

Let's do H1 and we can either type this out manually as we are up here with the HTML and body styles, or we can actually use TailwindCSS and inject it inside of this H1 styling.

We can do that by doing @apply. And now all that we need to do is reference the TailwindCSS class that we want to apply specifically to this element. So for example, we could do text 3XL,

give this a save. And now if we jump back into our browser, our H1 is nice and large. Let's also bold it and give it some spacing. So we can do font bold, margin bottom three, and maybe margin top six.

Give that a save, jump back into our browser. And now that's looking more like a heading. Cool. And we can verify that that change happened globally by jumping into our homepage

where our heading looks like a heading there as well. Future time here, interjecting here to say that since the release of this lesson, I've actually learned of a better way that we can register our post CSS configuration.

The way that we have it works absolutely fine, but there's an alternative approach that we can use that uses one less file within the root of our project structure. I've also learned that I have been pronouncing Vite incorrectly.

It's not Vite, it's instead Vite because the word is of French origin. So I'll be doing my best to make that correction. I apologize in the future

if I have any additional mispronunciations there. Okay, so back to what I was on about. Instead of having our separate post CSS config.js file where our plugins for tail and CSS,

not a prefix are hard to find, we can instead define this plugin object directly inside of our Vite config.js file. In order to do that, we'll either want to add an additional property

above or below plugins. I'll be doing my below plugins. So we can come down here. The property we're looking for is called CSS. Inside of here, we can add additional CSS configurations

for various post processors or pre-processors. For us, we're using post CSS, so we'll add in one for post CSS. And this is where our entire post CSS configuration can go,

including but not limited to our plugins as an array. So we can either import our plugins directly inside of this array, or we can do it up at the top of our file,

but we will need to import both TailwindCSS. So TailwindCSS from TailwindCSS and auto-prefixer so that we have references to those plugins.

Scroll back down to our plugins array and just add them in within that order. So TailwindCSS comes first, followed by auto-prefixer so that auto-prefixer can run against TailwindCSS'

final output. And now we can go ahead and delete our post CSS config altogether. So we can right click on that, delete, move it to the trash. And it's now gone and out of our project structure

completely. Lastly, let's jump into our home.edge page. And on our H1, let's go ahead and add in a TailwindCSS sanity check.

So let's do class equals text red 500. Should be a bright and vibrant red. We can go ahead and dive back into our browser. And sure enough, it is a bright and vibrant red.

So everything is still working A-OK. We can go back into our text editor, get rid of that completely, and everything should be back and now we're ready to move on.