No video

How to use Tailwind CSS in Laravel and Vite

  Рет қаралды 28,578

Devtamin

Devtamin

Күн бұрын

In this video tutorial, we will learn how to install Tailwind CSS in the Laravel project using Vite. The new Laravel project has used Vite instead of Mix. I'll teach you every thing step by step and do it by following the Tailwindcss documentation from its official website.
The video covers a little bit about how to set up Laravel because we focus mainly on how to add Tailwind CSS in Laravel with Vite.
If you don't know how to install Laravel, watch this video • How to Install Laravel...

Пікірлер: 81
@hotshotgolfer3079
@hotshotgolfer3079 Жыл бұрын
Fantastic!! I wish I could get back a few hours that I spent trying to get vite and tailwind css to work in my laravel. Glad I found this video.
@Devtamin
@Devtamin Жыл бұрын
Glad it help. Please, subscribe
@hotshotgolfer3079
@hotshotgolfer3079 Жыл бұрын
@@Devtamin already again TY
@Devtamin
@Devtamin Жыл бұрын
@@hotshotgolfer3079 Thank you😄
@Prolo2001
@Prolo2001 Жыл бұрын
Thank you! Keep helping people with your tutorials
@Devtamin
@Devtamin Жыл бұрын
Thank you for a comment. Pls, subscribe
@theotheluo6546
@theotheluo6546 Жыл бұрын
Thank you for this video, I have been having problems installing tailwindcss in my laravel project.
@Devtamin
@Devtamin Жыл бұрын
Thank you for comment. Please, subscribe
@sadhappy8860
@sadhappy8860 Жыл бұрын
Thank you very much! Straight to the point and very helpful
@Devtamin
@Devtamin Жыл бұрын
Thank you for a comment. Please, subscribe
@ThaeSuPaing-dg4yk
@ThaeSuPaing-dg4yk Жыл бұрын
I wish I saw your video sooner! Thank you soo much!
@Devtamin
@Devtamin Жыл бұрын
You're welcome. Please, subscribe
@miragliottadamien6901
@miragliottadamien6901 Жыл бұрын
very clear . Thank you very much.
@Devtamin
@Devtamin Жыл бұрын
Glad it was helpful! Please, subscribe
@bk18169
@bk18169 Жыл бұрын
very helpful... thank you so much
@Devtamin
@Devtamin 10 ай бұрын
Glad it was helpful!
@CodeCastbd
@CodeCastbd Жыл бұрын
Nice tutorial!
@Devtamin
@Devtamin Жыл бұрын
Thank you for your comment. Please, subscribe
@lukinkoo
@lukinkoo Жыл бұрын
Nice video! One question. If you develop in a Docker container, do you install Tailwind CSS inside the container? Or on the local machine (I have Linux + VSCode)?
@Devtamin
@Devtamin Жыл бұрын
Install it in the Laravel project which is inside the container.
@Nisaa107_
@Nisaa107_ 8 ай бұрын
Thanks sir ,
@Devtamin
@Devtamin 8 ай бұрын
You're welcome. Please, subscribe
@nahedsaid8786
@nahedsaid8786 10 ай бұрын
Thank you
@Devtamin
@Devtamin 10 ай бұрын
You're welcome
@fmz111
@fmz111 Жыл бұрын
Thanks Man!
@Devtamin
@Devtamin Жыл бұрын
Glad to help! Please, subscribe
@user-io5nj5tf3f
@user-io5nj5tf3f Жыл бұрын
thanks you so much bro
@Devtamin
@Devtamin Жыл бұрын
Thank for a comment. Please, subscribe
@SHADOW-up1oi
@SHADOW-up1oi 2 жыл бұрын
thank you so much man it worked. but can you please tell me what to do? whenever i switch from php artisan to laragon npm run dev gets executed but it doesn't style my page using the tailwind classes
@Devtamin
@Devtamin 2 жыл бұрын
I've used only XAMPP. I'll try Laragon. Please, subscribe.
@Md_Tariqul
@Md_Tariqul Жыл бұрын
Tnx man..
@Devtamin
@Devtamin Жыл бұрын
You're welcome. I really appreciate your comment. Please, subscribe
@donatkrasniqi4084
@donatkrasniqi4084 3 ай бұрын
What if i want to use talwind inside vue components. Is that possible?
@hamzahamza711
@hamzahamza711 Жыл бұрын
thanks
@Devtamin
@Devtamin Жыл бұрын
Thank for your comment. Please, subscribe
@mariaisabelloverahernandez
@mariaisabelloverahernandez Жыл бұрын
Thank you very much.
@Devtamin
@Devtamin Жыл бұрын
You're welcome. I really appreciate your comment. Please, subscribe
@mariaisabelloverahernandez
@mariaisabelloverahernandez Жыл бұрын
@@Devtamin sure! I'm already subscribed
@Devtamin
@Devtamin Жыл бұрын
@@mariaisabelloverahernandez Thank you so much
@oliverrodriguez3238
@oliverrodriguez3238 Жыл бұрын
when uploading it to a server like hostinger I have problems, I have not been able to configure my static files to point to public_html and not to public, can you make a video of how to upload it?
@Devtamin
@Devtamin Жыл бұрын
I'll do it soon. Please, subscribe
@timeforrice
@timeforrice Жыл бұрын
How about deploying? My project doesn't load the the css file.
@happyfriendsentertainment
@happyfriendsentertainment 8 ай бұрын
I tried it and the "@tailwind base; @tailwind components; @tailwind utilities;" have been underline i just want to know why? but it was working same as yours
@Devtamin
@Devtamin 8 ай бұрын
We include tailwind styles to the application css
@kamilmalak4828
@kamilmalak4828 Жыл бұрын
Why vsc prompts your parameters inside class? (for example this bg-red-700)? Is that extenstion?
@Devtamin
@Devtamin Жыл бұрын
Yes, it is the Tailwind CSS IntelliSense extension, marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss . Please, subscribe 👌
@kamilmalak4828
@kamilmalak4828 Жыл бұрын
Thanks, take care
@Devtamin
@Devtamin Жыл бұрын
@@kamilmalak4828 You're welcome
@alpisyahri4094
@alpisyahri4094 Жыл бұрын
sir, i had problem with uploading my tailwind project to hosting website, can u help me ? the problem says "Vite manifest not found at: ..../public/build/manifest.json" and it ask me to Run `npm run dev` in your terminal and refresh the page
@Devtamin
@Devtamin Жыл бұрын
Have you try "npm run build" ? Please, subscribe
@hxg.1
@hxg.1 Жыл бұрын
hello, how about making a vid on how to install unocss with laravel?
@Devtamin
@Devtamin Жыл бұрын
Thank for mentioning about unocss. I've never heard about. I'll check it out and make a video about it soon
@danarseptiyanto4066
@danarseptiyanto4066 4 ай бұрын
So I dont have to run npm run watch?
@muhammadilhammaulidin4535
@muhammadilhammaulidin4535 2 жыл бұрын
Great video mann, but can you make how to install daisy ui with vite?
@Devtamin
@Devtamin 2 жыл бұрын
Glad you like it. I will do it. Please, subscribe
@muhammadilhammaulidin4535
@muhammadilhammaulidin4535 2 жыл бұрын
@@Devtamin okee donee
@Devtamin
@Devtamin 2 жыл бұрын
@@muhammadilhammaulidin4535 Thank you so much. The video about Daisy UI is coming 😄
@Devtamin
@Devtamin 2 жыл бұрын
@Muhammad Ilham Maulidin here is how to install daisyUI in Laravel, kzfaq.info/get/bejne/o9eVbMRo0K65pqM.html
@jesussandoval4969
@jesussandoval4969 Жыл бұрын
Thanks man! I was missing the line @vite('resources/css/app.css')
@Devtamin
@Devtamin Жыл бұрын
You're welcome. Thank you for a comment. Pls, subscribe
@iqbalpaa
@iqbalpaa Жыл бұрын
heplful!
@Devtamin
@Devtamin Жыл бұрын
Thank for a comment. Please, subscribe
@muhammadyogiepratama1576
@muhammadyogiepratama1576 2 жыл бұрын
is it always have to run npm run dev?
@Devtamin
@Devtamin 2 жыл бұрын
Yes, sir. Please, subscribe
@alexanderzelenskyi4215
@alexanderzelenskyi4215 Жыл бұрын
And what to do if it's not work? Just not loading any styles without any issues?
@Devtamin
@Devtamin Жыл бұрын
Sorry to hear that. I think if you follow it step by step, it should work
@haian_
@haian_ Жыл бұрын
When run npm run dev I found error, how to fix
@Devtamin
@Devtamin Жыл бұрын
What is the error?
@user-kh6rp6yx1j
@user-kh6rp6yx1j 3 ай бұрын
Hello
@baranmukry8331
@baranmukry8331 Жыл бұрын
how to install vite ......? inside laravel project
@Devtamin
@Devtamin Жыл бұрын
Laravel 9 comes with Vite, so you don't need to install it. Please, subscribe
@baranmukry8331
@baranmukry8331 Жыл бұрын
@@Devtamin if i want install vite with laravel 8 how can i do it
@Devtamin
@Devtamin Жыл бұрын
There are many steps that you have to take. Check out this article - christoph-rumpel.com/2022/6/moving-a-laravel-webpack-project-to-vite
@baranmukry8331
@baranmukry8331 Жыл бұрын
@@Devtamin thanks bro
@Devtamin
@Devtamin Жыл бұрын
@@baranmukry8331 You're welcome
@yasser.elgammal
@yasser.elgammal Жыл бұрын
The problem with me was i missed this line: @vite('resources/css/app.css') You saved my day, Thank you
@Devtamin
@Devtamin Жыл бұрын
You're welcome. Please, subscribe
@quanm7077
@quanm7077 Жыл бұрын
i receive this error when try to run 'npm run dev' failed to load config from D:\MyProjects\Laravel\Project#001\vite.config.js error when starting dev server: Error: cannot test case insensitive FS, CLIENT_ENTRY does not point to an existing file: D:\dist\client\client.mjs at testCaseInsensitiveFS (D:\MyProjects\Laravel\Project#001 ode_modules\vite\dist ode-cjs\publicUtils.cjs:3432:15) at Object. (D:\MyProjects\Laravel\Project#001 ode_modules\vite\dist ode-cjs\publicUtils.cjs:3437:1) at Module._compile (node:internal/modules/cjs/loader:1105:14) at Module._extensions..js (node:internal/modules/cjs/loader:1159:10) at Object._require.extensions. [as .js] (file:///D:/MyProjects/Laravel/Project%23001/node_modules/vite/dist/node/chunks/dep-5605cfa4.js:63157:17) at Module.load (node:internal/modules/cjs/loader:981:32) at Function.Module._load (node:internal/modules/cjs/loader:822:12) at Module.require (node:internal/modules/cjs/loader:1005:19) at require (node:internal/modules/cjs/helpers:102:18) at Object. (D:\MyProjects\Laravel\Project#001 ode_modules\vite\index.cjs:7:31)
@Devtamin
@Devtamin Жыл бұрын
it might be typo problems. Please, check it out again.
@venkatesh1170
@venkatesh1170 21 күн бұрын
thanks
@Devtamin
@Devtamin 21 күн бұрын
Welcome
Laravel 9.19: From Mix to Vite - What You Need To Know
9:56
Laravel Daily
Рет қаралды 54 М.
Kids' Guide to Fire Safety: Essential Lessons #shorts
00:34
Fabiosa Animated
Рет қаралды 10 МЛН
Setting up Tailwind CSS in a Laravel Project
4:50
simonswiss
Рет қаралды 20 М.
Did We Get It Wrong? Ryzen 7 9700X & Ryzen 5 9600X Re-Review
33:44
Hardware Unboxed
Рет қаралды 192 М.
So THAT'S why we don't have these Dev Kits yet
10:20
Alex Ziskind
Рет қаралды 21 М.
A Python Developers Guide to AI in 2024
12:51
Tech With Tim
Рет қаралды 13 М.
STARK VPN SETTINGS
1:53
TECH UNLIMTED tutorial 💯 @cyberhunter24
Рет қаралды 229
Glassmorphism Login Form using React, Vite & Tailwind CSS
9:01
G-Tech Official
Рет қаралды 747
All-In-One Vite & Laravel Guide ⚡️📓
8:03
Tuto1902
Рет қаралды 6 М.
Kids' Guide to Fire Safety: Essential Lessons #shorts
00:34
Fabiosa Animated
Рет қаралды 10 МЛН