PurgeCSS for Production0:00
Okay, let's talk about PurgeCSS and getting our front-end assets ready for production. So, as of Tailwind 1.4, PurgeCSS comes within Tailwind. So, all you have to do is add some config in your tailwind.config.js and PurgeCSS will get rid of any unused classes that you're not using. So, if I do npm run dev, you'll see the size of our CSS, and you see that our CSS is almost 2 megabytes. If we run npm run production, there'll be some optimizations there, and it's going to be a bit smaller. Okay, and you see it's 1.57 megabytes, but when we use PurgeCSS, we can get it down to a really small size. So, if you go to the docs for Tailwind, you'll see how to configure PurgeCSS. We just have to add this purge key in our config, and then give it the directories we want to scan. So, let's go
Configuring Tailwind Purge0:49
Tailwind, you'll see how to configure PurgeCSS. We just have to add this Purge key in our config, and then give it the directories we want to scan. So, let's go ahead and do that. Let's go to tailwind.config.js. There is this Purge option here. So, let me paste that in, and the directories we want to scan is the app directory and anything in there. So, *.php, and we also want one for anything in the resources folder. So, let's do one for resources, and that is all the config we need. So, if I run npm run production again, we should get smaller sizes, and there we go. Our CSS is 9.75 kilobytes. So, if I go to my site, just make sure that everything still looks okay, and on first glance it does, and let's go to the single game page. Everything still looks okay, and the
Verify Build and UI1:44
just make sure that everything still looks okay, and on first glance it does, and let's go to the single game page. Everything still looks okay, and the models still work as they do. So, everything looks good, and we purged our CSS to have the smallest size possible.
