Integrating Tailwind into a Blazor Project

BamButz — Tue, 23 Jun 2020 09:32:33 +0000

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.

DEV Community: BamButz

Integrating Tailwind into a Blazor Project