Now that we've learned how to create our first dummy extension, why don't we take it a step further and make something real world. Now a tool that I've been using lately is Tailwind. So let's take a look at its usage instructions. We'll go to installation, and then down to the mix instructions. Okay, so to make this work with mix, we can see a couple things. It has a dependency on a package called Tailwind CSS. Next, you need to append a PostCSS plugin to the mix build. Now we can see that you can use it with PostCSS, or less, or Sass. However, in the case of Sass, it looks like you have to disable CSS URL handling. And you know what, you can ignore that. We'll take care of it when we build the package, but it's nothing special. So don't worry about it too much if you're not familiar with that option. All right, so this is actually fairly simple, but to give us something to tinker with, why don't we create a mix.tailwind extension.

it too much if you're not familiar with that option. All right, so this is actually fairly simple, but to give us something to tinker with, why don't we create a mix.tailwind extension. We'll head back to Sublime, and now I'm going to start by making this a local extension. We'll call it Laravel Mix Tailwind, and then we will repurpose this example one that we had earlier. Like so. All right, so we'll call this Tailwind, and get started. So remember, the first argument here, this is how you will call it. So once you require it, we should now be able to say mix.tailwind without getting an error. So you'll see before, we give it npm run dev, and it does fail, because it comes to Tailwind, and it has no clue what that is. But if we pull it in, it doesn't do anything just yet, but we have registered it as an extension. All right, so let's come back to Safari. Now I noted that there is a dependency there,

is. But if we pull it in, it doesn't do anything just yet, but we have registered it as an extension. All right, so let's come back to Safari. Now I noted that there is a dependency there, and in the last episode, we learned that you can create a dependencies method, where you return an array of dependencies that your extension depends upon. And if those are not available to the user, we will install them behind the scenes. Okay, so now we're saying, all right, we're going to use Tailwind CSS. So if the user doesn't have it, please do the the equivalent of this behind the scenes. Okay, next step. Right here, you can see that we are appending a PostCSS plugin, and the way that Mix handles that is through a config.PostCSS array. So when you do things like this, mix.options.postCss, and you pass an array, we will then merge that into this array here. So maybe we can just hook into that, and then dynamically add a new one, like this. Now we could

this, mix.options.PostCSS, and you pass an array, we will then merge that into this array here. So maybe we can just hook into that, and then dynamically add a new one, like this. Now we could do register, but there's also a method we haven't discussed called boot. Think of this very similar to your Laravel service providers. So for register, well, we're going to filter through every single component and call this method register. That way, for each extension, you have the opportunity to accept the user data, massage it in some way, update the config, anything you need to do. But then, once all of the components have been registered and we've built up our world, so to speak, we'll then filter through once again and call a boot method on each of those. So boot is a useful method to call when you need to ensure that all of the user's webpack.mix.js settings and configuration has been loaded. So let's just say config.PostCSS, and let's see. So it looks like

method to call when you need to ensure that all of the user's webpack.mix.js settings and configuration has been loaded. So let's just say config.PostCSS, and let's see. So it looks like we need to require Tailwind, so we'll do that here. And next, we need to call it and then pass a path to the Tailwind configuration file. So this is a prime example of something that should be configurable. So we'll use a sensible default, but then if you're storing your Tailwind configuration file somewhere else, you need to be able to override that. So I could say push, something like that, and then here, the default is usually Tailwind.js when you initialize it, and we'll talk about that more in just a second. But yeah, we could give that a shot. All right, so now behind the scenes, ideally, it will come across this dependency here and determine, oh, I need to install that. So we'll give it a run, and sure enough, it says additional dependencies must be installed.

that, but yeah, either way, if that configuration file was available to us, everything would compile correctly. So when creating your own extensions, if it is the case that you require a reload, you can do it here. You could say this.requiresReload equals true, and that's our way of saying, okay, once you've installed the dependencies, just abort and then require a reload of the build. Okay, so let's uninstall it and try it again from scratch. Okay, now we'll run it again. It'll determine that we need to install the dependency, and now you'll get a little message. Okay, we have that done. Go ahead and run mix again. However, like I said earlier, even if we run it again, we're going to get that issue related to the Tailwind configuration file not being visible. So it would be nice if we could customize this in some way, and it turns out we can. Rather than setting this to true, we could also set it to a string, and what will happen is instead of saying

So it would be nice if we could customize this in some way, and it turns out we can. Rather than setting this to true, we could also set it to a string, and what will happen is instead of saying finished, please run npm run dev again, it will echo out whatever you've typed here. So with that in mind, why don't I paste in a more descriptive message, like so. Tailwind has now been installed. Please ensure that your Tailwind.js configuration file, and we'll get a little hint for how to run that. Make sure that's been created, and then run npm run dev again. All right, one more time. So we will install Tailwind CSS, and then give it another try. Yet again, we install the dependency, and there we go. We now have a special output message. So the user sees, okay, I need to run that. You'll see that once again the default is to place it within the root of your project, and we'll now npm run dev again, and it all compiles down. Now if we come back to Safari,

that. You'll see that once again the default is to place it within the root of your project, and we'll now npm run dev again, and it all compiles down. Now if we come back to Safari, let's scroll up. So you'll see these sections here. So we need the preflight, your components, as well as the utilities. So let's give this a shot. Now if we switch back, oh yeah, we do have to deal with the condition where when using Sass with Tailwind, we have to disable URL handling. We'll do that in just a minute. Until then, we'll use less instead. Okay, resources/assets/less/app.less, and I'll paste in the preflight, then the components, and then finally the utilities. Okay, we should be all set. So I will compile this, and now once again, because we switched to less, and that's not included by default, only the first time it'll pull in the less dependency as well as the less webpack loader.

