Laravel Mix with Tailwind CSS (no package)

let's create a new laravel project before compiling the local resources i'm going to use npm to install bellwin css and also i'm going to install all of the other dependencies that come with laravel now to initialize tell win css just run npx tailwind css in it [Music] and this created the tailwind.config.js and that file looks like this let me just open vs code to see what we have and this is what we have by default now in the content section we can define all of the paths where there will be html templates javascript files or any other file that will contain tailwind css classes so that tailwind css can only create classes that are used in those files so i'm going to add the common paths that laravel recommends which are these ones first we have all of the views that are stored in storage framework views and everything that ends with php as well as all of the files within the resources folder that ends with play.php js or view the next change that we have to make is in the app.css file we can find that in resources css app.css and here we just have to add three lines this will include all of the layers or tailwind css finally we have to go to webpack.mix.js and we need to include one line in here where the comments are and that will be required in quotes they'll win css okay let's save this and also the app.css file and now i just need a view so i'm going to take these welcome.blade.php and remove everything from the head all of the styles all of the fonts just leave the title and then i'm going to include our styles so link real stylesheet and the href will be the path to our compiled assets and let's use mix and then css app dot css and i believe we have to add a slash at the beginning like this okay now i'm going to remove everything from the body section and then create a div class container mx auto to center everything and then add padding on the sides like this in here i'm going to do the same thing i did last week and i'm going to go to the tailwind css page and grab the code for this simple product list all you have to do is click the copy button here and then paste it here and fix the indentation okay let's save this and let's go and start a development terminal i'm going to do that right here in bs code php artisan serve and i'm going to do this before compiling the assets so that you can see a before and after oh yeah i forgot you can't use the mix function without compiling the assets with npm because doing that will create the mix manifest file which is required by this function so let's quickly go back to vs code and just use the path like this [Music] and we'll switch it out later okay save and let's give it another try all right as you can see we have a page with no styles and now let's go back to vs code and compile our assets or rather let's go to the terminal and compile our assets and now if everything went well we can go back to the browser and refresh again and now we have access to tailwind css classes now the npm run prod will create a minified version of the css file but what about cache busting well we can do that with mix as well let's go back to the code here i'm gonna make this a little bit smaller and open webpack.mix.js and right at the end we can simply say version okay let's save this and compile the resources again now the way that level handles cache busting is different from the tailwind css lateral package and i'll show you why let's go back to vs code and let's open the manifest file that was generated when we compiled our assets you can find this file in the public folder and it's called mix-manifest.json in here you can see how the association is made from this path to a url that has an id and this id parameter has a unique hash number so in order to use cache busting what we have to do is go back to our welcome.blade.php and use the mix function so in this matter the cache busting as laravel handles it it's a little bit better because if you forget to use the mix function you're not going to break your application you simply won't use cache busting so let's save this and go back to the browser and let's make sure that nothing has broken we refresh and everything is the same now since cache busting is only useful in production we can just modify the mix file and add a condition to only use cache busting in production so let's go back to vs code open webpack.mix.js and down here we can say if mix in production we can say mix version and then remove this from up here save that let's go back to the terminal and run production npm again and we get these same results and there you have it a fully integrated way to get tailwind css into your lateral project without using any packages as always if you find this content helpful don't forget to leave a like down below and consider subscribing as well oh and turn on notifications in that bell icon so that you don't miss any future videos i'll see you in the next one bye [Music]

Channel: Tuto1902

Views: 1,148

Keywords: Laravel, php, debug

Id: tdtFHOtfy0w

Length: 8min 17sec (497 seconds)

Published: Mon Feb 28 2022