Blazor & Tailwind CSS 🔥 Quick Start Guide

Подписаться 64 тыс.

Просмотров 14 тыс.

50% 1

🚀 Join the .NET Web Academy with a 30% discount - closing soon!
👉 www.dotnetwebacademy.com/cour...
📧 Newsletter: newsletter.patrickgod.com/
🔥 Blazor E-Commerce Course: www.udemy.com/course/blazor-e...
🔥 Blazor Bootcamp: www.udemy.com/course/blazor-w...
🚀 .NET Jumpstart Course: www.udemy.com/course/net-core...
🐦 Twitter: / _patrickgod
❤️ Ko-fi: ko-fi.com/patrickgod
☕ Coffee: www.buymeacoffee.com/patrickgod
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

Опубликовано:

1 авг 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 37

@PatrickGod 11 месяцев назад

🚀 Join the .NET Web Academy with a 30% discount - closing soon! 👉 www.dotnetwebacademy.com/courses/academy?coupon=dnwas23yt

@edgarwideman737 Год назад

!!!!!!!!!!!!!!! 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.

@guillermomazzari8320 17 дней назад

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

@TheAstroguypasa Год назад

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

@homeofgamesnews 4 месяца назад

Best blazor video ever ❤

@danielhuber2936 Год назад

Thanks for sharing this!

@johnofone 7 месяцев назад

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!

@jessicaalin954 16 дней назад

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!!!

@guillermomazzari8320 Год назад

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

@MrDinakdakan Год назад

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

@kek_1459 Год назад

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.

@dispinser548 9 месяцев назад

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

@joachimlisagermikkelsen2188 9 месяцев назад

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

@osman3404 Год назад

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?

@ramosmig1 Год назад

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.

@VinayKumar-mw4nk 9 месяцев назад

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

@user-oo2wb8tf7i Год назад

Should I still use Visual studio code to use Tailwind css intelligence? Since I only did XAML, the web is too deep

@AK-cf6sj 11 месяцев назад

add htmx to the mix!

@ahmetsarkaya9203 8 месяцев назад

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 🙂

@PatrickGod 8 месяцев назад

Use the wwwroot folder of the Server project. This should work. 😊

@ahmetsarkaya9203 8 месяцев назад

Thank you @@PatrickGod It worked!☺ Also have another question. I will be very appreciated if you answer this one as well. My question is I am using FluentUI and tailwindcss together. I applied the following code. h2 { @apply font-extrabold text-5xl; } I also have My code in .razor file : Counter

@vukasin97 4 месяца назад

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-sm5wf 3 месяца назад

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.

@DK-sm5wf 3 месяца назад

right I went and setup another project, did it literally the same way and now I can edit the font as well as the text size, however I can not change the padding or margin nor the color, which confuses me even more as it seems to use som utility classes but not all of them. So I went and checked the tailwind.config.js and html,razor is correctly added in there. I am not really sure whats causing this

@rnavedojr 10 дней назад

❤

@sajankumarvijayan811 Год назад

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.

@Julimuz 9 месяцев назад

you're right, if the community could create a UI library for blazor using Tailwind that's be amazing, I'm in with you!

@joga_bonito_aro 7 месяцев назад

I had to hold back my puke when you introduced nodejs

@ianandersen2130 Год назад

I wonder about the tailwind approach, seems sort of contrary to the original intent of css in a way, or maybe I'm just old and shudder at the horrific element class chains.

@joseisrael2946 6 месяцев назад

It's a utility First tool, not only. The problem It solves is the complexity involving smaller classes "why do I need to create a custom class for a random wrapper?" just slap 3 to 5 utility classes and you're done. For a complex object like a multi-state button, or a field, you can just write plain old css, Its indeed not reasonable to write 20 utility classes on a single div. Also, that's not a big problem today since most web frameworks use separated components, which even with a high amount of utility classes, are not a hassle to read and maintain.