v-bind:class with template string utilities not detected

[rileychh]

Summery

When I tried to bind a unocss class using template strings to an element, the class won't be detected.

Example code

main.js

import { createApp } from "vue";
import App from "./App.vue";
import "uno.css";

createApp(App).mount("#app");

App.vue

<script setup>
import { ref } from "vue";

const color = ref("blue");
</script>

<template>
  <div class="w-8 h-8" :class="[`bg-${color}`]"></div>

  <button @click="color = 'red'">Change color</button>
</template>

vite.config.js

import { defineConfig } from "vite";
import Vue from "@vitejs/plugin-vue";
import Unocss from "unocss/vite";
import { presetWind } from "unocss";

export default defineConfig({
  plugins: [
    Vue(),
    Unocss({
      presets: [presetWind()],
    }),
  ],
});

[kikyous]

This is expected behavior

[cll123456]

Summery

When I tried to bind a unocss class using template strings to an element, the class won't be detected.

Example code

main.js
App.vue

<script setup>
import { ref } from "vue";

const color = ref("blue");
</script>

<template>
  <div class="w-8 h-8" :class="[`bg-${color}`]"></div>

  <button @click="color = 'red'">Change color</button>
</template>

vite.config.js

@chenghsuanhe I think unocss can’t dynamic caculate generate class at present. but we use utilities full-name, it's be usefully.

[rileychh]

Okay, since this is a expected behavior, I will close this issue. Thanks.