will compile this, and now once again, because we switched to less, and that's not included by default, only the first time it'll pull in the less dependency as well as the less webpack loader. Okay, let's take a look at the output file. public/css/app.css, and we can see all of the various Tailwind configuration. We're done. So now we've created a reusable dependency, and now anyone, as long as they pull it in, are able to reference it like so. Let's now take care of that Sass loose end, and we should be good to go. Let's see. There it is. For Sass users, we need to disable URL processing. So how can we do this from our component? Well, it sounds like we need a way to figure out, well, did the user call essentially mix.sass? We can do that like so. We could say if. Now we have access to the mix global object. This gives us access to a number of things. You can dispatch events, you can listen for events, you can do a number of things. Among those is we

if. Now we have access to the mix global object. This gives us access to a number of things. You can dispatch events, you can listen for events, you can do a number of things. Among those is we can track all of the registered components. So this object or array, I can't remember what it is, I think it's an object, is created dynamically based upon what you request here. So in this case, the components object would contain js, less, and Tailwind. In fact, do you want to see that? mix.components. All right, there you go. So it is an object, and you can see we have a passive component, you can ignore that, but then js, less, and Tailwind. So it sounds like we just need to see, all right, well, is there a call to SASS? That means the user wants it, in which case we do have to disable URL processing. We can say if mix.components.hasSASS. In that case, config.processUrls, and we will, in fact, disable it. And that's all we need to do there.

we do have to disable URL processing. We can say if mix.components.has SAS. In that case, config.process urls, and we will, in fact, disable it. And that's all we need to do there. So if we scroll down, yeah, maybe you want that to be tailwind.config.js for some reason. Okay, well, right now, I think that should blow up, and it does, because it can't find the Tailwind configuration file. Let's fix that. So it sounds like here, we should accept it as the one argument. So tailwind.config.js. We're going to run it again, though, and it's still going to fail, because we're not accepting that data. So that's where the register method comes into play. We'll say tailwind.config.path, or how about config.path, maybe that instead. Now let's see, we're going to reference it down here. So yeah, this is a good example of we can just assign it to the object, and then reference it within our boot method. However, we do need a default,

we're going to reference it down here. So yeah, this is a good example of we can just assign it to the object, and then reference it within our boot method. However, we do need a default, so we'll think about that. But first, this should all work, and it does. However, yeah, if we bring it back to what it was before, the default should work without you needing to do anything here. So let's make that work. Once again, here, we could just say tailwind.js. We'll make it a default right there. Okay, so now, if we console.log the config path, we'll just do this two times. In this case, we are using a default, and that should compile down fine. However, once again, if you want to do something unique, this doesn't exist in this case. But just to show you that we are overriding it, there it is. Yep, and that's the only thing that needs to be configurable. So I think, at least for our first pass, we're done with this.

case. But just to show you that we are overriding it, there it is. Yep, and that's the only thing that needs to be configurable. So I think, at least for our first pass, we're done with this extension. Let's finish up by distributing this through npm. If I switch over to GitHub, I'll create a new repository, laravel-mix-tailwind. We'll say to start mix.tailwind. It's a public repository. There we go. Let's now go to my web directory, and we'll create a new project here, laravel-mix-tailwind. All right, and we can initialize npm. The default package name is good for me. Version 1.0, let's keep it at 0.1.0, just in case we do need to make some breaking changes, which I doubt, but just to be safe. A quick laravel-mix extension for Tailwind support. All right, the entry point index.js is fine. We don't have tests in this case. Maybe in a future episode I'll show you exactly how to do that, though. For git repository, it'll be jeffreyway

All right, the entry point index.js is fine. We don't have tests in this case. Maybe in a future episode I'll show you exactly how to do that, though. For git repository, it'll be jeffreyway/laravel-mix-tailwind. All right, keywords. We'll do laravel, laravel-mix, and tailwind. I'm the author. MIT is the license. And we can take a quick look at that. Ah, that should be in quotes. We'll fix it. Okay, so in Sublime, very quickly. Yeah, wikimix has its own keyword as well. All right, next, we could create a source directory, but let's just keep it simple for now. We'll have index.js. So now if I switch back to our example here, I'll pull that in. This will always be available, because if you're pulling in a mix extension, well, then you already have mix as well. So that should be fine. Otherwise, you can make it explicit. So once again, we create our class, and then at the very bottom,

a mix extension, well, then you already have mix as well. So that should be fine. Otherwise, you can make it explicit. So once again, we create our class, and then at the very bottom, we extend the API. So now let's initialize git. We'll add everything to the staging area, and we'll say first draft. And if I now switch to Safari, let's add the origin and then push it up. Great. So let's come back, give it a refresh, and there we go. We have our extension. However, if we switch back to package.json, you can see that we have a version, but we haven't yet published it to npm. We can do that like so, npm publish, and we're all set. That's live now. So the final step, we'll cd back into learn Laravel mix, and we'll start from scratch. Like so. Okay, I want to use Tailwind, but at the moment, of course, it's not going to work, right? So we give it a run, and it blows up. All right, let's pull it in. npm install

Like so. Okay, I want to use Tailwind, but at the moment, of course, it's not going to work, right? So we give it a run, and it blows up. All right, let's pull it in. npm install laravel-mix tailwind. We pulled it in, but it's still not going to work, right? Because we haven't yet required it. We'll do that here. Require laravel-mix tailwind. All right, we'll give it another run, and this time, it'll pull an independency. We're going to initialize it, and then run it again. And we're done. So yeah, in this video, we created a custom extension from scratch. We uploaded it to Git, and now we are distributing it through npm in real time, which means you can now pull that in if you'd like to use it.