Integrating Tailwind CSS in Blazor
If you're on this page, you're probably already familiar with Tailwind CSS, a utility-first CSS framework, and you're looking to integrate it into your Blazor application. Therefore I won't waste your time with an introduction to Tailwind CSS, but I'll directly jump into the good stuff.
Installation and initialization of Tailwind CSS link
To get started, you need to install the Tailwind CSS package, the quickest way to do this is by using the Tailwind CLI with npm (through npx).
Run the following command in the root of your Blazor project.
This command creates a tailwind.config.js file in the root of your project, with an empty configuration.
Configuring Tailwind for Blazor link
The tailwind.config.js file is where you can configure Tailwind CSS to your needs.
For example, you can add custom colors, fonts, or extend the default theme.
The important part is the content property, which is an array of files that Tailwind CSS should scan for used classes.
In a Blazor application, you want to scan the .razor files, and optionally you can also include .html files.
In the following configuration, all .razor and .html files in the project are analyzed.
You can modify this path to only include specific files/directories
The CSS part link
The next step is to create a CSS file where you import the Tailwind CSS building blocks.
I recommend creating a tailwind.css file in the Styles folder (you probably need to create this folder as well), but you're free to choose any other location and name.
Generating and serving the CSS link
With the initial setup complete, you can now use the Tailwind CLI again to generate the CSS file.
Using tailwindcss you can specify the input file and the output file.
The output file usually goes into the wwwroot folder, so it can be served by the application.
With the following command, the previously created ./Styles/tailwind.css file is passed as the input.
This will create a styles.css file in the wwwroot folder.
After running this command, you should see the styles.css file within the existing wwwroot folder.
Lastly, if you're using Blazor Server, import this generated css file in your App.blazor file.
If you're using Blazor WebAssambly, you need to import the generated css file in the wwwroot/index.html file.
Tailwind CSS Optimizations link
Because we updated the tailwind configuration, the styles.css file only contains the tailwind classes that are used in your application.
This way, you can keep the CSS file size small and only include the styles that are needed.
You can see this in action by adding tailwind classes to your Blazor components. As a test, you can add the following HTML to your home page. The result should be a larger than usual, bold, and underlined text.
When you re-execute the tailwindcss command (npx tailwindcss -i ./Styles/tailwind.css -o ./wwwroot/styles.css), you will see some changes in the styles.css file.
The styles for the used classes text-3xl, font-bold, and underline should now be included in the styles.css file.
Now when you run your Blazor application, you should see the Tailwind CSS styles applied to your application.
Improving the development experience link
Always having to run the tailwindcss command manually isn't very convenient.
To make it easier you can automate this process by using the watch command, which watches for changes in the files and automatically rebuilds the CSS file.
The first option is to use the --watch flag with the tailwindcss command, which generates the CSS file every time a file changes.
This can be enough, but on the other hand this is not very efficient, because you need to know the command and remember to run it every time you start the application (or at least, when you want to update the styles).
A better option is to add a build target to your project file that runs the tailwindcss command before the application is compiled.
In the example below we include the tailwindcss command which we've used before, but this time it will automatically run every time you build the application.
By default, the watch command only detects changes to files that are a part of the project.
If you want to include the tailwind.css file to trigger a rebuild/reload, you need to include it within the project file.
In the example below, a ItemGroup is created to watch for changes within the tailwind.css file.
Normally, once the initial tailwind setup is complete, you probably don't need to make any more changes to the tailwind.css file. To keep things simple, you can skip/remove this part.
Optimizing the (CI) build link
In a production environment, you ideally want to minify the CSS file to reduce the file size. This helps to improve the loading time of your application, creating the best possible user experience.
Tailwind supports this task by using the --minify flag
To minify the CSS file within your project, you can add a second build target in the project file that is run when the application is built in release mode.
Using the Condition attribute, a MSBuild condition can be specified to run the target only in specific scenarios.
In the example below, we've modified the first target to only run in the debug configuration, which is used during development. Additionally, a second target is added that runs in the release configuration.
The command used in the release configuration includes the --minify flag to minify the CSS file.
With this approach, the output CSS file is minified when you build the application in release mode, e.g. within a CI/CD pipeline.
In the example above, you can also notice the NODE_ENV=production environment variable.
While tailwind doesn't use this variable directly as far as I know, it's a common practice to do within a Node.js environment.
This can be useful if you're using other tools in your build process that rely on this variable.
For more information, see the Tailwind Optimizing for Production documentation.
Conclusion link
Because the Tailwind CLI, integrating Tailwind CSS in a Blazor application is pretty straightforward.
In this post, I've shown how the CLI can be used to scaffoldd the initial setup.
I've then slightly modified it for a Blazor-specific application by settings the contents property so that tailwind includes the .razor and .html files in the project.
This is important to ensure that only the used classes are included in the generated CSS file.
To further optimize the generated CSS file, I've shown how you can leverage the minify option to reduce the file size.
Lastly, we've went through how to configure the project files to automate the building process using build targets.
The result is an optimal CSS file, which is automatically generated (and minified) when the application is built, making the development process more efficient and the application faster.
As pointed out in the comments, you can also directly include the Tailwind CSS CDN in your index.html file.
This is a valid approach, but it's not as efficient as generating the CSS file only with the used classes, because this leads to a larger file size.
Feel free to update this blog post on GitHub, thanks in advance!
Join My Newsletter (WIP)
Join my weekly newsletter to receive my latest blog posts and bits, directly in your inbox.
Support me
I appreciate it if you would support me if have you enjoyed this post and found it useful, thank you in advance.
