[BUG] Optimise transition classes in HyperUI components for enhanced CSS performance

[techwithshubh]

[BUG] Optimise transition classes in HyperUI components for enhanced CSS performance

[markmead]

Hi @techwithshubh, thanks for the issue, do you have any proof of this?

By making this adjustment, we can significantly improve the efficiency of these components

Not just a StackOverflow post saying it is better, actual benchmarks and evidence that it is significantly better.

---

I was using specific transition classes for a while but opted for transition it usually has the property I want to transition, it's also not as lazy as doing transition-all.

[techwithshubh]

Hi @markmead, Thanks for the reply. I have done the performance analysis for one of the component in this page . Below are the results:

1. When transition class is used

2. When transition-colors is used

3. When transition-[color,background-color] is used

Performance is not significantly affected, so instead of Bug, you can change the category to Nice to have feature.

[markmead]

Thanks for this @techwithshubh! I think they are considerable improvements, would it be possible to get some more examples classes like transition-colors with transition-[background-color].

Be good to see if the performance improvements are worth it for the use of JIT classes. No need to get loads of examples (or any, if you don't feel like it).

[techwithshubh]

@markmead , These are the other predefined transition classes provided by tailwind. https://tailwindcss.com/docs/transition-property

[markmead]

Yeah I know of their existence. I think based on your tests they should be used, but I'm interested in seeing how they compare with JIT classes.

[markmead]

Going to leave this for now. I think it's fine as transition and it means users of these components are less likely to run into hover: effects not working.