DEV Community

Cover image for Integrating Tailwind into a Blazor Project
BamButz
BamButz

Posted on β€’ Edited on

2 1

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>
Enter fullscreen mode Exit fullscreen mode

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.

Please leave your appreciation by commenting on this post!

Okay, let's go.

Happy coding ❀️

Top comments (3)

Collapse
 
mudgen profile image
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...

Collapse
 
bambutz profile image
BamButz β€’ β€’ Edited

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. πŸ™‚

Collapse
 
mudgen profile image
Nick Mudge β€’

Great! Yes, you are correct.

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

πŸ‘‹ Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay