Skip to content
Andrew Voirol
WorkLogAboutContact
HomeWorkLog

AboutContact

✦ Just one prompt away from figuring it all out.

Saturday, August 1, 2026geogenesis-unfolding-globe

Tailwind v4 ghosts in a v3 project

DebuggingAI Studio

Four CSS bugs hiding in plain sight — all from AI Studio mixing Tailwind versions. The initial cleanup migrated from CDN to npm correctly and pinned Tailwind 3.4.17, but the AI Studio canvas had generated Tailwind v4-only utilities: two bg-radial-gradient calls (main area background and vignette overlay weren't rendering), animate-in fade-in animation classes that don't exist in v3, and a hidden class on the marker tooltip div that would permanently override the JavaScript opacity toggles. Replaced the radial gradients with inline CSS style attributes, swapped the animations for standard Tailwind transitions, removed the stray hidden. The globe went from "nice, but something's off with the depth" to the full CRT-scanline-starfield-vignette atmosphere AI Studio originally intended. Forty minutes from "just get it running" to "it's stunning."

← Previous

The dark room recon: dissecting an AI Studio globe in 55 steps

Next →

1,053 lines of canvas and a custom D3 projection


Andrew Voirol

Builder, hacker, shipper. Currently leaving localhost.

Navigate

WorkBuilder’s LogAboutContactRSS Feed

Connect

X / TwitterGitHubLinkedIn

© 2026 Andrew Voirol·Back to top ↑
✦Just one prompt away from figuring it all out.