Why Kakao Webtoon Switched from CSS-in-JS to CSS Modules and Tailwind

Kakao Webtoon changed its CSS authoring approach from CSS-in-JS to CSS Modules and Tailwind CSS, considering the service's characteristics of complex interactions and image-centric content. Initially, CSS-in-JS was adopted for development efficiency, but the strategy was revised to address rendering performance degradation and inefficiencies in collaboration with publishers.

Performance Comparison and Optimization

Performance during routing was measured on Next.js-based pages by implementing styled-components and CSS Modules respectively (in a CPU 6x slowdown environment). The results showed similar Rendering and Painting times, but Scripting time showed nearly a 2x performance difference between styled-components (483ms) and CSS Modules (265ms). This is because CSS-in-JS requires a process to transform CSS code at runtime, whereas CSS Modules generate completed CSS files at build time, resulting in less parsing overhead.

Tailwind CSS Adoption and Limitations

Even while using CSS Modules, managing utility code was cumbersome and style classification was ambiguous in the absence of a design system. Consequently, Tailwind CSS was recently introduced. Tailwind addresses Bootstrap's scalability issues, minimizes bundle size by removing unused classes, and improves collaboration efficiency with designers. However, due to constraints such as the inability to use dynamic variables, the need to change default px units, and limitations in handling complex animations, Kakao Webtoon continues to use CSS Modules in parallel for parts that Tailwind cannot resolve.

Conclusion

While CSS-in-JS may be useful for small teams or rapid prototyping, CSS Modules or utility CSS (Tailwind) are recommended for large-scale services where performance is critical. Technology choices should be made flexibly based on the service's purpose and current environment.