TailwindCSS 한계 짚고 Figma 연동까지… 개발자 만든 'AdorableCSS' 공개

기존 Atomic CSS 방식은 TailwindCSS의 복잡한 수치 체계(4px 그리드 등)와 CSS 스펙과 다른 클래스 명칭, 제한적인 선택자 지원 등으로 인해 실무 적용에 어려움이 있었다. 이에 개발자는 이러한 한계를 극복하기 위해 'AdorableCSS'를 공개했다.

AdorableCSS의 주요 특징은 다음과 같다:

1. 직관적 문법: CSS 속성과 유사한 표기(예: w-12 대신 width(48px) 등)를 채택해 학습 곡선을 낮췄다.
2. Figma 연동: Figma의 AutoLayout 구조를 반영한 flexbox 문법을 지원하여 디자인 핸드오프를 간소화했다.
3. 전체 CSS 기능 지원: nth-child, ::after 등 모든 CSS 선택자와 속성을 지원하여 TailwindCSS의 기능적 제약을 해결했다.
4. On-demand 방식: 실시간으로 스타일을 생성하여 불필요한 코드 번들을 줄이고 개발 효율성을 높였다.