Blazor & Tailwind CSS 🔥 Quick Start Guide

🚀 Join the .NET Web Academy with a 30% discount - closing soon!

💻 Use Code LONGERNIGHTS to get 20% off on any course or plan!

Table of Contents:
00:00 Blazor & Tailwind CSS 🔥 Quick Start Guide
01:49 Install Tailwind
08:33 First use of Tailwind Classes
13:15 What about Component Libraries?
17:10 Use Tailwind with your own Components
20:35 Apply classes globally
22:54 How to design the complete app?

#DotNet #Blazor #TailwindCSS

[PatrickGod]

🚀 Join the .NET Web Academy with a 30% discount - closing soon!

[edgarwideman]

This literally couldn't be better timing. I just started my projet yesterday

[MichaelBond]

I’d really like to see a follow-up video explaining how to use TailwindCSS in deployment scenarios, such as CI/CD through GitHub actions.

[guillermomazzari]

A client asked me to not use material ui (I now use mudblazor Wich is based on material ui) for a project im about to start, he wants a unique design, so he hired a UX/ui, she uses tailwind so I came back to this video, thank you so much, I see a big chance on creating a razor library with tailwind components, and then just use this library in future projects

[johnofone]

Loved this video!!! Are you planning any more like this? Specifically, how you copy and paste the "designed component" and then add the Blazor code to make it fully functional... This would be an additional great head start!

[jessicaalin]

Thank you!! This was so helpful 😊

I am curious though why you had to open the terminal from outside Visual Studio. I had to do it myself as well because Visual Studio’s terminal kept giving an error that the file does not exist (even though it does). Would appreciate any input! Thank you!!!

[TheAstroguypasa]

Thanks for sharing this. Came at a time I needed to use tailwind

[ahmetsarkaya]

Any idea how to use it with InteractiveAuto project sample? Since we have two wwwroot folder It's a little confusing. It would be great if you make a video about it. Also thank you for the great content 🙂

[kek_]

Thanks for your videos, they are very helpful.
But I would like to see a video tutorial about the full cycle of authentication and authorization through jwt tokens and refresh tokens using a database

[billnalen]

There is a standalone TailwindCSS CLI tool (for windows, macos, linux) that you can install. No need for Node or NPM.

[vukasin]

Patrick, I noticed one problem with Flowbite and Blazor. I used their integration example from documentation, with dropdown. I put it on homepage and it works. But, after I switch to another page and come back to homepage, it does not work. I realised it's probably as JS is not reinitialized, as Blazor changes only part of the page, rather the whole reload. If I manually reload the page, it's fine. Do you have an idea on how can I solve this?

[DK-smwf]

the installation worked and everything is setup properly, however the styling ahs no effect on the "Hello World", VS does recognise the class tho so I am not sure where the issue is.

[MrDinakdakan]

Thank you, tailwind no im not a frontend dev but copy paste is awesome

[guillermomazzari]

Thanks for sharing, I love tailwind, I think is way better than bootstrap, Ive been trying it out on vue since about a year, I use syncfusion for blazor, but ill give it a try, it be nice to see a full tutorial on tailwind/blazor

[osman]

Not a tailwind specific question but if we know the App will have only one main layout is it good idea to put all the lay out html and css in the App.razor component and get rid of the mainLayout component?

I guess my general question is how do others typically use the App.razor file?

[dispinser]

Hi @PatrickGod i have tried this and follow your instruction but still have any issue when I want use Multilevel Dropdown and modal using flowbite

[VinayKumar-mwnk]

Will you consider it with flowbite, its not working actually. Can you please do a video about.

[joachimlisagermikkelsen]

Would you need to add/initialize Tailwind CSS to both project in the new .NET 8 Blazor template with RenderModeInteractiveAuto?

[ramosmig]

Thank you for the video. I have a question tho. Am i the only one who can't change colors on my elements (with text-neutral-200 for example)? Other classes like text-3xl are working well.

[sajankumarvijayan]

Tailwind is great stuff. I am a js guy used tailwind a lot in many projects.
I have recently started learning blazor and I kind of like it. I have some ideas to create a UI library in blazor using tailwind from scratch. So wondering if anyone wants to collaborate with me? I think this would be great for us to learn blazor and tailwind together.