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 로 강좌를 마무리해요.