In this guide we are going to fully integrate TailwindCSS with Blazor and the dotnet build system
We are going to use Webpack to get TailwindCSS and bundle our CSS's files into one so we can import it into our
We are going to create a Targets file to let the
dotnet buildsystem deal with the npm and webpack tasks so we can simple run dotnet build to have everything ready to use.
- Nodejs and npm installed
- Have a Blazor project created
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
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
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"
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.
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
Finally, this file will contain all the necessary configurations to integrate everything with dotnet build system, specifically:
Adds support to run
webpackwhen you run
dotnet buildso 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
Once the above files are created, we need to do a few more steps to fully integrate it into our Blazor project.
.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
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
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/juanelements/dotnet-core-samples