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!!

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?

I am having the exact same problem!

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 -_-

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.

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...

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.

(削除) 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.

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

It works

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

thanks,its very helpful