How to Setup TailwindCSS 3.0 in a Laravel 9 Project | Full Laravel 9 Course | Laravel For Beginners

[@r.b.4009]

awesome run through! Great guide on how to set this up, where I struggled with several other tutorials. Thanks so much!

[@codewithdary]

You're very welcome!

[@blanche0018]

I really though there will be a lot of changes since Vite, but I think it doesn't affect all of the tutorial at all. I followed the installation from tailwind, but I still watched this, because there's a lot more info that I didnt really know, most of it were tiny details. Thanks Sir! I

[@codewithdary]

Vite is just a replacement of Webpack which compiles your frontend assets. Doesn't really change anything to the core of Laravel. Compiling assets in Vite and Webpack both have the same "general idea" behind it. You can use a Tailwind CDN as well to follow this course which makes it simple as well.

[@blanche0018]

@@codewithdary Ohhh thanks for the explanation Sir! I've been learning a lot from your tutorial, since I am using Laravel for my project. But I use React for frontend and firebase for database instead. I still followed everything since I know I need to know it.

[@joshua0x]

Great video. Not to long, but with all the information needed.

[@codewithdary]

Thank you Joshua!

[@e-poxytutorials1297]

Awesome information. Thank you. I am just starting out with Tailwind and this is very informative.

[@codewithdary]

Lovely man, good luck with that! :)

[@lukinkoo]

When you develop in Docker container on a Linux machine (e.g. I use Lando, VSCode), where do you actually install Tailwind CSS? Inside the container? Or on the local machine (in Linux)?

[@codewithdary]

I'm not very familiar with Docker, but I would most likely install it inside the container, since the development environment will be consistent across different machines.

[@bakarbsa]

I'm using tailwind elements, which files i should import 'tw-elements' on laravel 9?

[@fabiansb]

Hi, I'm on a project with Laravel 9 and Mix. I've installed tailwind and I got noticed my tailwind.config.js isn't working. What do I have to do? Any suggestion? I could solve it by putting code into css/app.css below the @tailwind directives, but It's gonna be useful for me doing that on tailwing.config.js theme.

[@codewithdary]

Here is the docs that works for Laravel Vite: tailwindcss.com/docs/guides/laravel

[@stephenzammit3512]

Hi Dary thank you for your very interesting material that you upload for us. No words to thank yuou enough. My question if I may please Laravel 9 dropped webpack and is only supporting vite. Will you be giving a tutorial on this issue please? Thank you and well done.

[@codewithdary]

Not anytime soon. Too many small issues with Vite now and I have other plans.

[@johnnyade]

Updating this video would be useful as Laravel now uses vite, I had problems until I was able to figure out how use tailwindcss with vite

[@codewithdary]

Definitely. Got lots of other content ideas first :) tailwindcss.com/docs/guides/laravel#vite

[@MePeterNicholls]

I use bootstrap. Can bootstrap be used like this?

[@codewithdary]

You can install bootstrap manually and compile sass. First, add it to npm with compilers: npm install bootstrap npm install sass npm install sass-loader Second, create (if not created) resources/sass/app.scss and add this: @import '~bootstrap'; Third, add compilation in webpack.mix.js: mix.sass('resources/sass/app.scss', 'public/css') Than, compile it with npm run dev - you see compiled file public/css/app.css Now you can use it in templates with asset:

[@MePeterNicholls]

@@codewithdary wow thank you!

[@eldoradokolade]

@@codewithdary Please can you pin this comment to this video? Thank you

[@djordje1999]

Can you do updated version of this video? Backsupport is awful for laravel..

[@codewithdary]

I won't be doing that, I already have two 'how to install Tailwind CSS' videos on my channel.

[@codewithdary]

Also; how much more updated do you want it to be? Laravel 9 + Tailwind 3?

[@lfan_tv]

hi why my first time run the code can show the tailwind css style, but i change the color then it does not work?

[@savmass]

Unfortunately the files did not generate like you've listed so I am unable to install it properly.The series has been amazing so far, I really hope I can still follow without installing tailwind CSS. As well, my package.json looks very different than yours, with many missing lines.

[@codewithdary]

Hi savmass. You could also use tailwind CDN (just google it) and use that instead of the stylesheet. It’s easier for demonstration purposes.

[@savmass]

@@codewithdary I'll look it up, thank you for the reply. Am I ok just to use npm uninstall to get rid of what I had installed so far then?

[@codewithdary]

Yes, that should do the trick for you :)