Setting up Blazor with Tailwindcss

So, you decided that you want to try Blazor... Then you decided that you want to try Blazor with Tailwind. This mix of tech is what I like to call WindBlazor.

One of the first things you need to do is get all this junk setup. It's not that hard, I was able to do it in about an hour the first time.

Then I created a repo with the resulting files and made a Github Template out of them. So yes, it took an hour but that was just the one time. Each time I start a new project from now on all I have to do is clone my repo:

• https://github.com/denvercoder/windblazor.git

Now Chris Sainty already wrote a really good post on how to integrate Tailwind into Blazor. You can find it here:

• https://chrissainty.com/integrating-tailwind-css-with-blazor-using-gulp-part-1/

Chris' article is great but in my opinion he left out a few steps to really get you squared away.

First of all he doesn't talk about getting a watch to work.

You can run dotnet watch run from the server project but that only watches server files. If you want it to watch frontend files you have to add a few things.

You'll want to look in your Server.csproj file and create an new ItemGroup like so:

  <ItemGroup>
    <Watch Include="..\Client\**\*.razor" />
  </ItemGroup>

I got the above tidbit from Patrick God.

Now what that will do is the server project will now watch Server files but it will also watch any razor files. When you add:

class="text-red-500 p6"

and then save the file, dotnet watch run will recompile the app and then refresh your browser so you can see the result.

Thanks for reading and that's all y'all.