How to configure TailwindCSS with Blazor
Tags: dotnet, css, csharp, tutorial
Published: 2020-08-03 15:17:41

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

{% gist https://gist.github.com/barahonajm/812af5c82cdb1581812a3475e51ff317.js %}


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

{% gist https://gist.github.com/barahonajm/a51a077239da358057637550168e717a.js %}

## package.json

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


{% gist https://gist.github.com/barahonajm/c70f978d56eaa5e51e9d7737cc1424eb %}

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:

{% gist https://gist.github.com/barahonajm/243cf6d2e79e8ac1dab5db80a1124af6 %}

For more information about TailwindCSS and PostCSS refer their [official docs](https://tailwindcss.com/docs/using-with-preprocessors/).

## 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`

{% gist https://gist.github.com/barahonajm/fa2738521b6c7f27d19b37c6b5cc6651 %}

## 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

{% gist https://gist.github.com/barahonajm/ad764b504d2f98749d1e1a34041c8246 %}

# 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:

{% gist https://gist.github.com/barahonajm/51fb8b60d5a171b41264c2d10649784a %}

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.


{% gist https://gist.github.com/barahonajm/7a7c468c76830613ca141dea3a1116c2
%}

# 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