🎨 Tailwind 학습 트레이너

기초 유틸리티부터 실전 패턴까지 — 개념을 읽고, 직접 따라 만들며 익히는 인터랙티브 학습 도구.

🧱 기초 개념

Tailwind 는 미리 만들어진 작은 '유틸리티 클래스' 를 조합해 디자인하는 방식이에요. 대부분의 클래스는 [속성]-[값] 꼴이라 이름만 봐도 무슨 일을 하는지 알 수 있어요. 한 요소에 여러 클래스를 띄어쓰기로 나열해 쌓아 올립니다.

📚 치트시트 — 먼저 훑어보세요
클래스 읽는 법
  • bg-blue-500background → 파랑 → 명도 500
  • text-white글자색 흰색
  • px-4좌우(x) 패딩 4단위
  • hover:underlinehover: 접두사 = 마우스 올렸을 때만
  • md:flexmd: 접두사 = 화면 폭 ≥768px일 때만
숫자 단위 감각 (1 = 0.25rem = 4px)
  • p-14px
  • p-28px
  • p-416px
  • p-624px
  • p-832px
🏋️ 연습 (0/1)
1

첫 버튼 만들기

초급

배경색·글자색·패딩·둥근 모서리를 조합해 버튼을 만들어라.

🎯 목표
✏️ 내 결과