Building beautiful Blazor apps with Tailwind CSS | .NET Conf 2023

Tailwind CSS has been growing in popularity for some time. It’s fast becoming one of the top frameworks to use when styling applications. It offers a different approach to the traditional frameworks like Bootstrap—utility based styling. Rather than using prebuilt components—which result in your application looking like a lot of others on the web—you can tailor your design by applying small focused CSS classes resulting in a unique style for your app.

In this code focused talk, you will learn how to bring the power of Tailwind CSS to your Blazor applications. We’ll start off with a brief introduction to Tailwind. Then we’ll get into some code and see how we can integrate Tailwind with Blazor. For the rest of the time, we’ll explore the various features of Tailwind and see just how beautiful we can make our Blazor app!

#dotnet

[DiogoLScarmagnani]

It's very exciting to know that we can use Tailwind so easily with Blazor together. I like Bootstrap but Tailwind gave me very productivity when I use it with to build my React apps. Maybe I'll give it a try to Blazor as soon as I can. Blazor looks really good to use, very complete full stack solution to build with C#. I think it'll be complete++ when we can use Shadcn as well.

[modernkennnern]

I love that you opened with "Tailwind is fully configurable", because most people who see it looks at it and thinks it's Bootstrap but messier to look at.

[davidtaylor]

You should have shown the tailwind cli tool. It would make more sense for many blazor developers to use that given many would not already be using node and npm.

I am successfully using it in a project and it actually works well having tailwind with --watch and dotnet --watch and seeing the hot reload work even with the tailwind styles changing without needing to restart the project. It works quite well.

Overall though I am not convinced by tailwind, but more following the think it is one of those things where we overreact and go one way...then in 5 years all say what a mess we made and go back the other way.

[oddikaro]

MIcrosoft should provide templates and tutos for these kind of stuff. The video is great but should be documented in official docs.

[nicolasmaluleke]

I had about tailwind a few years ago, I looked at it and I was like nope (mostly because I assumed what it was, which was mostly the same reasons I've read in the comments, which now I've learnt are really misguided).Now that I've used it, I know regret not using it this whole time, I cant begin to justify how flexible, minimal and productive it is, It literally made my want to design every Figma designs I came across just for fun 🤣

[purplepixeleater]

This is the only consistently good tutorial throughout all the changes and avoids anything but the necessities. Thank you so much!

[markusn]

Too bad there is no Tailwind Intellisense support in Visual Studio.. Have to use VS Code, which has that extension.

[osman]

Some of the questions from the viewers COMPLETELY missed the whole point of Tailwindcss

[rafaelandelocidev]

Great content in such little time. Well done

[acodersjourney]

Your channel is a source of motivation for many.

[helleyequeue]

Great one guys. BRAZOR 🔥! Don't want to see JS anymore forever!

[ainxtyan]

Great stuff as usual Chris. Have you found that the tailwind command with --watch throws an exception after a while? It's as if it's not garbage collecting, or there's some kind of overflow in the script. Fresh Windows, fresh Node, everything fresh.. happens still.

[SBDavin]

An alternative to Tailwind's "Obtrusive CSS" methodology is to simply create component-based CSS files using the naming convention, <component>.razor.css.

[helleyequeue]

I installed it with Node.js on Windows 5 min job downloaded the .exe for some reason it was not executing (admin mode as well) so yea went with node.js (used the git bash terminal). Just make sure you are in the project folder when creating the tailwind.js file so it shows in the project in VS. And also when putting the target code (end of video) building might fail (if it does restart VS and try again).

[mcha_yt]

Next we need tailwindcss intellisense in visual studio !

[alexandermackintosh]

Outside of blazor, I have found the prettier tailwind plugin for consistent class ordering to be an essential part of working with tailwind effectively in a team (one less stylistic thing to argue about). Is there an equivalent visual studio extension/other suggestions for how to do something similar here? I'm so nearly sold!

[jayantguru]

Great stuff. Please use a proper headphone with mic for voice clarity.

[GackFinder]

The more of Tailwind I see, the more I like Bootstrap.

[emcwealth]

tailwind css - love the concept and idea... but to use it professionally... not really interested until tooling for Visual Studio (not VS Code) is integrated for Tailwind... not really interested in npm/npx or tailwind's cli in order to get it working in a project... blah.... would rather use Bootstrap or raw css

[chrislunar]

Hi, Where can I find the source from this demo? I am interested in the build commands you showed at the end.