How to configure TailwindCSS with Blazor

#dotnet #css #csharp #tutorial

🔥 A new version of this template has been released for .NET 6 Preview 3+, it support blazor + tailwindcss with hot reload and css isolation https://github.com/barahonajm/blazor-tailwindcss-template

In this guide we are going to fully integrate TailwindCSS with Blazor and the dotnet build system

Summary:

We are going to use Webpack to get TailwindCSS and bundle our CSS's files into one so we can import it into our index.html or _hosts.cshtml file.
We are going to create a Targets file to let the dotnet build system deal with the npm and webpack tasks so we can simple run dotnet build to have everything ready to use.

Requisites:

Nodejs and npm installed
Have a Blazor project created

Adding TailwindCSS and necessary configurations

First, we are going to create a new folder in our Blazor project called StaticAssets which will contain the following files:

📁StaticAssets
  📁css
    📝 file1.css
    📝 file2.css
    📝 main.css
  📝 package.json
  📝 tailwind.config.js
  📝 postcss.config.js
  📝 webpack.config.js
  📝 StaticAssets.targets

main.css

This file will be the entry point in our webpack configuration so it must import all your other css files which will likely contains your own rules composed on terms of TailwindCSS.

Here an example of what could be inside your file1.css

package.json

Contains our dependencies and the scripts that will be run by the dotnet build system.

The package.json file includes the following dependencies to helps us obtain a bundled css from webpack and avoid generation of empty js files

"mini-css-extract-plugin": "^0.9.0",   
"webpack-fix-style-only-entries": "^0.5.1"

postcss.config.js

Since tailwind is a postcss plugin we will need a postcss config file with the following contet:

For more information about TailwindCSS and PostCSS refer their official docs.

webpack.config.js

Contains the minimal configuration to take our main.css compile it and then export into our wwwroot/css folder so we can use the resulted file into our index.html or _Hosts.csthtml

StaticAssets.targets

Finally, this file will contain all the necessary configurations to integrate everything with dotnet build system, specifically:

Adds support to run npm install and webpack when you run dotnet build so you don't need to run it manually
Adds support for incremental build, so the above commands will only be executed if there are changes in any of the files inside StaticAssets folder

Adding everything into your Blazor project

Once the above files are created, we need to do a few more steps to fully integrate it into our Blazor project.

Modify your .csproj file

Your .csproj must contain the new targets file we have created, to do that we only need to import it at the end:

At this point you can already invoke dotnet build and you will notice that the npm install and webpack are executed too, this will generate a file called main.css inside your wwwroot/css folder.

Import main.css file into your index.html

Now that we have our main.css which contains our own rules as well as all tailwind rules, we can import it into our index.html which is in wwwroot folder.

Conclusion

With these steps you are going to be able to use the TailwindCSS utilities into .razor files without any problem, if want to create acss files that are composed in term of TailwindCSS just make sure to put it into StaticAssets folder and import into your main.css file.

The complete repository can be found here https://github.com/barahonajm/dotnet-core-samples

Top comments (4)

Juan Barahona • Apr 13 '21 • Edited

🔥 A new version of this template has been released for .NET 6 Preview 3+, it support blazor + tailwindcss with hot reload and css isolation github.com/juancient/blazor-tailwi...