๐Ÿ”ฅ A new version of this template has been released for .NET 6 Preview 3+, it supports 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:

Requisites:

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

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:

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

--

--

A software engineer that focuses on research and teaching and would like to discover and share more about the field.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Juan Barahona

A software engineer that focuses on research and teaching and would like to discover and share more about the field.