Panda CSS vs Tailwind

[milooy]

FF TIL 서비스를 Tailwind로 개발했다가, 가독성 저하로 인한 유지보수 어려움으로 모두 Panda CSS 로 마이그레이션 했는데요, 둘의 차이를 적어둔다.

공통점

• Utility First 계열
• RSC 대응 (Zero runtime)

Tailwind는

HTML 클래스에 바로 스타일 속성을 매핑함 (flex, mt-4등)

애초부터 CSS유틸리티 클래스 모음집 - 런타임 JS가 아예 없음

장점

• 빠른 프로토타이핑 가능 (v0, shadcn도 tailwind 의존)
• 디자인시스템 없이도 일관성 유지 쉬움

단점

• 클래스가 길어지고 지저분해짐!!!! 꺄악

Panda CSS

디자인 토큰 기반의 타입세이프한 스타일링

문법은 CSS-in-JS로 쓰지만, 빌드타임에 CSS로 변환 -> 런타임JS없음

장점

• TS친화적 (잘못된 속성이나 토큰 사용시 빌드타임에 잡힘)
• 디자인토큰 중심 (테마, 색상, spacing 등 구조적 관리)
• 클래스네임 자동생성됨 (HTML 깔끔해짐)

단점

• 생태계 tailwind보다 작음

다른 분들의 경험도 궁금합니당

[minr2kb]

PandaCSS로 간단한 사내 디자인 시스템을 구현했었는데, 설계 과정이랑 느꼈던 장단점 README에 정리해두었던 것 살짝 공유드려봅니다-! (혹시 여유가 되신다면 다른분의 의견도 조금 궁금합니다ㅎㅎ) nationa-design-system

개인적으로 PandaCSS의 가장 큰 장점이자 단점은 매우 높은 스타일링 방식의 자유도였는데요, recipe, factory(styled), pattern, css유틸, jsx 프리셋 등 현대적 스타일링 기법을 대부분 지원하니 입맛대로 튜닝이 가능하나, 반대로 제대로 세팅하고 쓰자면 또 러닝커브가 상당해 팀 내 초반 정착이 꽤나 어려웠던 기억이 있습니다.

무엇보다 명확한 토큰 정의와 컨벤션 정립없이는 코드가 매우 중구난방해질 가능성이 있었기에, 꽤나 오랜시간을 들여서 상황별 용법을 제한하기 위해 규칙을 정리했던 것 같습니다.

사실 별도의 UI패키지로 분리하는 방식 자체가 pandacss 설계 철학과도 살짝 달라 삽질을 남들보다 더 한 감은 있지만,, 아무쪼록 결론은 "잘만쓰면 압도적으로 편하다. 근데 잘쓰기가 너무 어렵다" 였습니다😇