My server does not update/reload properly

[rempas]

Hello! I asked that question in Svelt's repo but I got no reply yet so, I'm posting here in case anyone can help.

So, I have the following Svelte code and since I added Tailwindcss, the server does not reload properly. To be more precise, updates to CSS files do not appear at all, even when I manually refresh the page. The only exception is if I also update an HTML file. In that case, the changes to HTML are shown and if I refresh the page manually, the CSS is also updated. To summarize:

• If I only change the CSS: The changes are non shown
• If I update the HTML: The changes are shown
• If I update both the HTML and CSS: The changes are shown but, for CSS, I have to manually refresh the page.

To use tailwind, I followed the instructions. I don't know if there is something I did wrong. Maybe tailwind does not automatically refresh the "static" directory or what?

[wongjn]

It seems you may have followed the instructions incorrectly. If we look at step 4:

Import Tailwind CSS

Create a ./src/app.css file and add an @import that imports Tailwind CSS.

@import "tailwindcss";

However, in your repo, the CSS file is static/css/main.css. Consider checking all the steps have been followed correctly.

[rempas]

It seems you may have followed the instructions incorrectly. If we look at step 4:

Import Tailwind CSS

Create a ./src/app.css file and add an @import that imports Tailwind CSS.

@import "tailwindcss";

However, in your repo, the CSS file is static/css/main.css. Consider checking all the steps have been followed correctly.

Yeah, I have my file in another directory as I don't want to have it inside src. I have imported it correctly however as you can see in +page.svelte. The problem is that the file does not update when I modify it unless I also modify HTML or I reload the server.

[wongjn]

Indeed, so your want of having it outside src could be the problem. Also, as alluded to before, you've not followed step 5 either, which states to import into +layout.svelte, not +page.svelte.

[rempas]

Alright. I tried to do it exactly that way and Vite gave me an error about files in the static directory having to be placed inside the "link" tag or "src" attribute. Then, I tried to add the file inside "src" as the info suggests, and now it reads it, but the CSS is not applied.... Great!

I updated the code. This time, I follow 100% the instructions. If you can't help, I'll open an issue, idk...

[wongjn]

Seems to be working as expected. Changing class names lead to visual changes straight away.

Perhaps unrelated but some errors I saw:

• You shouldn't use :global() in the CSS file:

   @custom-variant dark (&:where(.dark, .dark *));
  
  -:global(body) {
  +body {
     margin: 0;
     min-width: 100vw;

  -:global(#app) {
  +#app {
     padding: 10px 16px;

• The URL for the background image is incorrect if you want to keep the image file in static:

   min-height: 100vh;
  -background-image: url("../static/images/base_body_img.jpg");
  +background-image: url("/images/base_body_img.jpg");
   background-size: cover; /* Ensures the image covers the div */

• You seem to have mispelled zinc as sinc in +page.svelte:

   <div id="app" class="dark">
  -  <div id="navbar" class="dark:bg-sinc-950 bg-rose-200">
  +  <div id="navbar" class="dark:bg-zinc-950 bg-rose-200">
       Hello

[rempas]

Damn... It indeed shows to be working now. I don't know which one of the changes you made "unblocked" it, but it does work. Maybe my type with "zinc" caused it to bug, idk...

Thank you so much for the help!