Tailwind CSS In Blazor ASP.NET Core App With Grunt
I am currently experimenting with Blazor ASP.NET Core and wondered if I could use Tailwind CSS to replace the default static Bootstrap CSS configuration.
Why Tailwind CSS?
Tailwind CSS has been getting a lot of attention recently.
As stated in the site Tailwind CSS is: “A utility-first CSS framework for rapidly building custom designs.”
Specifically: “Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.”
Why Grunt?
Grunt is the only JavaScript task runner mentioned in the official ASP.NET Core 3.1 documentation and “… fully supported in Visual Studio.”.
Unfortunately, in the Tailwind CSS’ documentation there seems to be no example for setting up Grunt.
Creating the Application
In Visual Studio, create a new Blazor ASP.NET Core Application.
- Select Project Template ‘Blazor App’.
2. Setup project and solution name (BlazorASPNETCoreTailwindCS in this case).
