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

  • @PatrickGod
    @PatrickGod10 ай бұрын

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

  • @edgarwideman737
    @edgarwideman737 Жыл бұрын

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

  • @MichaelBond
    @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.

  • @TheAstroguypasa
    @TheAstroguypasa Жыл бұрын

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

  • @danielhuber2936
    @danielhuber2936 Жыл бұрын

    Thanks for sharing this!

  • @homeofgamesnews
    @homeofgamesnews3 ай бұрын

    Best blazor video ever ❤

  • @johnofone
    @johnofone6 ай бұрын

    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!

  • @billnalen
    @billnalen19 күн бұрын

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

  • @guillermomazzari8320
    @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

  • @dispinser548
    @dispinser5488 ай бұрын

    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
    @joachimlisagermikkelsen21888 ай бұрын

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

  • @kek_1459
    @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

  • @MrDinakdakan
    @MrDinakdakan11 ай бұрын

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

  • @osman3404
    @osman340411 ай бұрын

    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?

  • @user-oo2wb8tf7i
    @user-oo2wb8tf7i Жыл бұрын

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

  • @ramosmig1
    @ramosmig111 ай бұрын

    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
    @VinayKumar-mw4nk9 ай бұрын

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

  • @vukasin97
    @vukasin973 ай бұрын

    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?

  • @AK-cf6sj
    @AK-cf6sj10 ай бұрын

    add htmx to the mix!

  • @ahmetsarkaya9203
    @ahmetsarkaya92037 ай бұрын

    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

    @PatrickGod

    7 ай бұрын

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

  • @ahmetsarkaya9203

    @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

  • @DK-sm5wf
    @DK-sm5wf2 ай бұрын

    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

    @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

  • @sajankumarvijayan811
    @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.

  • @Julimuz03

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

  • @ianandersen2130
    @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

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

  • @joga_bonito_aro
    @joga_bonito_aro6 ай бұрын

    I had to hold back my puke when you introduced nodejs

  • @ElTioDev
    @ElTioDev Жыл бұрын

    third

  • @NaveenKumar-dc8jv
    @NaveenKumar-dc8jv Жыл бұрын

    Fourth to comment :=D

  • @louiidelosreyes742
    @louiidelosreyes742 Жыл бұрын

    First!😂

  • @cryptoeric24
    @cryptoeric24 Жыл бұрын

    Last

  • @jeremaine
    @jeremaine Жыл бұрын

    Second :)