1. 타이포그래피 (Heading Scale)
좌측 패널에서 Font Family와 Heading Scale을 조절하여 폰트 및 제목 크기 비율 변화를 테스트해 보세요. 제너레이터 패널은 오염되지 않습니다.
Heading 1 (Maxi)
Heading 2 (Medium)
Heading 3 (Small)
2. 기초 요소 및 형태 (Components)
버튼과 배지는 Base Font Size와 Padding 비율에 맞춰 정확히 스케일링됩니다.
성공 배지
오류 배지
기본 배지
3. 입력 폼 (Forms)
4. 인터랙션 (Advanced)
이메일 알림 수신
이용약관에 동의합니다 (Checkbox)
5. 그리드 간격 및 정렬 (Grid Gutter)
좌측 패널의 Grid Gutter를 조절하면 아래 카드 사이의 수평/수직 간격이 동적으로 넓어지거나 좁아집니다.
Column A
Gutter 반응형
Column B
Gutter 반응형
Column C
Gutter 반응형
코드 자동 추출 (Export)
설정하신 테마(폰트, 간격 포함)에 맞추어 Tailwind Config 및 CSS 레이어 코드가 완벽하게 갱신되었습니다.
1. tailwind.config.js
2. global.css (@layer base, components)