How to use Sass and Tailwind CSS in Laravel and Vite

hello everyone welcome to death to Main in this video I'm going to teach you how to implement SAS and Tailwind in narrowville application as you see over here the new level application comes with beat okay let's go to vid official website and see how to implement scls okay go to beat and click on over here and click on get start and then go to feature and you click here see it as and you scroll down a little bit you will see CSS preprocessor this is how you can Implement scss in laravel okay just copy this command if you want to read it just read it and try to understand it the next step go back here and open the terminal here make sure you are in the folder of laravel application okay place the command over here hit enter and the next step I recommend you go to resources folder and right click and then new folder we are going to create a folder to store SCS over here type scls let's create our first scls files no files and then name is app at theaters okay you get files over here then you go to feed config.js you have to include app.scss inside here okay let's copy this path and put this over here and then we change this one form CSS folder to scss and this one app dot SCS so these files refer to these files that we just created okay the next step I want you to run npm install and then the next step we are going to view and then go to welcome.blade.php this is the default code form level application so I'm going to remove them here I can remove them I can remove the class over here and remove the Styles over here this is a Tailwind Styles we will install it later so we can remove it out of here so the next step we have to include a beat over here type add beat and then put the array over here inside here this tell that we want to include these files into our HTML okay The Next Step let's create div and let's create H1 and hello scls and Tailwind in lowerville okay I can put class over here container so if I go here and I put container background color blue and over here I push H1 and then I put color yellow okay we are going to test out scls files so I don't care about the style the color okay this one this one is H1 The Next Step run npm run Dev you have to run npm run Dev every time you change SCS in your application uh we are going to create new terminal over here and then run a PHP Artisan serve to start our layer View application so click Ctrl click over here to open web browser see you will see scls work right now okay the next step we are going to install Tailwind CSS okay let's go to Tailwind official website okay tailwindcirs.com let's click on get started and then go to framework guys and then go to laravel over here we are going to start from here step two copy this command and in node over here we are going to stop npm run Dev over here by press Ctrl C and then paste the command over here let's go back to the Tailwind website and copy this command and paste it over here you will see two files I created first one is post css.config.js second one is tailwind.configs.js The Next Step let's go back to the official website and copy this code content copy it and put this over here save and the next step you have to include this Tailwind directive into app.cs copy it in this step you can choose to apply it over here or you can just put it directly in app.scs over here just paste it over here okay and you have to run npm run Dev okay npm run Dev let's use some Tailwind classes in welcome.blade.php okay I can create another class H2 sample text okay over here I can put Tailwind classes class text 3XL and then I can put BG red 100 save it and let's take a look on our web application see you will see two wins classes are working right now okay let me tell you one more thing for example if you want to create a files for scls you can create a files over here for example you can put like sample dot SCS and you can include these files to these files by using add juice and then single code and put the path of sample files something like this okay and over here for example if you put that code background color red okay and if you go to welcome.blade.php and you create div and code SCS okay and over here you can put class and put code over here and if you go back to the website you will see the red is applied to code.cls let's try one more thing about Tailwind for example if you wanna put something like add layer base and you want to change the color of S2 and then you call add apply over here I will apply bgtl 100 and then text 3 XL okay okay let's remove H2 classes over here and if you go back here you will see uh h2 tag has been applied to teal color so the teal color is the background color of h2 tag alright this is all about this video If you like this video don't forget to comment like And subscribe thank you so much for watching

Channel: Devtamin

Views: 4,020

Keywords: laravel, Laravel Framework, Laravel Basic, Laravel tutorial, install Laravel, Laravel for Beginners, set up laravel, laravel from scratch, basic laravel, laravel installation, learn laravel, tailwindcss, Tailwind CSS, Vite, Laravel Vite Sass Tailwind, set up Sass and Tailwind in laravel, tailwind scss vite laravel, install tailwind scss in laravel, install scss and tailwind in laravel, install sass and tailwind in laravel, set up sass in laravel, set up tailwind in laravel

Id: opcyPaIcVfc

Length: 7min 58sec (478 seconds)

Published: Tue Jun 13 2023