How to Use Tailwind CSS in Blazor | Quick Start

In this video, we dive into the world of Tailwind CSS and replace Blazor's default CSS framework, Bootstrap, with this popular CSS styling framework.

00:00 Introduction & What we build
00:55 Create the Blazor Web App
01:27 Download the Tailwind CLI
02:53 Create and Configure the Tailwind CSS Config File
03:39 Create the Source Tailwind CSS File
04:03 Load the Generated Tailwind CSS
04:24 Use Tailwind CSS in Code
04:49 Run the Tailwind CSS CLI
05:31 Testing the Blazor Application using Tailwind CSS
07:06 Changing Styles during Runtime (Hot Reload)
07:53 Using Prefixes for Tailwind CSS
08:50 Conclusion

🔥 C#/.NET Bootcamp: The Fundamentals & more (Code FRIENDS10 for 10% OFF)*

📓 Tailwind CSS in Blazor - Project Template (GitHub):

📌 .NET Developer Roadmap

📌 YouTube Playlists:

✅ SUBSCRIBE FOR MORE VIDEOS

🚀 CONNECT & SUPPORT

* Affiliate Link: I earn a small commission at no additional cost

[CHACAL]

Hi Claudio,

I started using tailwind with blazor, but couldn't get it to work in a component library.
Any ideas on how to do this, I would appreciate a video on the topic.

Kind regards,

Sérgio Lopes.

[emuwhee]

This video is super helpful, thank you so much!

[SirBenJamin_]

I'm a WPF developer and am trying to wrap my head around Blazor as we want to port a WPF app to a webapp so its crossplatform and can be used without having to install anything. However, our app is quite complex. It's got loads of custom controls, behaviours, custom panels and all sorts of custom functionality to suite our needs. As an example, we have a custom control for creating node graphs for users to write shaders (very similar to the node editor in Unity). I'm not sure where I'd even start to develop something like this in Blazor. Do you think Blazor is the way to go?

[muks]

I’ve previously used web bootstrap templates from Envato elements or themeforest on blazor & my setup with the project & everything worked perfectly. However I’m using tailwind & I’m struggling with these errors : css hot reload ignoring, blazor server errors, submitting on forms don’t work correctly. Please guide me on how to install a tailwind template if it already has all the references etc : I can forward you the purchased template.

[lerocher]

Nice!
It’s possible to use Tailwind CSS IntelliSense in Visual Studio 22?

[nunograca]

just use nodejs npx to execute the tailwind commands. npx is command that runs from a local or remote npm package. So no download, no node_modules.

[codeDotnet]

We want to build an online store using BLAZOR technology, an integrated project with payment, we hope 😊

[Duelweb]

How is this possible ? You download tailwindcss-windows-x64.exe, but you end up pasting tailwindcss.exe into the folder ????