7단계
7단계 — Tailwind CSS
25 분
7단계 — Tailwind CSS
CSS 파일을 따로 안 쓰고 클래스 이름 으로 스타일을 바로 박는 방식이에요. 처음에는 어색하지만 한 번 익숙해지면 디자인 시스템 을 토큰으로 다룰 수 있어 일관성이 강해집니다.
같은 카드, 두 가지 방법
전통적인 CSS:
.card { padding: 16px; border-radius: 12px; background: white; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
<div class="card">…</div>
Tailwind:
<div class="p-4 rounded-xl bg-white shadow">…</div>
길이는 비슷하지만 후자는 별도 CSS 파일이 없어요. 또 클래스만 보면 어떻게 생긴지 짐작이 됩니다.
자주 쓰는 카테고리 다섯
- 간격:
p-4(padding),m-2(margin),gap-3(Flex/Grid) - 크기:
w-full,max-w-3xl,h-screen - 레이아웃:
flex,grid grid-cols-3,items-center,justify-between - 타이포:
text-lg,font-semibold,leading-relaxed,tracking-tight - 색:
text-sky-600,bg-slate-50,border-gray-200
디자인 토큰 — Tailwind v4 의 핵심
@theme {
--color-cs-primary: #0EA5E9;
--radius-cs-lg: 16px;
}
이렇게 내 프로젝트의 색·반경·간격 을 한 군데 정의하면 bg-cs-primary, rounded-cs-lg 클래스가 자동으로 생깁니다. 디자인 시스템의 SSOT.
반응형은 prefix 로
<div class="text-base md:text-lg lg:text-xl">…</div>
md: 는 화면 폭 768px 이상, lg: 는 1024px 이상에서만 적용. 모바일 우선으로 짜고 점진적으로 키워요.
직접 해 보기
5단계의 Counter 컴포넌트에 Tailwind 클래스를 박아 보세요.
<button
onClick={() => setN(n + 1)}
className="px-4 py-2 rounded-lg bg-sky-500 text-white hover:bg-sky-600"
>
눌린 횟수: {n}
</button>
더 깊이
- Tailwind 노트
- Material 3 토큰 노트 — 토큰 설계 깊이
다음 단계
마지막 8단계에서는 폼 검증과 로딩 UX 로 강좌를 마무리해요.