Add Tailwind CSS to Blazor! | Build a Blog - Ep 01

In this video of the Build a Blog series, I set up our initial Blazor application and I show how to add Tailwind CSS to it. By default Blazor apps come with Bootstrap included, but I prefer to strip it out and use Tailwind.
I show how to set up and configure Tailwind config file and how to use the Tailwind CLI along with npx to create the final css file.
I also give some hints on how to run the tailwind cli command along with the dotnet watch command in Jetbrains Rider.
Code from this episode:
github.com/Scr...
Code for the whole series:
github.com/Scr...
Follow me on social media!
Instagram: / scriptbytes
Threads: www.threads.ne...
Check out my blog!
scriptbytes.io/

[@raphaellukas3328]

Thank you very much for this video. This is what I was looking for :-)

[@oncalldev]

You have a very direct approach in your tutorials - getting from Point A to B as fast as you can. I assume that you're gearing this series more towards intermediate developers who can fill in the gaps and may not require extended explanations. Using a Mac, JetBrains, and introducing NPM seem more to unnecessarily complicate things - although they are fine platforms/tools. I've worked in software development for a long time and I use KZbin videos to learn something new, reinforce what I know, and basically see things in a way I may not have known about before. Your videos certainly seem to fall into the latter category for me and I'm fine with that and will continue to follow your series. If your intent is to onboard newer developers or those new to Blazor, it may not be the right combination.

[@scriptbytes]

You are 100% correct. I am assuming most viewers have a general knowledge of C# and web development concepts if they are watching my videos. I also know using a Mac and Rider might be weird for a .Net/Blazor app, but I’m ok with that. This is the same setup I use in my day job with a full .Net/Microsoft stack and rarely have issues. I think most things are similar enough to Visual Studio that it (hopefully) won’t be too confusing to viewers, but we’ll see. I appreciate the feedback though! Thank you!

[@AlejandroBiancucci]

Great set up video. Straight forward and easy to follow. My development experience is so much better with this set up. Keep it up!

[@shahnawazk]

Thanks for all you are doing, keep it up. Looking forward to learn new Blazor stuff.

[@scriptbytes]

Thanks!

[@larsthomasdenstad9082]

Awesome and quickfire video. Only possible improvement would be commands in description. Subscribed.

[@CyberWalkerX]

Look forward to update

[@paulh6933]

thanks for using the cli!!!

[@Duelweb]

You have an "unhandled exception" error when your app runs. I have same, which prevents project from running.

[@scriptbytes]

Thanks, I'll try to get it fixed soon.

[@gianfrancodiaz6486]

This may be useful for somebody watching this tutorial: If you are using Visual Studio and you'd like to run automatically before the project compiles, you may copy and paste this XML code inside your Blazor server .csproj (after you defined the *tailwind:dev command* inside your *package.json* file): What does it do? It runs the content of the specified command in package.json BEFORE compilation. I added a 3000 ms delay in case Tailwind needs extra time to finish running since you want the output CSS ready before the execution.

[@scriptbytes]

Great info, thanks!

[@MarkTulewicz]

I tried this in the latest visual studio... but for some reason i get a very different app.css when it inspect, than what I see in the app.css that tailwind generates. my text-red-800 is in the tailwind app.css, but when I run its not there.

[@MarkTulewicz]

Fixed: I had to rename app.css to tailwind_app.css it seems something in visual studio writes out a app.css on top of it while compiling?

[@scriptbytes]

Glad you got it working!

[@lerocher2182]

Nice! How can I do all this in Visual Studio 22?

[@scriptbytes]

Everything should be the same except the last part where I showed how to run the steps in parallel. Unfortunately I haven’t used VS in a year or so, so I’m not sure exactly how that’s done, but I would assume there is a similar way of doing it.

[@Duelweb]

Followed your directions, but intellisense does not show up in my home page ?

[@scriptbytes]

I think another person commented they had to install the tailwind extension.

[@Duelweb]

@@scriptbytes Thanks, yes this solved the problem.

[@CHACAL8949]

How to create a component library and use tailwind?

[@scriptbytes]

This is something I haven't dug into really deep yet, so I'm not 100% sure this is right, but more than likely I think you'd want to use a Razor Class Library to put all of your components into. Then you could package these up into a dll or nuget package and use across multiple projects. As for using Tailwind in it, I think just make sure you are using the tailwind CLI in the project that consumes the components and it'll work? I'd have to test it out though.