So I’m trying to use tailwindcss (with hot reload) in my blazor project which is structured like this :
So as you can see, my main project is the “Portal” and it’s referrencing the “PortalComponents”.
“PortalComponents” will contains some blazor components with some tailwind class attached to them.
“Portal” is using tailwindcss 4, because the HotReload works in this version, that’s my package.json
{
"scripts": {
"build:css": "npm install && npx @tailwindcss/cli@next -i wwwroot/css/app.css -o wwwroot/css/app.min.css",
"buildwatchcss": "npx @tailwindcss/cli@next -i wwwroot/css/app.css -o wwwroot/css/app.min.css --watch"
},
"dependencies": {
"@tailwindcss/cli": "^4.0.0-alpha.15",
"tailwindcss": "^4.0.0-alpha.15"
}
}
As you can see, I have two scripts, the first one runs after the build
<Target Name="PostBuild" AfterTargets="PostBuildEvent">
<Exec Command="npm run build:css" />
</Target>
And the second one runs using this nugget package : Tailwind.Extensions.AspNetCore
And I had to modify the Program.cs to run it :
if (app.Environment.IsDevelopment())
{
_ = app.RunTailwind("buildwatchcss", "./");
}
My issue
When I change an element from any page in the “Portal” project, it will regenerate the css and it will render the new changes.
Example :
From this
<div>My div</div>
To that
<div class="bg-blue-500">My div</div>
My div will appear with a background color with the Hot Reload
Now if I modify a component in the “PortalComponents” using the same utility class as before, it will Hot Reload and show the new change.
BUT
If I add a new utility class to a component inside “PortalComponents”, never used before in “Portal”, it will not show the new change.
What I think my problem is
It seems like the script that listen to the changes only checks if the file is directly modified inside the Portal project, and doesn’t modify the CSS accordingly, even if the component is rendered inside another page from the “Portal”
I would like to watch both project with tailwind css, and be able to regenerate the css of the “Portal” project when I modify the “PortalComponent” project