Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
sir-sharkey opened this issue Jan 26, 2025 · 4 comments

Comments

@sir-sharkey
Copy link

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
Copy link
Author

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:

Image

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

Image

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

@sir-sharkey
Copy link
Author

📝 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 sir-sharkey changed the title Hover Preview Reading from Default Config Hover Preview & Autocomplete Reading from Default Config (Not Working On Custom Theme Values & Utilities) Jan 26, 2025
@sir-sharkey
Copy link
Author

📝 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
Copy link
Author

sir-sharkey commented Jan 26, 2025

⭐ 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.)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant