Install Tailwind CSS with Vite (HTML, JavaScript & Vite - Using PostCSS)

In this video, I'm going to teach how to integrate Tailwind CSS into a Vanilla Vite project. The installation is so easy. You will love it. Vite is a bundle tool that help you set up frontend project easily. Tailwind is a CSS framework that focuses on utility classes. Now, Tailwind CSS framework is really popular among developers. You should learn about it.

[tea]

Those who has trouble showing the result, you may have to change postcss.config.js to .cjs

[AbdullahWaseem-ki]

I face a problem when i write npm run build then the dist folder created but some of the images donot work in dist i mean do jot include in the dist diat/assets folder whether the images works well in the orignal index.html i mean in which i write out html and giving images path.

How to solve this issue

[atomboyd]

Easy and straight to the point. Love it.

[GauravSharma-xlnc]

Thanku, my tailwind css not working for few days i watch many videos but not helpful, and then watch ur video, u are a lifesaver😅😅

[mdzeeshan]

Straight to the point. Thanks bro, you have saved me multiple times.

[jasurhaydarovcode]

Hi, can you show me how to use bro vite with tailwindcss components

[scarrletTV]

Let me ask some stupid question. After "npm run build" command I'll got 'dist' folder as output of the project and I can copy and paste in any backend tools (e.g. Django) am I correct?

[MatheusPereira-nndj]

when I already have all the successful packages in the project but I forgot the host address, which command do I use ??

[recreateInChrist]

Thanks so much for this tutorial, you made it so easy

[arturhonores]

Muchas gracias!!!era justo lo que necesitaba

[souvikchakraborty]

my vite server is constantly showing web page not found for the local host 5173 . i have node js installed and still getting 404 error what is the problem ?

[taahaquraishi]

i followed exactly the same procedure like in video but still getting error that the vite is not recognized as an internal and external command while running command npm run start

[webcoder]

4:25 'npx tailwindcss init - p' with this command config file will be generated. No need to copy paste from documentation

[Allformyequine]

Can I use this with a simple php site too? Will the install be the same? Thank you for the great video!

[Kb-unrk]

How to implement this project created by. Vite in laravel??

[abhijitbarman]

how to deploy this in netlify or vercel

[jitendrajangir]

Hay brother can I create multiple page website on tailwindcss

[thatsalot]

quick tip : if you're wondering why this doesn't work with your .jsx files then add content: ["./src/**/*.{html, js, jsx}"], in tailwind config file right here 5:05

[FaizanAnwerAli]

CAn you please make a video on vite vanilla routing?

[taofeeqomotolani]

Nice video. How about using sass with vite