Description
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:
Tailwind-React-Demo-mobile.webm
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!