Tailwind css 4 Beta with Asp.net Blazor

[Maera90]

Hi guys!

I am trying to set up a project with with Blazor Server (Dotnet 9) and Tailwindcss 4. I am using the Standalone CLI (I do not use NPM).

Looks like tailwind does not scan the .razor files. Is there a way to tell tailwind to scan those files? With tailwind 3 I always used the tailwind.config.js.

Thanks in advance :D

[diane45flores]

Hi there! To set up a project with Blazor Server (Dotnet 9) and Tailwind CSS 4 using the Standalone CLI, you need to create a tailwind.config.js file and update the content array to include .razor files. Then, use the Tailwind CLI to generate the CSS file and reference it in your Blazor project. This way, Tailwind will TellCulver scan your .razor files and apply the necessary styles. I hope this helps! Feel free to ask if you need further assistance.

[Maera90]

Thanks for the answer! I saw that option in the docs already, but hoped to be able to solve the problem with the css first approach :D

I will keep my tailwind.config.js then. Thank you!!

[Trix07]

I'm having trouble getting my tailwind.config.js file to work with the Standalone CLI.

Here’s what I have in my app.css:

@import "tailwindcss";
@config "./../../tailwind.config.js";

The Standalone CLI reads the file without issues. To simplify debugging, I stripped down the tailwind.config.js file to just the content section:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './Components/**/*.{razor,html,cs}',
    './Pages/**/*.{razor,html,cs}',
    './Layout/**/*.{razor,html,cs}',
    './wwwroot/index.html',
  ],
};

However, when I run the CLI, this is the output I get:

/*! tailwindcss v4.0.0-beta.9 | MIT License | https://tailwindcss.com */
@import "tailwindcss: @import "tailwindcss";

What could I be doing wrong? Any suggestions?

[Maera90]

I am having the exact same problem!

[Trix07]

I think I just figured it out!

The `config` statement needs to come before the `import` one. It looks like the documentation might be incorrect, since it shows it the other way around...

@config "./../../tailwind.config.js";
@import "tailwindcss";

UPDATE:

This issue seems to be caused by incorrect file encoding and can be fixed by changing the encoding to Unicode (UTF-8 without signature) - Codepage 65001. See #15662 for more details.

[joriverm]

This issue seems to be caused by incorrect file encoding and can be fixed by changing the encoding to Unicode (UTF-8 without signature) - Codepage 65001. See #15662 for more details.

the problem there is that (on my end at least) it throws an error that it cant resolve tailwindcss <<
Error: Can't resolve 'tailwindcss' in ...
when i make the file UTF8+BOM its fine but it doesn't process my razor files -_-

[ABIOLI-COM]

...so could anyone please explain the steps starting from scratch, to include tailwind v4 in a blazor application?
It would be really appreciated...
Thank you in advance.
Andrea

[Trix07]

Sure, I can walk you through the essential steps to set up Tailwind v4 for Blazor. Since Blazor doesn’t include NPM by default, I highly recommend using the standalone CLI version of Tailwind. You can download the latest standalone tailwindcss-windows-x64.exe from here.

1. Setup

If you don’t already have a Blazor project, create one. Then, place the downloaded exe file in the root of your project and create a tailwind.config.js file in the same location.

Since we need to include Razor files in the Tailwind configuration, we’ll have to use the old configuration method. Add the following to your tailwind.config.js along with any other settings you need:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './Components/**/*.{razor,html,cs}',
    './Pages/**/*.{razor,html,cs}',
    './Layout/**/*.{razor,html,cs}',
    './wwwroot/index.html',
  ],
};

2. CSS Configuration

You should already have an app.css (or a similar CSS file) inside wwwroot. At the top of this file, add the following lines:

@import "tailwindcss";
@config "./../../tailwind.config.js";

Make sure the path to tailwind.config.js is correct based on your folder structure inside wwwroot.

3. Save with the Correct Encoding

Now for the really important part! You must save your CSS file using the Unicode (UTF-8 without signature) - Codepage 65001 encoding. By default, Visual Studio doesn’t use this encoding, so you’ll need to set it manually. If you’re unsure how, check this answer from stack overflow.

4. Build the Tailwind CSS

Once your file is correctly saved, open a terminal in your project folder and run:

tailwindcss-windows-x64.exe -i .\wwwroot/styles/app.css -o .\wwwroot/styles/app.min.css --watch

Update the paths if needed to match your project structure.

5. Add link to output CSS file

Lastly add a link to your output CSS file app.min.css in the head tag of you index.html file.

<link rel="stylesheet" href="styles/app.min.css" />

That should be all. If you run into any issues, feel free to ask, and I'll be happy to try and help.

[joriverm]

these steps are nice and all, but the encoding issue breaks it completely. a git setup can be setup in multiple ways in relation to encodings and newlines. so developer A can commit the app.css correctly, but developer B can commit it differently breaking it for everyone.

there is also some ongoing discussion whether the config is still needed or not. some say it isn't, some say it is.
i found it to be needed, but apparently it works for some without?

the v4 release is imo a mess on windows...

[Trix07]

I agree it’s a bit of a mess, and I was surprised that they took it out of beta with all these known hurdles. The encoding issue is definitely something that should have been fixed before release and is most likely causing a lot of frustration. I know it did for me. Regarding the configuration file, I don’t mind if it sticks around. I think it's easier to understand and set up, but I can also see the potential in the new method.

[ABIOLI-COM]

Wow, wonderful! :-) Really thank you. Although I also read that the tailwind.config.js is now deprecated... this is more or less what I already did with versions 3.x, but I think that with version 4 things are changed...

[Trix07]

You are right. However, v4 doesn't detect Razor files by default, so you must add them to the configuration manually. I haven't figured out exactly how to do this with the new way of configuring Tailwind, so for now, I'm sticking with the old config file...

EDIT: As others have mentioned, this is no longer the case, and Tailwind v4 is able to detect Razor files correctly. I guess it's more of a personal preference if you want to use the config file.

[BarFoo]

Hi @Trix07 just wanted to say that as of the latest version of the tailwindcss cli you can use the --content flag to specify which files to scan.

tailwindcss -i src/Frontend/styles/tailwind.css -o wwwroot/css/tailwind.css --watch --content "**/*.razor, **/*.html"

Thanks

[ABIOLI-COM]

Meanwhile, I followed this tutorial: https://www.billtalkstoomuch.com/2025/02/12/installing-tailwind-css-v4-in-a-blazor-webapp/
I just had the first run, and apparently it works perfectly, scanning all the razor files and generating the correct result. I think that the scan now happens on just everything, down the folders, or something like that...
I didn't really test everything, but the first result looks really promising! :-)

[KaimDev]

It works

[lukewilson2002]

I used his blog post to write an improved guide: https://gist.github.com/lukewilson2002/e1f57a2f943705612f178e71abc46bfc

[lukewilson2002]

I wrote an improved guide to setting up TailwindCSS and DaisyUI with an ASP.NET Core 9 Razor pages project using all of the guides and information I found here and on blogs:

https://gist.github.com/lukewilson2002/e1f57a2f943705612f178e71abc46bfc

@ABIOLI-COM posted a link to a blog that was very helpful in discovering a simpler method. Combined with DaisyUI docs and my own experience, I simplified it a bit.