panda

Panda는 현대적인 웹 개발을 위한 스타일링 솔루션으로, 범용적이고 타입 안전하며 확장 가능한 CSS-in-JS로 설명됩니다. 빌드 타임에 작동하여 스타일 객체나 스타일 props를 CSS로 추출합니다. 주요 특징으로는 빌드 타임에 추출되는 스타일 객체 및 스타일 props 작성, @layer 및 CSS 변수를 사용하는 현대적인 CSS 출력, 대부분의 JavaScript 프레임워크와의 호환성, Stitches와 유사한 레시피 및 변형, 동시 테마를 위한 고수준 디자인 토큰, 그리고 codegen을 통한 자동 완성 및 타입 안전한 스타일이 있습니다. 설치는 npm을 통해 이루어집니다: npm i -D @pandacss/dev 실행 후, npx panda init -p를 통해 설정과 postcss를 스캐폴딩합니다. 진입점 CSS 파일에는 @layer reset, base, tokens, recipes, utilities가 포함되어야 하며 앱에 임포트되어야 합니다. 사용 예시: import { css } from '../styled-system/css'; import { stack, vstack, hstack } from '../styled-system/patterns'; 이후 hstack({ gap: '30px', color: 'pink.300' }) 또는 css({ fontSize: 'lg', color: 'red.400' })와 같은 클래스 이름을 사용합니다. 모노레포에는 cli, core, config, extractor, generator, parser, is-valid-prop, node, token-dictionary, shared와 같은 패키지가 포함되어 있습니다. 프로젝트는 panda-css.com에서 문서, StackBlitz 플레이그라운드, 기여 가이드 및 Discord 커뮤니티를 제공합니다. MIT 라이선스로 제공되며, README에서는 Chakra UI, Vanilla Extract, Stitches, Tailwind CSS, Class Variance Authority, Styled System, Linaria, Uno CSS, Goober로부터 영감을 받았음을 밝히고 있습니다.