Hover Preview & Autocomplete Reading from Default Config (Not Working On Custom Theme Values & Utilities)

[sir-sharkey]

What version of VS Code are you using?

v1.96.4

What version of Tailwind CSS IntelliSense are you using?

v0.14.1

What version of Tailwind CSS are you using?

v4.0.0

What package manager are you using?

npm

What operating system are you using?

macOS

Root stylesheet (globals.css)

/* Tailwind modules */
@import 'tailwindcss';

/* Typography utilities */

@import './utilities/typography.css';

/* ----------------------------------
🎨 Custom Tailwind CSS theme layer
---------------------------------- */
@theme inline {
  /* Background image */
  --rainbow-gradient: linear-gradient(45deg, red, orange, yellow, green, blue, indigo, violet, red);

  /* Border radius */
  --radius-*: initial;
  --radius-xs: 0.25rem;
  --radius-sm: 0.5rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
  --radius-full: 100%;

  /* Border width */
  --border-width-*: initial;
  --border-width: 0.0625rem;
  --border-width-0: 0;
  --border-width-px: 0.0625rem;
  --border-width-2: 0.125rem;
  --border-width-3: 0.1875rem;
  --border-width-4: 0.25rem;

  /* Breakpoints */
  --breakpoint-*: initial;
  --breakpoint-xxs: 20rem;
  --breakpoint-xs: 22.5rem;
  --breakpoint-sm: 33.75rem;
  --breakpoint-md: 48rem;
  --breakpoint-lg: 78.75rem;

  /* Colors */
  --color-background: var(--background);
  --color-foreground: var(--foreground);

  /* Font family */
  --font-family-*: initial;
  --font-icons: var(--font-material-symbols-rounded);
  --font-sans: var(--font-open-sans);
  --font-varela: var(--font-varela-round);

  /* Font size */
  --text-*: initial;
  --text-0: 0;
  --text-0-5: 0.125rem;
  --text-1: 0.25rem;
  --text-1-5: 0.375rem;
  --text-2: 0.5rem;
  --text-2-5: 0.625rem;
  --text-3: 0.75rem;
  --text-3-5: 0.875rem;
  --text-4: 1rem;
  --text-4-5: 1.125rem;
  --text-5: 1.25rem;
  --text-5-5: 1.375rem;
  --text-6: 1.5rem;
  --text-6-5: 1.625rem;
  --text-7: 1.75rem;
  --text-7-5: 1.875rem;
  --text-8: 2rem;
  --text-8-5: 2.125rem;
  --text-9: 2.25rem;
  --text-9-5: 2.375rem;
  --text-10: 2.5rem;
  --text-11: 2.75rem;
  --text-12: 3rem;
  --text-13: 3.25rem;
  --text-14: 3.5rem;
  --text-15: 3.75rem;
  --text-16: 4rem;
  --text-18: 4.5rem;
  --text-20: 5rem;
  --text-24: 6rem;
  --text-28: 7rem;
  --text-32: 8rem;
  --text-36: 9rem;
  --text-40: 10rem;

  /* Font weight */
  --font-weight-*: initial;
  --font-weight-300: 300;
  --font-weight-400: 400;
  --font-weight-700: 700;

  /* Outline offset */
  --outline-offset-*: initial;
  --outline-offset-1: 0.0625rem;
  --outline-offset-2: 0.125rem;
  --outline-offset-3: 0.1875rem;
  --outline-offset-4: 0.25rem;

  /* Outline width */
  --outline-width-*: initial;
  --outline-width-1: 0.0625rem;
  --outline-width-2: 0.125rem;
  --outline-width-3: 0.1875rem;
  --outline-width-4: 0.25rem;

  /* Spacing */
  --spacing-px: 0.0625rem;
}

/* ----------------------------------
🎨 Tailwind CSS base layer
---------------------------------- */
@layer base {
  *:focus-visible {
    @apply outline-2 outline-offset-1 outline-foreground outline-dashed;
  }

  hr {
    @apply border-0;
  }
}

