Tagged Templates don't have hover preview in Vue components

[cooper667]

What version of VS Code are you using?

Version: 1.101.2

What version of Tailwind CSS IntelliSense are you using?

Version: 0.14.23

What version of Tailwind CSS are you using?

4.1.8

What package manager are you using?

Yarn

What operating system are you using?

MacOs

Tailwind CSS Stylesheet (v4) or config file (v3)

v4

VS Code settings

  "tailwindCSS.classFunctions": ["tw"],
  "tailwindCSS.emmetCompletions": true,
  "tailwindcss-intellisense.trace.server": "verbose",
  "tailwindCSS.experimental.configFile": "./pkg/xxx/src/index.css"

Describe your issue

Given a fn const tw = (strings: TemplateStringsArray, ...values: unknown[]) => String.raw({ raw: strings }, ...values);

The following give hover information in TS files, but not in the <script lang="ts"> part of .vue files

const defaultClasses = {
  field: tw`relative`,
  fieldInput: tw`bg-neutral-50 peer to-ba absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 cursor-pointer appearance-none rounded border transition disabled:cursor-default disabled:opacity-50`,
};
const x = tw`border-l`;

[thecrypticace]

I'm not seeing an issue with hovers but color swatches are indeed missing — I think this was just an oversight on my part.

Can you provide a reproduction of a file where it doesn't work with hovers?

[cooper667]

I can reproduce it minimally with this:

<template>
  <div
    class="flex h-full w-full items-center justify-between"
    :class="[extraClasses]"
  >
    DEMO
  </div>
</template>

<script setup lang="ts">
export const tw = (strings: TemplateStringsArray, ...values: unknown[]) =>
  String.raw({ raw: strings }, ...values);

const extraClasses = tw`absolute bg-blue-35 hover:bg-blue-15 focus-visible:bg-blue-15`;
</script>

the class works (ie i can get a tooltip on flex), but hovering absolute in extraClasses doesn't (although Prettier does reorder it)

Settings:

  "tailwindCSS.classFunctions": ["tw"],
  "tailwindCSS.emmetCompletions": true,
  "tailwindcss-intellisense.trace.server": "verbose",

Logs:

[Trace - 20:15:54] Sending request 'textDocument/hover - (459)'.
Params: {
    "textDocument": {
        "uri": "file://xxx/ui-components/actions/button/ButtonCopy.vue"
    },
    "position": {
        "line": 2,
        "character": 12
    }
}

[Trace - 20:15:54] Received response 'textDocument/hover - (459)' in 5ms.
Result: {
    "contents": {
        "language": "css",
        "value": ".flex {\n  display: flex;\n}"
    },
    "range": {
        "start": {
            "line": 2,
            "character": 11
        },
        "end": {
            "line": 2,
            "character": 15
        }
    }
}


[Trace - 20:15:57] Sending request 'textDocument/hover - (460)'.
Params: {
    "textDocument": {
        "uri": "file://xxx/ui-components/actions/button/ButtonCopy.vue"
    },
    "position": {
        "line": 13,
        "character": 25
    }
}


[Trace - 20:15:57] Received response 'textDocument/hover - (460)' in 2ms.
No result returned.

[thecrypticace]

Ah it works if you put the script before the template but not after. Yep okay.

Minimal repro:

<template></template>
<script>
let a = tw`absolute`;
</script>