Building beautiful Blazor apps with Tailwind CSS - Chris Sainty - NDC Oslo 2021

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 talk, you will learn how to bring the power of Tailwind CSS to your Blazor applications. We’ll start off with an introduction to Tailwind and how it differs from other CSS frameworks. 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 how just how beautiful we can make our Blazor app!

Check out more of our featured speakers and talks at

[julienlegu]

Great explanation ! I plan to use Tailwind CSS with Blazor one day and this would be helpful. Thanks !

[aislanarislou]

JIT mode is the default now my man!!! We are in 2022!! ^_^

[untracked]

Great presentation!!! I wish I saw it sooner. Amazing stuff.

[ericblankenburg]

Great presentation. Thanks for posting it.

[oncalldev]

I'm wondering how a design component like MudBlazor could dovetail into something like TailwindCSS. It could be an interesting combination.

[davidsantacruz]

Ok, but if I have a main webassembly blazor application and components in razor class libraries; how to work with them and Tailwind CSS?

[aislanarislou]

Ah I see, he is using a old version of TailwindCSS.

Just use the v3.0 and be happy!!!

[MrCharlesDeluxe]

I think that at @33:58 there's a missing "Dispose" call for that timer ⏲, Timer implements IDisposable interface so it should be disposed accordingly to release resources.

[guillermomazzari]

I guess I could use SASS or vanilla CSS if you can use tailwind, I ask because I'm building my own SASS library, I would prefer to use it rather than tailwind, hope someone could answer, thanks!

[SIR_Studios]

npx is not recogrnized on my windows machine

[bokmcdok]

How is this not just inline css with extra steps?

[Albertkallal]

Ok, and this is different then bootstrap how? I mean using bootstrap your 99% of the time using classes. Now of course CSS has become so massive, that tossing in that designer helps, and having a better short hand for bootstrap classes?
Ok so another layer on top of bootstrap is ok, but sooner or later this crazy has to stop.
But, like hand coding lots of html is stone age, I 100% accept and agree that the ever growing massive huge number of bootstrap and ever growing CSS has to be tamed.
So this looks to be MUCH better than bootstrap and if the designer can also be included in the web site? (That let's me edit the theme and easy add to it?)?
Ok, I'm sold, but another JavaScript library in addition to the way too many I have is becoming way way too huge, and the amount and number of JavaScript frameworks and libraries is beyond out of control.
We need tailwind to become part of the browser standard.
Exactly how many more JavaScript library's are we required for tailwind and what's the increased JavaScript library's cost size wise?