스타일 · Tailwind CSS

Tailwind CSS

CSS 파일을 따로 쓰지 않고, class 에 미리 만들어진 작은 유틸리티 클래스를 조합해 모양을 입히는 방식입니다. flex gap-2 p-4 처럼요.

한 줄로

Tailwind? 는 CSS? 속성 하나하나를 작은 클래스로 만들어 둔 모음입니다. padding: 16px 대신 p-4, display:flex 대신 flex 를 클래스에 적어요. 별도 CSS 파일을 오가지 않고 HTML?/JSX 안에서 바로 스타일을 끝냅니다.

Tailwind는 "이미 잘라 둔 레고 블록 상자"입니다. 직접 플라스틱을 녹여 블록을 만드는(CSS 작성) 대신, 필요한 블록(p-4, flex)을 골라 끼우기만 하면 돼요.
왜 / 어디에 쓰나
  • 빠른 스타일링 — CSS 파일·클래스 이름 고민 없이 HTML에서 바로 작성
  • 일관성 — 여백·색·크기가 정해진 척도(p-1~p-8)라 디자인이 균일
  • 반응형이 쉬움 — md:, lg: 접두사로 화면별 스타일
  • 이 프로젝트 — 프론트엔드가 Tailwind 4 + Shadcn UI 조합으로 스타일링

CSS vs Tailwind

같은 카드를 만든다고 할 때, 왼쪽 CSS가 오른쪽 Tailwind 클래스로 압축됩니다.

/* 기존 CSS 방식 */
.card {
  display: flex;
  gap: 8px;
  padding: 16px;
  border-radius: 8px;
  background: white;
}
<div class="card">...</div>

/* Tailwind 방식 — CSS 파일 없이 클래스만 */
<div class="flex gap-2 p-4 rounded-lg bg-white">...</div>

자주 쓰는 유틸리티

클래스의미(CSS)
flex / griddisplay: flex / grid
gap-2gap: 0.5rem(8px)
p-4 / px-2 / mt-3padding / 좌우 padding / 위쪽 margin
text-lg / font-bold글자 크기 / 굵게
bg-white / text-gray-500배경색 / 글자색
rounded-lg / shadow모서리 둥글게 / 그림자
md:flex-row화면이 md 이상일 때만 가로 배치(반응형)

JSX 안에서 쓰기

React에서는 class 대신 className 에 적습니다. 조건부 클래스 조합엔 보통 cn()/clsx 를 써요.

function Card({ active }) {
  return (
    <div className={cn(
      "flex gap-2 p-4 rounded-lg border",
      active && "bg-blue-50 border-blue-400"
    )}>
      내용
    </div>
  )
}
이 프로젝트와의 관계

이 프로젝트의 프론트엔드는 Tailwind CSS 4 로 스타일을 입히고, 그 위에 Shadcn UI 컴포넌트를 얹어 씁니다. 실제 화면을 어떻게 구성하는지는 웹앱 7장 UI 구성(07-ui) 에서 다룹니다.

다음 단계