How to use Tailwind CSS in Vue with Vite | Install TailwindCSS in Vue for Beginners

hello everyone in this tutorial I'm going to show you how to install Tailwind CSS in view project okay this is my application I have made a fresh installation of view 3 with feed okay if you go to the source code you will see vid.config.js is used in view 3 actually in the past we use webpack right now we use v.config.js and this is the default website of view so I will clean it up first okay let me clean this up so we can remove this one okay and in main we can remove it as well remove everything from in and for component I will delete them all so icon I can delete this as well I want to show only Hello World on our application okay and this one we can remove this one okay this one I will show only Hello World let me remove this one and create div hello View with Tailwind okay and for CSS over here I can delete them all save okay let's go back to our application you will see something like this by default okay next I will get start install Tailwind on our project so how to use a Tailwind CSS in feed projects you go to documentation tailwindcns.com and then go to Docs and then go to framework guides and go to feed and over here there are two tab react or view so in this case we are using View we've already created few projects all right we will skip step one let's jump into step two step two you have to run this command to install Tailwind on your project copy it okay let's go back to visual studio code we have to stop our project Ctrl C and then type y hit enter Then paste the command over here hit enter then if you go to package.json you will see that Tailwind Series has been installed in our projects already okay The Next Step you need to run this command to create two files the first one is tailwind.config.c.js and post css.config.c.js okay let's paste that command over here hit enter you will see two files are created tailwind.configs.js and post css.config.js okay the next thing that you have to do you have to add the view path okay which is this one you can just copy the content over here copy it and then go to tailwind.config.js you replace the content that you just copy over here okay and you will get something like this okay the next thing you have to create styles.css but in this case I don't want to create Styles I can use main.css okay just copy this one or you just write remove main.cs okay and then let me create styles dot CSS I just paste Tailwind over here so we enclose Tailwind in our project and the next thing that you have to do you have to include styles.css into main.js and you can remove this one because we have removed it from our projects or you can just change this to be styles okay save and then what else you have to do you have to run npm run Dev okay let's run in PM run Dev hit enter okay okay next let's try our first Tailwind for example text 3XL font bow and underline copy it and go to our app.view put class over here paste the Tailwind CSS over here okay let's take a look at our application okay let me put background color BG red 200. save okay this work all right this is all about this tutorial if you like this video don't forget to click like subscribe and comment down below thank you so much for watching

Channel: Devtamin

Views: 20,670

Keywords: programming, code, coding, coding tutorial, programming tutorial, web development, Vue.js, Vue, install tailwind in Vue, use Tailwind in Vite Vue, use Tailwind in Vue Vite, Tailwind Vue Vite, Tailwind Vue.js, Tailwind, Tailwindcss, tailwindcss, Tailwind vite, vue vite tailwindcss, vue vite tailwind css, use tailwindcss in vue.js, use tailwind css in vue.js vite, vue.js vite tailwindcss, vue.js vite tailwind css, use tailwind css in vite, use tailwind vite, use tailwind in vue project

Id: 7xll3A4_jeo

Length: 5min 15sec (315 seconds)

Published: Fri Dec 02 2022