KakaoPage Adopts Tailwind CSS and Twin.Macro to Build a Design System

KakaoPage adopted Tailwind CSS and Twin.Macro with the goal of building a design system alongside its web service revamp. Previously, using Emotion CSS made maintenance difficult due to the lack of common component recognition and naming conventions for colors, fonts, and other elements, causing design code to intrude on functional code and compromise component readability.

Flexible Styling with Twin.Macro

The team adopted Twin.Macro, which combines Tailwind's utility classes with the flexibility of Emotion CSS. This resolved limitations encountered when using Tailwind alone, such as cases requiring external variables to be injected into styles, and mitigated style priority issues. Additionally, custom plugins were defined directly to handle complex styles like scrollbar-hide in a single line, reducing repetitive CSS code.

Improved Accessibility and Multi-Resolution Support

To respect browser default font size settings, a custom unit called pxr was introduced to automatically convert px units to rem. This allowed designers to use px values from design mockups as-is while ensuring the screen adjusted appropriately according to user accessibility settings. Furthermore, breakpoints with clear naming such as mobile and tablet were defined to simplify multi-resolution support code, and the darkMode: 'class' option was utilized to implement developer-controlled dark mode independent of OS settings.