Integrating Tailwind into a Blazor Project

A few weeks ago I started experimenting with Blazor and quickly found myself in the situation that I wanted to use a CSS framework. So, I started looking for the best way to integrate Tailwind into a Blazor project. I found out that there was no way to integrate Tailwind into the project without creating a project.json and thus having a node_modules directory in the project. Since I was not satisfied with this approach, I looked at how I could design a system that fits better into my project.

In the end I came up with a solution in which I simply include a NuGet package in the project and assign the build action I gained through it to my stylesheet.

<Project Sdk="Microsoft.NET.Sdk">

  <PropertyGroup>
    <TargetFramework>netcoreapp3.1</TargetFramework>
  <PropertyGroup>

  <ItemGroup>
    <TailwindCSS Include="Styles/Tailwind.css" />
  </ItemGroup>

  <ItemGroup>
    <PackageReference Include="BamButz.MSBuild.TailwindCSS" PrivateAssets="All" />
  </ItemGroup>

</Project>

But what is inside the NuGet package?

It simply contains the things I didn't want in my project: the project.json and the node_modules directory, plus an MSBuild target and a JavaScript file.

It works as follows: The target calls the JavaScript file via node.js and provides information about project & file path, then the JavaScript file proceeds to setup PostCSS and simply loads the source stylesheet into it and writes the output of PostCSS into the target file, wich is stored in the same location as the source file with the extension .min.css.

If you need to use a custom configuration you can simply drop a tailwind.config.js into your project directory as the script is checking for the file before transforming.

If you want to know more about it, you can take a look at its Github Repository.

Comments

[Nick Mudge]

You said this which is no longer true!

I found out that there was no way to integrate Tailwind into the project without creating a project.json and thus having a node_modules directory in the project.

Today I released RunCSS, which is a runtime version of TailwindCSS. It requires no node.js integration! Let me know what you think. See this article about it: dev.to/mudgen/runcss-a-runtime-ver...

[BamButz]

Hey Nick, RunCSS seems really great, and I will try it in one of my minor projects!

If I get it right, RunCSS isn't really TailwindCSS you rather used their conventions. Accordingly, if Tailwind is changing something you had to adapt to it, right?

When I am correct, my statement that Tailwind cannot be integrated without a node project would still be correct. 🙂

[Nick Mudge]

Great! Yes, you are correct.