Using Tailwind CSS With .NET Blazor

Hey there!
If you've used Blazor before, then you might know that every Blazor project comes equipped with Bootstrap straight out of the box. (Except for the newly added empty template)

But sometimes, Bootstrap just looks boring, and it's easily recognized from miles away, so what if you want to use something custom yet quick? Well, we can easily set up Tailwind Css for a Blazor project.

Quick Note:

For this particular purpose, we need Node.js to be installed on the machine, so if you don't have it, make sure to download it first before you continue reading.

If you're not sure wether it's installed on your device or not, then open a terminal window, and type the following command:
npm -v
If it's installed, the terminal will display the version you're currently running.

LET'S GET STARTED

For this tutorial, I'll be using an empty Blazor project, so we don't have to clean the boilerplate that happens to come with the main template.

In the directory where you want to create your project, open a new terminal window and run this command to create the empty project:
dotnet new blazorwasm-empty -o BlazorWithTailwind

This command will generate a new project within a new directory named BlazorWithTailwind.

Open the project with your preferred text editor.

Now, in your terminal, navigate to the root directory of your newly created project, and type out this command:
npx tailwindcss init

After the command has completed the installation process, a new file will appear in the root directory called tailwind.config.js.

Next, create a new folder called Styles in the root, and inside it, add a CSS file, you can call it whatever you like, for this demo, I'll be calling it tailwind.css as it makes the most sense.
Add these lines to the file:

@tailwind base;
@tailwind components;
@tailwind utilities;

Then we need to tell tailwind which files it'll be used in, so open the tailwind.config.js file, and change the content property value to this:

content: ['./**/*.{razor,html}']

This is ultimately telling Tailwind that it should watch for changes in all .razor and .html files.

Ok! It's time to run Tailwind.
In your terminal window, run this command:

npx tailwindcss -i ./Styles/tailwind.css -o ./wwwroot/css/tailwind.css --watch

This command is quite lengthy, let's just look at the paths inside it.

The ./Styles/tailwind.css is the file we created earlier with the Tailwind directories, the path after the -o is specifying the output file, it's a good practice to keep your CSS files inside the wwwroot folder, or more specifically, the CSS folder inside wwwroot. The --watch flag at the end is there to indicate that we want Tailwind to watch for changes on the fly, instead of having to rerun the same command hundreds of times, we just let Tailwind watch for updates as we save our project, so the changes could be reflected straight away in the browser.

After running the command, if you go open the new tailwind.css file that was created within /wwwroot/css, you should see some styles already written in it, quite a few in fact, this file will be updated as you use Tailwind classes that aren't actually in that file.

Lastly, we need to link the new stylesheet to the main index.html file so we can access the styles in it anywhere in our project. So, just open the file, add a link tag, and specify the path, it should look something like this:

Time to test

Ok, we've completed the setup, and now we have Tailwind up and running in our project, let's go to the home page file, Index.razor, I've added some dummy text and attached some Tailwind classes to them.

If I run the project now, the output should appear similar to this:

It's not much, but at least sufficient to demonstrate that everything is working as intended, try adding some classes and saving the project, you should see in the terminal window that Tailwind is recompiling every time you make a change and save it.

You Now Know How To Use Tailwind Css With Blazor
Congrats, you can now add Tailwind to any Blazor project you like, you can build components that look amazing without having to worry about writing your own CSS or using the more generic bootstrap design.

If you want to save more time, look up libraries like Flowbite, they provide a range of pre-made Tailwind Css components that you can just copy and paste to your project, and they look absolutely clean, give them a go, the documentation is pretty straightforward and easy to get started with.

GOOD LUCK!