go ahead and enable it, and you're ready to go. All right, so the next step, if I want to demonstrate some of this automatic sorting, we, of course, first have to install Tailwind into our project. And don't worry, it'll only take a minute. So if we switch back to the Tailwind website and go to Get Started, yeah, right down here, why don't we use a framework guide for Laravel, and we're going to use Vite. All right, so we already have a project. The next step is to install Tailwind and postCSS and autoprefixer and then initialize Tailwind.

The next step is to install Tailwind and postCSS and autoprefixer and then initialize Tailwind. Okay, so I'm copying that, and let's switch to my terminal, and I can paste this in. And while that's doing its thing, the next step is to update this new Tailwind configuration file with all of our relevant file paths, like your blade files or your JavaScript files or your view files. So once again, I can copy this and switch to my editor, and we should have a new Tailwind.configuration file, and I'm going to paste all of that in here.

and we should have a new tailwind.config.js file, and I'm going to paste all of that in here. All right, the next step, add the @tailwind directive to your CSS, and we're going to put that with an app.css. And yeah, that comes with Laravel out of the box. So I will look for this file, and I'm going to paste that in. Number five, start your build process. So let's do that from the terminal. All right, and there we go. We have our watcher up and running. So finally, start using Tailwind in your project,

So I will add some dummy classes here to demonstrate the sorting. And yeah, I want you to notice as I write this out, we get instant auto-completion or IntelliSense, again, because we have that Tailwind plugin available to us. Cool. So let's grab that, and then maybe, I don't know, at the front, we will have flex and justify-center. Again, these are dummy classes just to demonstrate the automatic sorting. Okay, so let's give this a shot. If I come back to Chrome, here's the GitHub page for the Tailwind Prettier plugin, and this is a first-party plugin.

If I come back to Chrome, here's the GitHub page for the Tailwind Prettier plugin, and this is a first-party plugin. Okay, so let's scroll down, and it looks like we need to install both Prettier and the Prettier plugin. So I will copy that, close this out with Ctrl-C and paste it in, or don't forget that PhpStorm has a built-in terminal that you can reach for instead. All right, next, I'm going to create a .prettierrc.json file within my project root. So we'll call it .prettierrc.json,

within my project root. So we'll call it .prettierrc.json, and we can set this to an empty object. I think that should be enough. Yeah, so the way it works with Prettier is if you pull in a third-party Prettier plugin, and as long as that plugin follows a specific naming convention, you don't need to do anything. It can be required automatically, which is pretty cool. So let's close this, and yeah, let's test it out.

It can be required automatically, which is pretty cool. So let's close this, and yeah, let's test it out. Imagine maybe you're building a Vue app. It's very popular in the Laravel community. Maybe you have a components directory, and within this components directory, I will add a test.vue component. All right, so for the template, why don't we just grab this h1 that we worked on earlier? And actually, while I'm doing this, keep in mind that out of the box,

Just let them do it. All right, let's give it a shot. This time, I will open up the terminal directly within PHPStorm. So I can double-click Command, come down to Terminal. And yeah, let's give it a shot. node, modules, bin. This is where Prettier was installed. And we will run this on resources/js/components/test.vue. And give that a run.

js, components, test.vue. And give that a run. Okay, so now notice it doesn't instantly update the file. With this command, it just shows us what it would look like if we did perform that right. So yeah, notice before we had font-bold at the beginning, but after, font-bold was moved to position 4. And yeah, the same thing over here. We had underline and then the color, but after, we had the color and then underline.

that we want Prettier to run off of. So yeah, take note of this and maybe configure it to your needs. In my case, JavaScript files, TypeScript, and Vue is good enough for me. All right, next, the Prettier package itself. Yeah, make sure this points to your local installation. It's possible it might be pointing to a global installation that is outdated and could lead to some kind of error or something. So make sure it's pointing to the most recently locally installed version of Prettier.