내 Tailwind 스타일 가이드

Source: Dev.to

포함된 내용

• Typography — 모든 글꼴 크기, 굵기, 줄 높이, 문자 간격을 실시간으로 표시
• Colors — 클래스 이름과 16진수 값이 포함된 전체 팔레트 색상표
• Spacing — 패딩 및 마진 스케일을 색상 박스로 시각화
• Flexbox & Grid — 실시간 예시가 포함된 일반 레이아웃 패턴
• Borders & Rounded — rounded-none부터 rounded-full까지 모든 border‑radius 변형
• Shadows — 실제 카드에 적용된 shadow-sm부터 shadow-2xl까지
• Responsive breakpoints — 픽셀 값 표와 실시간 브레이크포인트 표시기
• Common patterns — 카드, 버튼 세트, 네비게이션 바, 폼 컴포넌트와 복사‑붙여넣기 마크업

각 섹션은 렌더링된 결과 와 코드 스니펫을 모두 포함합니다.

확인해 보기

https://winkelstraatnl.github.io/tailwind-style-guide/

이 페이지 자체는 Tailwind만을 사용해 완전히 구축되었습니다 (자체 사용). 빌드 단계 없이 단일 HTML 파일이며 — Tailwind CDN만 사용합니다.

우리 팀을 위한 빠른 레퍼런스로 열어두었으며, 다른 사람들에게도 도움이 될 것이라 생각했습니다. 피드백을 환영합니다.