/* ----------------------------------
🎨 Tailwind CSS components layer
---------------------------------- */
@layer components {
  .c-skip-link {
    @apply sr-only top-2.5 left-1/2 block -translate-x-1/2 bg-foreground text-background focus-visible:not-sr-only focus-visible:!absolute focus-visible:z-50 focus-visible:px-3 focus-visible:py-1.5 focus-visible:outline-offset-4;
  }

  .c-container {
    @apply mx-auto grid-cols-4 gap-x-4 px-3 xs:max-sm:px-4 sm:max-md:max-w-[43rem] sm:max-md:grid-cols-8 sm:max-md:gap-x-4 sm:max-md:px-6 md:max-lg:max-w-[64rem] md:max-lg:grid-cols-12 md:max-lg:gap-x-6 md:max-lg:px-8 lg:max-w-[78.75rem] lg:grid-cols-12 lg:gap-x-8 lg:px-[1.875rem];
  }

  /* Material Symbols Rounded Google Font */
  .t-icon {
    direction: ltr;
    display: inline-block;
    font-family: var(--font-material-symbols-rounded);
    font-feature-settings: 'liga';
    font-size: var(--text-6);
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-style: normal;
    letter-spacing: normal;
    line-height: 1;
    text-rendering: optimizeLegibility;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
  }

  /* @import './components/axehub/accordion.css'; */

  @import './components/test.css';
}

/* ----------------------------------
🎨 Tailwind CSS custom utilities
---------------------------------- */

/* ----------------------------------
🎨 Other styles
---------------------------------- */
:root {
  --background: #ededed;

  /* --color-primary: #502f69; */
  --foreground: #171717;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #101010;
    --foreground: #ededed;
  }
}

.theme-dark {
  --background: #101010;
  --foreground: #ededed;
}

.theme-light {
  --background: #ededed;
  --foreground: #171717;
}

Prettier Config (prettier.config.mjs)

const config = {
  editorconfig: true,
  htmlWhitespaceSensitivity: 'ignore',
  jsxSingleQuote: true,
  plugins: ['prettier-plugin-tailwindcss'],
  printWidth: 100,
  semi: false,
  singleAttributePerLine: true,
  singleQuote: true,
  tailwindStylesheet: './src/styles/globals.css',
}

export default config

Describe your issue

My hover previews are working beautifully in .css files, but in my .tsx files (Nextjs v15.1.6), the hover previews seem to only work on basic classes and are displaying values from the root theme even where I have overridden theme.

📝 I double-checked removing the two uses @import after reading this issue, but unfortunately the issue still seemed to be there and wasn't related to the imports in my CSS file (which checks out, as the extension seems to be working fine overall - it's just not calculating the hover previews the same way in my .tsx files as it is in my .css files. Additionally, I already tried updating my Tailwind import to @import 'tailwindcss' source('../../src'); in case the extension needed the source() value to apply the theme to the .tsx files, but also no luck there.

[sir-sharkey]

Here is a screenshot of the preview in a Hero .tsx component over the class rounded-full, which I have overridden to be 100%, but you can see that's not reflected here:

Alternatively, here is a screenshot of the preview a '.css' file over the same rounded-full class, and you can see the update values:

📝 Additionally, in .css files I'm able to hover over all my custom classes and classes with variants as well.

[sir-sharkey]

📝 I should've checked earlier - just confirmed that the same behavior happens with the autocomplete values as well. In my .tsx files the autocomplete options only include values from the root Tailwind theme and don't include any of my custom theme values/utilities.

[sir-sharkey]

📝 Lastly, I should also note that I've updated to not using a Tailwind config file, and instead am defining my theme variables within my CSS (not sure if that is supposed to be fully supported yet or not - it seems to be working as expected within my .css files, though, so I would guess this feature is expected to work the same way in .tsx files.

[sir-sharkey]

⭐ Hope someone else finds this useful: my issue seemed to be the same issue reported earlier in this issue (I needed to add @import 'tailwindcss'; at the top of the one additional test.css file I've added to my project and am using @apply in.)