Setting up Tailwind CSS in a Laravel Project

[Music] in this video i'll show you how to set up tailwind css in a laravel project i'll start by creating a new laravel project using the laravel installer laravel new and i'll call this project laravel tailwind css all right next i'll install tailwind css and its peer dependencies with npm install d tailwind css post css and auto prefixer alright next i'll go in the webpack mix file and in the array down here i will require tailwind css as a post css plugin now i need to create a tailwind config file which will be our control center to configure and customize tailwind and i can do that with npx tailwind css init and let's open that file alright so tailwind is a framework for building bespoke user interfaces and it has been designed from the ground up with customization in mind and this stellwind config is the central place for those customizations i have a theme option here where i can add or customize things like colors font sizes or the spacing scale i can also register first party or custom plugins here and there's lots of other configuration options but a very important one which we're going to look at now is this content array here so tailwind generates css on demand based on the classes we're actually using in our project but for its work i need to tell tailwind where i'll be using classes where my template files are located in this specific project most of the templating action in the larval app happens in this resources directory and you can see we have a views folder here and we have this welcome that blade.php file so i could tell tailwind to look into the resources directory slash views slash welcome.blade.php okay but what if later in the project i have a new file called about that blade.php well of course i could add the path to this file in my content array but as you can imagine that would get pretty tedious to list each file individually and i need to come back to my tailwind config file every time i add a file in my project luckily tailwind's content configuration supports globe patterns which means that i can use wildcard characters to catch multiple files so here i can replace welcome with a star and this will now catch any file with the dotblade.php extension inside the views folder so i can get rid of the second line since it will be covered by the first line okay now let's say that in my views folder i have an about directory and then a file called me that blade.php well this star here is looking at the file name but it won't match it since we've moved up one directory turns out that i can use double star in my pattern here and this will match anything inside the views directory directly in it or in subdirectories as well so it will match about slash me that played that php but also about slash teams slash design steve that blades.php any file that is inside the views directory and ends with thatblade.php will be matched now what if instead of that blade.php the steve view is a view component well our current pattern will not match this but you can also use curly braces to match a series of comma separated values so here i can look for blade.php but also view and let's also add javascript okay so i can remove that line and currently we're still covering only the views directory but it's also possible that we may have a javascript file in here using tailwind classes so i can actually get rid of views in my path and so now everything inside the resources folder so any file inside this resources folder like the javascript or views directories will be covered okay i think we're good now what's important to understand here though is whatever goes inside this content array might be different for your specific project you essentially need to make sure that anywhere that you use tailwind classes in a file that file needs to be somewhere listed in this content array alright next i will go in the css directory and open this up that css file inside i'll add the three tailwind directives at tailwind bass at tailwind components and at tailwind utilities alright we should be all good to go i'll just quickly replace the content of welcome that blade.php and i'll delete everything in there and replace it with a minimal html scaffolding which is referencing our css file i will start the build process with npm run watch [Music] and i'll add some tailwind classes to the h1 tag text 3xl yep font bold underline and looks like everything is working

Channel: simonswiss

Views: 19,912

Keywords:

Id: EgKN3AYD-3o

Length: 4min 49sec (289 seconds)

Published: Thu Apr 28 2022