Quantcast
Channel: Active questions tagged blazor - Stack Overflow
Viewing all articles
Browse latest Browse all 4839

How to make Hot Reload work with TailwindCSS and a splitted blazor solution

$
0
0

So I'm trying to use tailwindcss (with hot reload) in my blazor project which is structured like this :Picture representing a solution containing 3 projects

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


Viewing all articles
Browse latest Browse all 4839

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>