The Tailwind CSS “JIT Mode” Bug That Only Happens in Production

In fairness, Adam Wathan & Steve Schoger tried to warn me about this feature of Tailwind CSS’s “Just-in-Time” engine, but I still only caught this bug by accident. Don’t make my mistake!

Photo by Jill Heyer on Unsplash

Can you spot the bug in this React .jsx code using Tailwind CSS? 🐞

View raw code as a GitHub Gist

The bug is an easy mistake to make, and it’s sneaky to detect, too.

The issue is that I’m generating dynamic strings to use for my CSS classes, and that is going to break Tailwind, for reasons I’ll explain shortly.

Plus, if I have another h-5 or w-5 somewhere in my local hot reloading cache, then I might see different behavior in production vs. development.

Here’s what that would look like using social SVG icons taken from SimpleIcons.org, a free repository of brand logos in SVG format: