Installing Tailwind CSS v4 in a Blazor v9 WebApp

William H. Noel

12 Feb 2025 • 4 min read

I had a horrible experience with Tailwind, up until some YouTube contributors (listed at the bottom of this post) had up to date videos on the matter. Certainly, AI is still trailing on up to the second content.

I'm using Windows 11 and Rider and a Blazor WebApp with InteractiveAuto specified, so I have two projects.

Download the stand alone executable for tailwindcss cli. You can find that here. Ignore the documentation, it's out of date and still talking about tailwind.config.js. 🤦
Put the executable in your path so you don't have to go digging later.
Also, rename it something shorter so you can type less - I called minetw4cli.

💡

Lots of places in the TailwindCSS documentation says that you won't need node.js if you're using the cli.
1. But if you don't have tailwind installed, the @import "tailwindcss"; directive doesn't work.
2. The only way I can figure out to install it is with node.
3. I stopped fighting it.

💡

All of the following are done in the root of the server project and not the client project.

Install Tailwind. Some instructions will tell you to install the cli at the same time. But that's the one that runs under npm and not the one you downloaded. Here's the short version that only installs TailwindCss:

npm install tailwindcss

Following Chris Sainty's excellent material (don't follow the installation instructions, they're for v3) do the following:
1. Create a Styles folder in the server project.
2. Create an input.css file in that folder
3. Add one line to the input.css file (you might add more later)

@import "tailwindcss";

And in what would be a giant "up-yours" to all people trying to get actual work done, this file has to have an encoding of UTF-8. If you created in via the context menu in Rider, it won't. And then the command will fail with:

Error: Invalid declaration: `@import "tailwindcss"`

If you're in Rider select the input.css file, then use the menu File=>File Encoding and set it.

Open a terminal window in the Solution root folder, not the server or client project folders, and enter the following command:

tw4cli -i ./<server-project-name>/styles/input.css -o ./<server-project-name>/wwwroot/app.css --watch

Because we are now in the root of the solution, the cli will scan all child folders. I could not find this documented anywhere, but with v4 you don't specify a config to locate your source, therefor it must scan everything underneath the current folder.

This is how it can pick up classes you've used in both projects and ensure that the final app.css includes them all.

Update your server launchSettings.json file to include the lines below for hotReload. Remember to update both http and https profiles:

"hotReloadEnabled": true,
"watchStaticFiles": true,

If you are running dotnet watch in a terminal in the server project root directory, then as you make changes to the client or server projects, the cli will pick up those changes, add them to app.css and dotnet watch will rebuild and you will see the changes right away.

I still can't get IntelliSense working, but other than that, it seems to be functioning.

YouTube videos that helped:

Don't sign up. I'm not sending you things.