Curious to understand - IDE auto-completion vs Generating all classes like in V2

[TechAkayy]

Hi there,

This topic has been discussed in detail (generating all classes like in v2) and there are already different solution options.

But, I would like to get my head around this - If generating all possible classes is not viable (except by throttling with safelist like here - #6347 (comment)), how is IDE auto-completion possible & works in V3? Wouldn't the language-server had to generate all the possible classes given a config to enable auto-completion, isn't it?

Hope I'm not missing something too obvious. Thanks in advance.

[wongjn]

Let's consider if you really wanted every single class possible, you would need to generate every possible combination of the variants, (like dark:first:hover:focus:md:visited:last:only:…:m-1) so there would be all the "base" classes plus all these permutations of variants and thus the total number of possible classes would be something like (54!¹ + 1) × number of "base" classes (maths probably not correct here, but something like this). The "real" number would be slightly less since some variants don't make sense together, i.e. sm:md:lg:xl:m-1 but you get the idea.

Now if we consider autocompletion, we have a starting string that we can use to narrow-down the candidate set, plus we don't generate all the variant permutations – we consider only variants that match. Take m for example – we have variants like md:, and classes like m-…, mt-…, etc but there's a reasonable finite amount we can provide. I think a key thing is to stop at the variant boundary.

Disclaimer: this is just my own thinking and I haven't looked at the intellisense code.

Footnotes

1. This is 54 factorial, equal to 230,843,697,339,241,380,472,092,742,683,027,581,083,278,564,571,807,941,132,288,000,000,000,00 ↩

[adamwathan]

The short of it is we have APIs directly in Tailwind optimized for getting just the class names very quickly and we expose that to the IntelliSense plugin. Here's an example:

https://github.com/tailwindlabs/tailwindcss/blob/master/src/lib/setupContextUtils.js#L847-L869

I might be getting some of the details wrong but if I remember right, IntelliSense calls other APIs in Tailwind passing through the class name to get the corresponding CSS for each class on demand, whenever it needs to actually display the CSS to the user.

[TechAkayy]

Thanks both for taking time to explain it. 🙏🏾

[TechAkayy]

I might be getting some of the details wrong but if I remember right, IntelliSense calls other APIs in Tailwind passing through the class name to get the corresponding CSS for each class on demand, whenever it needs to actually display the CSS to the user.

Hi @adamwathan, thanks for your pointer to the getClassList() api to get the class-names. It was very very helpful!

I have spent a lot of time looking for the other one but, I couldn't really find the second one where we can find the actual css for the class-name on demand. If you could kindly provide a reference to which api that is, it will be very helpful.

Also, just curious to know if there are any tricks to map a class-name to it's owner core-plugin? https://tailwindcss.com/docs/configuration#core-plugins ;-) I'm assuming that link is not retained after registerPlugins has done its job, isn't it?

Have a good day!