FIELD NOTES / CUSTOM CODE LABS
Ideas worth
building on.
Lessons from the work.
Practical thinking on software, AI,
and the business of building things.
THE JOURNAL / BY RICHARD GABELA
Tailwind v4: Icons Not Showing After Upgrade? bg-opacity-* Was Removed
Upgraded to Tailwind CSS v4 and your icons vanished, overlays went opaque, or tinted backgrounds turned solid? The bg-opacity-* utilities were removed in v4, the official upgrade tool doesn't rewrite them, and they fail without a single build error. Here's how to find every instance and fix it safely.
Read the storyTailwind CSS v3 → v4 on Next.js: Why Your Site Looks Broken After Upgrading (and the 3 Fixes)
We upgraded a production Next.js 16 + Turbopack app from Tailwind CSS 3.4 to 4.3 and the layout collapsed — everything left-aligned while the colors stayed fine. Here are the three real bugs the upgrade tool doesn't fix, the symptom that identifies each, and the exact fix.
Read the story