Tailwind v4 with Blazor - It just got easier

[giscus[bot]]

Tailwind v4 with Blazor - It just got easier

Tailwind version 4 was just released. With the new CLI, it is just so much easier to use tailwindcss with Blazor. So in this post, I will show you how to use the new CLI to create a new Blazor project with Tailwind v4.
Short desclaimer: If you still want to use version 3, I already wrote an article about this some time ago: "Blazor with TailwindCSS".

https://steven-giesel.com/blogPost/364c43d2-b31e-4377-8001-ac75ce78cdc6/tailwind-v4-with-blazor-it-just-got-easier

[fingers10]

@linkdotnet how to purge css? I think tailwind will generate large css files. Can you shed some lights on purging css in blazor wasm especially when we use tailwind, bulma, etc?

[linkdotnet]

To a big extent they are already removed by the CLI. Some of the variables are left in intentionally: tailwindlabs/tailwindcss#15714

[Hazzel1337]

sometimes base.css and sometimes dist.css is used, is this wanted, i know have both files, they look pretty much the same, and for me its still not working, even after your fabolous tutorial

[Hazzel1337]

okay now it works, i deleted in my App.razor:
<link rel="stylesheet" href="@assets["lib/bootstrap/dist/css/bootstrap.min.css"]" />
<link rel="stylesheet" href="@assets["BTW.styles.css"]" />

and i changed in package.json:
"build:css": "npx @tailwindcss/cli -i wwwroot/app.css -o wwwroot/base.css",
"watch:css": "npx @tailwindcss/cli -i wwwroot/app.css -o wwwroot/base.css --watch"

to dist.css instead of base.css <-- no clue if thats correct

at least my test css works now :

Hello, world!

[linkdotnet]

@Hazzel1337 oh no - that was an inconsistency on my side. I corrected it. Either only base.css or only dist.css :D but not that mix.

[Hazzel1337]

thank you for making that clear, i did already change to dist.css

[NicoNyga]

Simplest and most straight forward guide yet! Thank you! But when I install the cli, no .json files or node-modules folders are created. What could be the problem?

[linkdotnet]

That seems to be an issue with npm. If you just create an empty folder, cli to it and execute npm install tailwindcss @tailwindcss/cli what happens?

[linkdotnet]

npm should install the stuff in the current directory (that said, it should create a package.json plus node_modules folder). If that isn't the case, then it might be something wrong in the setup (like your terminal current directory was somewhere else for example).

[NicoNyga]

It works now when i do everything from the cli. To me it seems very difficult to setup and work with tailwind + dotnet.. I hope to see more confident users demonstrating how to do it :)