Duplicate suggestion appears when a class is declared using @theme and then extended with a weaker @utility

[rozsazoltan]

What version of VS Code are you using?

v1.99.2

What version of Tailwind CSS IntelliSense are you using?

v0.14.15

What version of Tailwind CSS are you using?

v4.1.3

What package manager are you using?

pnpm

What operating system are you using?

Windows 11 with WSL (CentOS Stream 9)

Reproduction URL

index.css

@import "tailwindcss";

@theme {
  --text-subheader: 0.75rem;
  --text-subheader--line-height: 1rem;
  --text-subheader--letter-spacing: 0.25rem;
  --text-subheader--font-weight: 600;
}

@utility text-subheader {
  text-transform: uppercase;
}

index.js

import './index.css'

console.log(`
  <div class="text-subhe">
`)

Describe your issue

I declared a text style called subheader. Since passing nested keys is limited, I declared the additional uppercase separately in a weaker utility as a 'new' class. In the end, these get merged because they share the same name, so it's pointless for IntelliSense to show a duplicate hint.

Related

• Additional customization for --text-* theme variables tailwindcss#16317 (comment)

Extra

I know that the strange duplication is caused by the fact that I redeclare a separate utility named .text-subheader on top of the .text-subheader declared in @theme; this can also be seen in the playground hint.

Still, it doesn't make sense to show two identical suggestions, even if they're coming from two different sources.

• https://play.tailwindcss.com/Lwqss6zmTS

[thecrypticace]

Ah. This is a bug in Tailwind CSS itself. Will look into this!