Integrating Tailwind into ASP.Net Projects


Last year around this time 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.

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, which 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

Popular posts from this blog

I'm starting my first blog