Not always working hot-reloading on Vue with Tailwind CSS imported from <style> in component

[liborjelinek]

Hi Vikers,
I started with npm create vike@latest --- --vue --tailwindcss but have realized that changes to Tailwind classes in <template>s (e.g., <p class="mr-4"> aren't reliably refreshed by vike dev... Sometimes, I need to F5 or restart vike dev.

The above template connects Vue and Tailwind file by importing in LayoutDefault.vue's <style>.

<style>
@import "./tailwind.css";
...

The Tailwind docs on installing with Vite chooses to put it in the HTML head.

I tried adding it to pages/+Head.vue, and it works perfectly now. Every change to HTML classes is not reliably hot-reloaded.

<template>
  <link href="/src/assets/styles/style.css" rel="stylesheet" />
</template>

What is the experience of others, Vikers?

UPDATE: I have found that the above approach causes a 404 for the style URL.

[phonzammi]

What about this ?

// pages/+Head.vue

<template>
  <link rel="stylesheet" :href="tailwindCss" />
</template>

<script setup lang="ts">
import * as tailwindCss from "../layouts/tailwind.css";
</script>

UPDATE: I have found that the above approach causes a 404 for the style URL.

This only happens with the preview build, right?

[liborjelinek]

The suggested code looks like it detects changes more reliably!

However, it causes the following error. What does it mean? (It's too much for my TS skills.)