Intellisense doesn't work with `` in Astro

[emrecancorapci]

What version of VS Code are you using?

v1.96.2

What version of Tailwind CSS IntelliSense are you using?

v0.12.17

What version of Tailwind CSS are you using?

v3.4.17

What package manager are you using?

pnpm v9.15.1

What operating system are you using?

Pop!_OS 24.04 LTS

Tailwind config

import type { Config } from "tailwindcss";

export default {
	content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
	darkMode: "selector",
	theme: {
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
      borderRadius: {
        lg: `var(--radius)`,
        md: `calc(var(--radius) - 2px)`,
        sm: "calc(var(--radius) - 4px)",
      },
    },
  },
  plugins: [],
} satisfies Config;

VS Code settings

{
    "workbench.iconTheme": "material-icon-theme",
    "eslint.format.enable": true,
    "editor.tabSize": 2,
    "editor.indentSize": 2,
    "diffEditor.ignoreTrimWhitespace": false,
    "[astro]": {
        "editor.defaultFormatter": "dbaeumer.vscode-eslint"
    },
    "github.copilot.enable": {
        "*": true,
        "plaintext": false,
        "markdown": false,
        "astro": false
    },
}

Reproduction URL

Reproduction Repo

Describe your issue

Intellisense doesn't work if class variable is in ` ` such as `flex`. But works when the variable is in {` `} such as {`flex`}.

---
interface Props {
  href: string;
}

// Intellisense doesn't work if class variable is in `` such as `flex`. But works when the variable is in {``} such as {`flex`}.
// If you add {} around class variable intellisense (also eslint plugin) will start to work.

const { href } = Astro.props;
---

<a class=`text-center text-md font-bold transition-all ${Astro.url.pathname === href ? "text-primary": "text-card-foreground hover:text-primary"}` href={href}>
  <slot />
</a>