Tailwind IntelliSense does not list my custom class in @layer Utilities

[phongapp]

I have created some custom style class inside @layer utilities {}. And when I used those classes in Classname="...", Intellisense did not recommend or list them. But it still works.

Example in my global.css:
`
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
.phong {
width: 300px;
height: 300px;
}
}
`

and I use it: <div className="phong bg-red-200">. It's still working but phong was not listed by Intellisense when typing.

[Nagell]

Anything new about this? It would be really helpful. Without this feature, we have to continuously check other files for our custom classes and 'everything is a mixin'-property of tailwind can be barely embraced.

[happycollision]

Since @bradlc is closing other issues in favor of this one, it might be good to see this comment from him on issue #285:

[...] the core issue is that the extension isn't aware of custom CSS at all. This is a non-trivial issue to solve and there's no immediate plans to implement it.

[7iomka]

Maybe someone knows another extension that could do hints (at least just by the name of the class) based on the analysis of all the styles of the open window (workspace / monorepo list of workspaces)?

[glidelos]

Maybe someone knows another extension that could do hints (at least just by the name of the class) based on the analysis of all the styles of the open window (workspace / monorepo list of workspaces)?

Hi! You can use scss everywhere plugin, then click on thunderbolt button in the status bar for first use or refresh cache of style classes and it's done! ;)

[Nagell]

Hi! You can use scss everywhere plugin, then click on thunderbolt button in the status bar for first use or refresh cache of style classes and it's done! ;)

it's not available in .pcss files, so I've just asked if they could add it.
gencer/SCSS-Everywhere#75

[Odonno]

I have the same issue using .scss files (Angular).

[bradlc]

I agree it would be cool if we could get custom classes to appear in the completion list! As I said in #285 this is non-trivial, because the extension would need to know about your source files and how to compile them (if necessary). Maybe we can look into it in the future. As this is a feature request and not a bug I am going to close this issue.

[Nagell]

C'mon, change it to Feature request, so we can look forward if someone will try to create this feature. It's also a help topic for all newcomers.

[haddigan]

I found a workaround, sharing it in case anyone is interested. this works in tailwind 3, not sure about previous versions.

Instead of creating custom components and utilities in your tailwind.css file, you can create a custom plugin and define them in JS instead. Your custom classes will get picked up by Tailwind Intellisense that way.

before:

// tailwind.css
@layer utilities {
  .phong {
    height: 300px;
    width: 300px;
  }
}

after:

// tailwind.config.js

module.exports = {
  plugins: [
    ({ addUtilities }) => {
      addUtilities({
        '.phong': {
          width: '300px',
          height: '300px',
        }
      });
    }
  ]
}