Performance Issue: Significant lag in homepage P3 color grid tooltip due to React rerenders (with measured fix)

[Austin1serb]

Current problem

The tooltip hover interaction in the P3 Colors section of the Tailwind homepage why-tailwind-css-section.tsx#L457

causes noticeable lag due to React rerenders. This impacts animations of surrounding elements and significantly slows scrolling when hovered quickly.

To Reproduce

Go to tailwindcss.com scroll to the P3 colors section, open dev tools or simply looks at the carousel slider above it, or the cubic-bezier animation below it, while hovering over the colors

Measured performance

• Current: <20 FPS, high-frequency React rerenders.
• Proposed fix: Stable 60 FPS, 0 rerenders.

Visual evidence (recorded on Apple M2, 16GB)

GIF FPS Preview:

Example video:

https://github.com/user-attachments/assets/84ef7996-2dc8-47f4-bc8c-c674907b9b80

Root cause analysis

The tooltip hover logic relies on React's local state (useState) combined with React Portals?, causing extensive, repeated component rerenders and heavy browser lag.

Proposed solution

Replace React state-based hover handling with a tiny (<500Byte) utility that leverages Tailwinds built-in variants to handle UI updates. This completely eliminates React rerenders, stabilizes FPS, and improves scroll smoothness without sacrificing current functionality.

Ive already built and tested this approach locally. it has fewer lines of code, identical UX, and dramatic performance improvements.

Happy to submit a PR if you're interested. Let me know of any specific constraints or preferences!

[thecrypticace]

Weird, this isn't a problem at all in Safari but Chrome definitely has problems here. Yeah, open the PR and I'll take a look then

[Austin1serb]

hey @thecrypticace I had some free time, and looked at this again, and realized a simple fix. check out the PR if you have time.