Why we abandoned Tailwind for Vanilla CSS
Our controversial decision to drop utility classes in favor of Vanilla CSS and custom CSS variables for our design system.
Tailwind CSS is the undeniable industry standard for rapid prototyping and styling. However, as the Infirow design system grew more complex, we realized that utility classes were holding back our creative potential and dirtying our React component files.
The Problem with Utility Classes
When building a premium, highly-animated interface, you inevitably run into deeply complex CSS rules: compound backdrop filters, multi-layered radial gradients, and dynamic CSS variable updates driven by scroll events. Cramming these into a className string made our components unreadable.
Embracing CSS Modules and Variables
We transitioned entirely to CSS Modules paired with a strict CSS Custom Properties (variables) architecture. This allowed us to centralize our design tokens (like --bg-color and --accent-purple-light) while keeping component files perfectly clean.
For dynamic animations—like our signature 3D glowing cards—we now update CSS variables directly via JavaScript refs, allowing the browser to hardware-accelerate the animations without triggering React re-renders.
The Result
By abandoning Tailwind, we lost some initial development speed but gained complete aesthetic control. Our bundle size decreased by removing utility classes we weren't fully utilizing, and our designers now speak the exact same language as our engineers: pure CSS.