Support completions and hovers for classes in native CSS layers

[Kcko]

Hi,

Similar issue but unfinished: #1188

I'm looking for a way to make it so that intellisense will also show custom components (custom classes).

In version 3 it could be done like this: https://dev.to/glocore/tip-add-typography-as-components-to-your-tailwind-config-4l4c

But it's an awkward way, not convenient to write just for the sake of hinting components and classes in a .js file.

Is it possible to modify intellisense to hint everything under @layer utilities/components?

In the topic above it says @layer utility sees it, but that's not the right place under components after all.

Please respond, is this the only thing bothering me about this great plugin since the first time I used it.

[thecrypticace]

Things work this way because CSS placed inside @layer utilities, @layer components, or @layer whatver-name-it-is are not actual "utilities" known to Tailwind CSS v4. Meaning they don't get support for variants, modifiers, being marked as important, prefixing, etc… To do that you must use @utility. (and v3 never supported reading utilities from CSS files in IntelliSense anyway)

I prototyped arbitrary class suggestions last week to see what it'd take and it is possible but it's not performant at all. Adding several milliseconds to the generating completions for even a project with one small CSS file. There's also a number of edge cases that need to be handled like not showing these suggestions when a variant has been typed. Ultimately, I'll need to add some APIs to Tailwind CSS itself before we can add this feature but it is planned.

[Kcko]

it is planned.

Great!

I'm not going to bother with this anymore, but where can I read about this? I want to know in the first wave, I'll keep checking, it's really important to me (I'm sure it is to others).

Thanks for the info and good luck with the development :)

[Kcko]

I tried it out today and it still doesn't seem to suggest.

Is there any progress or is it still the same?

Thanks for the response.

https://is.gd/XJExSY

[Kcko]

And the second thing, it doesn't tell me at all in @theme to tailwind available classes (for example for overriding, or if I want to make a new property (e.g. breakpoint) so I want to see what are available and what is the name of the variable anyway).

Is this behaviour OK?

https://is.gd/im0nap

[thecrypticace]

The suggestions inside @theme need to be improved and reworked a bit. This is a known limitation currently.

[EKliptus]

On vscode :
I don't have any intellisense related to of my custom color variable declare in @theme and @Utility.
Is it the same subject as this issue ?

[thecrypticace]

@EKliptus Can you provide an example?