Changes in css files built with Quinoa made after quarkus dev do not become visible

[ccidral]

I'm using Quinoa to build tailwindcss files. When I run quarkus dev and open the web app in the browser, everything looks fine. But when I make a change in some html file, i.e. add some tailwindcss class, the newly generated css files don't seem to take effect when I refresh the browser. I can only see the changes when I stop the app and run quarkus dev again.

Here's what I have:

application.properties

quarkus.quinoa.build-dir=build

src/main/webui/package.json

{
    "scripts": {
        "build": "npx tailwindcss build -i css/styles.tailwind.css -o build/css/styles.css",
        "start": "npx tailwindcss build -w -i css/styles.tailwind.css -o build/css/styles.css"
    }
}

src/main/webui/tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ['../resources/templates/**/*.html'],
    theme: {
        extend: {},
    },
    plugins: [
        require('daisyui')
    ],
}

At some point I thought the start npm script, which runs tailwindcss build in watch mode, was not being executed, so I manually started that in another terminal window like this at src/main/webui:

npx tailwindcss build -i css/styles.tailwind.css -o build/css/styles.css -w

When I change some html file I can see it detecting the file changes and rebuilding:

Rebuilding...

🌼   daisyUI 4.12.10
├─ ✔︎ 2 themes added             https://daisyui.com/docs/themes
╰─ ❤︎ Support daisyUI project:   https://opencollective.com/daisyui


Done in 170ms.

Rebuilding...

Done in 42ms.

For example let's say I add the bg-gray-600 class to some html element, if I take a diff between the newly generated css file and the previously generated one:

diff -u src/main/webui/build/css/styles.css target/quinoa/build/css/styles.css

I can see the changes:

--- src/main/webui/build/css/styles.css 2024-09-28 16:58:04
+++ target/quinoa/build/css/styles.css  2024-09-28 16:36:27
@@ -1285,11 +1285,6 @@
   background-color: rgb(156 163 175 / var(--tw-bg-opacity));
 }

-.bg-gray-600 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(75 85 99 / var(--tw-bg-opacity));
-}
-
 .p-4 {
   padding: 1rem;
 }

If I force a restart by typing s, I still don't see the changes when I refresh the browser.

Even if I copy the new file to the target dir:

cp src/main/webui/build/css/styles.css target/quinoa/build/css/styles.css

I also still can't see the new file when I refresh the browser. In this case the changes are only visible after I force a restart by typing s (given that I copied the file as illustrated above).

Am I missing something or is this something that quarkus dev doesn't support?

Edit: as a workaround I'm now running tailwindcss build in watch mode outside quarkus dev, pointing the output file path directly at the generated file path under target/quinoa/build. I don't know why previously when I manually copied the file I couldn't see the changes until I force-reloaded the app, but now when I run tailwindcss build like this I don't need to force-reload the app to see the changes, they're are visible as soon as tailwindcss builds a new file.

# at src/main/webui
npx tailwindcss build -w -i css/styles.tailwind.css -o $PROJECT_ROOT/target/quinoa/build/css/styles.css

[phillip-kruger]

/cc @ia3andy