핵심 아이디어

Panda CSS의 Recipe는 다중 변형(variant)을 가진 스타일을 타입 안전하게 생성하는 방법으로, Atomic Recipe(cva)와 Config Recipe의 두 가지 접근법을 제공한다.

요약

Atomic Recipe는 cva 함수를 사용해 정의되며 모든 변형을 항상 생성하고 코드 어디서나 배치할 수 있는 특징이 있다. 반면 Config Recipe는 설정 파일에 정의되며 Just-in-Time 방식으로 실제 사용된 변형만 생성하여 CSS 효율성을 극대화하고 반응형 적용이 가능하다. 두 접근법 모두 base, variants, compoundVariants, defaultVariants 속성을 사용하여 스타일을 구성한다.

견해

Recipe 시스템은 컴포넌트 기반 디자인 시스템에서 일관되고 타입 안전한 스타일링을 가능하게 하는 강력한 도구이다. 단순한 사용 사례에는 Atomic Recipe를, 대규모 디자인 시스템에는 Config Recipe를 선택하는 것이 권장된다.

출처

Recipes - Panda CSS