Tailwind CSS: How We Built an Enterprise Design System Without Writing CSS
Styled-components, CSS modules, SASS with BEM: we tried them all before landing on Tailwind CSS. When our team grew from 2 to 6 developers, maintaining consistent custom CSS became impossible. Tailwind solved the problem at its root — and the CSS bundle went from 340KB to 12KB.
Goodbye Custom CSS: Why We Abandoned Styled-Components
The first version of the i3k.eu site used styled-components. It worked fine with 2 developers: everyone knew every line of CSS, variable names, conventions. Then the team grew. And problems started. Every developer created their own color variants, their own spacing, their own breakpoints. We had 14 different shades of gray in the codebase, 8 different definitions of "standard" padding, and 3 different naming systems for styled components. Total CSS weighed 340KB — of which at least half was dead code nobody dared remove for fear of breaking something. The breaking point was a landing page refactoring: changing the primary brand color required modifications in 47 different files. With Tailwind, the same change would have been one edit in tailwind.config.js and done. We made the decision: migration to Tailwind for all frontend projects. The i3k.eu migration took 2 weeks. The LetsAI dashboard site, more complex, took 4 weeks. But the result was immediate: i3k.eu's final CSS bundle went from 340KB to 12KB thanks to Tailwind's automatic purging. Only the classes actually used end up in the bundle.
Our Design System with Utility Classes
Tailwind isn't just "inline classes" — it's the foundation on which we built a coherent design system for all i3k products. The secret is in the configuration. In our tailwind.config.js we define: the brand color palette (primary, secondary, accent, with all shades from 50 to 950), custom spacing units that map to our 8px grid system, responsive breakpoints consistent with our product dashboards, and font families with the exact weights we use. Every developer on the team uses the same classes because they're the only ones available. You can't invent a custom gray — you use gray-600 or gray-700. You can't add 13px padding — you use p-3 (12px) or p-4 (16px). This constraint, which seems limiting, is actually liberating: it eliminates the micro design decisions that slowed down every pull request. For recurring components (buttons, cards, badges, inputs), we created React components that wrap Tailwind classes. A Button accepts a variant prop ('primary' | 'secondary' | 'ghost') and applies the corresponding classes. The tech stack badges you see on the RAG Enterprise page on i3k.eu are all components with standardized Tailwind classes. This approach gives us Tailwind's flexibility with the consistency of a structured design system. For responsive design, Tailwind is unbeatable. We write mobile-first classes and add variants with md: and lg: where needed. The LetsAI dashboard is fully responsive with zero custom media queries — everything managed with Tailwind responsive classes.
Performance and Bundle Size: The Numbers That Matter
The switch to Tailwind had a measurable impact on performance across all our sites. Here are real numbers, measured with Lighthouse and WebPageTest. i3k.eu: CSS bundle from 340KB to 12KB (-96%). First Contentful Paint improved by 0.4 seconds. Lighthouse Performance score from 82 to 97. CSS reduction has a direct impact on the Critical Rendering Path: less CSS to parse means faster rendering. LetsAI dashboard: CSS bundle from 280KB to 18KB. The improvement is less dramatic percentage-wise because the dashboard has more unique components, but 18KB of CSS for an entire enterprise application is excellent. An underrated advantage: Tailwind CSS is highly compressible with gzip/brotli because utility classes repeat and create predictable patterns. Our 12KB of CSS become 3KB after brotli compression. With styled-components, the randomized hash class names made compression less efficient. There is a cost: HTML is slightly heavier because classes are written directly in components. But it's a negligible cost: the average increase is about 5KB on HTML, more than compensated by the 300KB+ saved on CSS. The net balance is enormously positive.
Related Services
See how we apply these technologies in our enterprise projects.
Interested?
Contact us to receive a personalized quote.
Securvita S.r.l. — i3k.eu