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?
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.