How to Install Tailwindcss in a Laravel Project

hello everyone in this tutorial I'm going to show you how you can install Ty in CSS in your larabel project so I'll show you from the very beginning so let's go and create a face LEL project so I'm going to create a project over here let's say so let's open the common prompt here then zoom in we are going to say here laravel new let's say our project name will be laravel uncore project then press enter so it will create an arel project for us so right now I'll just first for the video so here you can see that the project creation is complete so let's go to our project directory we say here CD lore project then press enter right now we all project we say here bsp RT Sun serve so let's go to our browser let's say this press enter and this is our fated varable project so right now we need to install Ty CSS in our L project so let's go open our project using Vis Studio code so let's just let say here bscore this all so let's go and open our project and click file then open folder my project was lore project disol open folder desol so right now let's go and uh have a common promp over here click this terminal new terminal we can just close this so here we need to write a command in order to install Ty in CSS in our l project so for it uh we'll go to our browser and here you can see uh this is the Ty in CSS official page for larel and here you can see some common out here this is the project creation and after this here you can see NB install minus D tying CSS Port CSS Auto prefixer so we're going to copy this command then let's go our Visual Studio code and paste this command in the terminal then press enter so it will uh install record packages for Di CSS so again I'll just pass for the video and here you can see it is done and if you want to check if it is properly installed or not then just uh go to the packages. JSL over here if you go over here packages. JSL uh here you can see auto prefixer which is this one uh here you can see post CSS this all and Ty CSS this all and there's also bite so after this command we need to run one more command and which is npx tying CSS in minus P so let's go again paste the command and press enter and once you run this command it will create a tile. config.js file over here you can see this file so here uh in this file we need to make some changes so here you get the content part that is to third bracket so here uh let me just directly go to to the browser and here you can see ty. config.js so inside the content we need to copy and paste this three l so I'll just copy this then uh go to the .js file and inside the content we'll just paste it let me just zoom in so here you can see blade. pH so whatever blade file will have under the resource fold it will have access to the time CSS the same goes for JS and if you have view in your LEL project then you also need to add view if and if you do not have view in your LEL project then you can just remove it but we just keep it that's fine all the all over here is done so we can just close this so after this let's go back and if you go down here you can see in the app. CSS we need to add this three line Ty base component and utilities so copy it go back to our Vis Studio code uh we go to our resour Source then CSS and here you can see app. CSS click over here and we'll paste the three like then we can just save this then close it after it let's go back so here you can see npm round we'll just copy it and we'll just paste it here in PM brand if press enter and we're done so right now we'll go to our resource then views then welcome. blade. PHP and uh let me just do this and let me just remove every port from here let's just over here simple HTML and here inside the body we'll just say here h on and inside this HR uh we'll just say hello or let's just say here hello or so right now if we save it then if we now refresh here here you can see Hello all but this is just a normal hello all there is no Ty CSS if the ti CSS was added uh The Taste would look different so in order to add the time CSS here you can see at the end of B resources CSS app.css so we need to copy this and we need to paste it inside the head section so once you paste this uh we'll have access to the Ty in CSS so right now if we save this then if we now refresh here the text will look a little bit different there you can see so right now we'll be able to write our time CSS in our LEL project so let me just do this so here in the H on we say here class equal to text minus 3 Excel save there you can see the font size changed after this we can see here font Dash board save it again there you can see and we can also say over here underline save and then you can see underline it means we are able to successfully install time CSS in our larel project so this how you can install dial CSS in your larel project and I'll also give this link in the description just check it out so I hope this tutorial was useful to you thanks in for watching uh make sure to subscribe I really appreciate that and I hope to see you in the future tutorials

Channel: Web Tech Knowledge

Views: 6,760

Keywords: install tailwind css in laravel, install tailwind in laravel, how to install tailwind css in laravel, install tailwindcss in laravel, how to install tailwindcss into laravel, how to install tailwind in laravel, how to setup tailwindcss in laravel, tailwind css in laravel, setting up tailwind in a laravel project, set up tailwind in laravel, set up taillwind in laravel, set up tailwind project, tailwind css laravel, laravel tailwind css, use tailwind css in laravel

Id: APftz8p4isY

Length: 6min 15sec (375 seconds)

Published: Tue Oct 17 2023