태그: Design System
3편
-
Tailwind CSS 실전: 유틸리티 우선 방식 적응, 반응형·상태 변형, 다크 모드, @apply 재사용
Tailwind CSS 사용법 정리. Bootstrap과의 차이, 유틸리티 우선 방식에 적응하는 과정, 설치와 기본 사용, 반응형 디자인, 상태 변형, 다크 모드, 커스터마이징, @apply로 클래스 재사용을 예제로 다룹니다.
-
shadcn/ui: 설치 대신 소스를 복사하는 컴포넌트 키트, 테마·다크 모드, CLI, 커스터마이징
shadcn/ui CLI로 컴포넌트 소스를 프로젝트에 복사해 쓰는 방식과 Next.js 설치, CSS 변수 테마와 다크 모드, Dialog·Form·Data Table·Command 사용법, cva variant 커스터마이징, CSS 변수 미적용 같은 트러블슈팅을 다룹니다.
-
Panda CSS: 빌드 타임에 CSS를 뽑는 제로 런타임 스타일링, 토큰·Recipes, RSC 호환, Tailwind 비교
Panda CSS가 빌드 시점 코드 생성으로 런타임 없이 CSS를 만드는 원리, defineConfig와 프리셋, Recipe·Pattern으로 variant 컴포넌트를 추상화하는 방법, 토큰과 다크 모드, RSC 호환성, Tailwind와의 선택 기준을 다룹니다.