Blazor & Tailwind CSS 🔥 Quick Start Guide
🚀 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
Пікірлер: 34
🚀 Join the .NET Web Academy with a 30% discount - closing soon! 👉 www.dotnetwebacademy.com/courses/academy?coupon=dnwas23yt
!!!!!!!!!!!!!!! This literally couldn't be better timing. I just started my projet yesterday
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.
Thanks for sharing this. Came at a time I needed to use tailwind
Thanks for sharing this!
Best blazor video ever ❤
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!
There is a standalone TailwindCSS CLI tool (for windows, macos, linux) that you can install. No need for Node or NPM.
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
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
Would you need to add/initialize Tailwind CSS to both project in the new .NET 8 Blazor template with RenderModeInteractiveAuto?
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
Thank you, tailwind no im not a frontend dev but copy paste is awesome
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?
Should I still use Visual studio code to use Tailwind css intelligence? Since I only did XAML, the web is too deep
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.
Will you consider it with flowbite , its not working actually. Can you please do a video about.
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?
add htmx to the mix!
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
7 ай бұрын
Use the wwwroot folder of the Server project. This should work. 😊
@ahmetsarkaya9203
7 ай бұрын
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
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
2 ай бұрын
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
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.
@Julimuz03
8 ай бұрын
you're right, if the community could create a UI library for blazor using Tailwind that's be amazing, I'm in with you!
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
5 ай бұрын
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.
I had to hold back my puke when you introduced nodejs
third
Fourth to comment :=D
First!😂
Last
Second :)