Integrating Tailwind CSS with Blazor
Creating An npm Project
Make sure that you have Node.js and npm CLI tools installed on your machine. Open the root directory of your Blazor Project.
npm init
Adding Tailwind CSS & Other Packages
npm install -D tailwindcss postcss autoprefixer postcss-cli
Configuring PostCSS
As mentioned earlier, POSTCSS will be responsible for transforming the tailwind.css to your own version. Create a new JS file in the root directory of the project and name it postcss.config.js.
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}
Configuring Tailwind CSS
npx tailwindcss init
tailwind.config.js
module.exports = {
content: ["./**/*.html","./**/*.razor"],
theme: {
extend: {},
},
plugins: [],
}
In the wwwroot\css folder add a new CSS file and name it app.css. ( You could name it anything). This is what POSTCSS will use to generate your site’s CSS resource. Here we will be adding imports from the tailwind CSS library.
@tailwind base; @tailwind components; @tailwind utilities;
Building CSS With PostCSS CLI
Now, we need to build a script that can automate the postcss processing. Add the highlighted lines to your package.json file. What this script/command does is simple – It takes in app.css as the input and generates an app.min.css file in the same path. The newly generated file contains the complete tailwindcss content.
{
"name": "blazorwithtailwindcss",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"buildcss": "postcss wwwroot/css/app.css -o wwwroot/css/app.min.css"
},
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^10.2.4",
"postcss": "^8.2.6",
"postcss-cli": "^8.3.1",
"tailwindcss": "^2.0.3"
}
}
npm run buildcss
This would have generated an app.min.css file in your root directory. You can notice that all the TailwindCSS styles are generated here.
Removing Unused CSS (See Configuring Tailwind CSS instead because purge is obsolete in version 3)
Open up your tailwind.config.js and modify it to match the following.
const colors = require('tailwindcss/colors');
module.exports = {
purge: {
enabled: true,
content: [
'./**/*.html',
'./**/*.razor'
],
},
darkMode: false,
variants: {
extend: {},
},
plugins: [],
}
PS, Make sure that you run the npm run buildcss command every time you make changes in any of the related js or CSS files. (In the next section, we will discuss post-build events that could automate running the npm command every time you build or rebuild the project.)
Configuring Post Build Events
Open your solution file and paste in the following highlighted snippet. This ensures that the dotnet build system runs the npm command once the project is built.
<Project Sdk="Microsoft.NET.Sdk.Web">
<Target Name="PostBuild" AfterTargets="PostBuildEvent">
<Exec Command="npm run buildcss" />
</Target>
<PropertyGroup>
<TargetFramework>net5.0</TargetFramework>
</PropertyGroup>
</Project>
Adding The Stylesheet Reference
Finally, add the referend of the generated CSS file to your Blazor application. Since we have Server Project, you would probably want to add the following snippet to the _Host.cshml file. If you are on a WebAssembly project, Index.html is where you need to add the following.
<link href="~/css/app.min.css" rel="stylesheet" />
Optimizing for Production
npm install -D cssnano
If you’re using Tailwind CLI, you can minify your CSS by adding the --minify flag:
npx tailwindcss -o build.css --minify
If you’ve installed Tailwind as a PostCSS plugin, add cssnano to the end of your plugin list:
postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
cssnano: {preset: 'default'},
}
}
References
https://codewithmukesh.com/blog/integrating-tailwind-css-with-blazor/
https://tailwindcss.com/docs/installation/using-postcss
https://tailwindcss.com/docs/optimizing-for-production