Tailwind CSS 실전 로드맵: 기본·반응형·상태·동적 클래스 학습 순서

• 시작 전: 선수 지식과 개발환경
• 0단계: React + Vite 준비와 Tailwind 설치
• 1단계: 기본 유틸리티
• 2단계: flex·grid 레이아웃
• 3단계: 모바일 우선 반응형
• 4단계: 상태와 접근성 variant
• 5단계: 동적 클래스
• 6단계: 디자인 토큰과 재사용
• 프로젝트 완료 기준

시작 전: 선수 지식과 개발환경을 확인합니다

이 과정은 CSS의 박스 모델, Flexbox·Grid, 미디어 쿼리의 기본 개념을 알고 있다는 전제에서 시작합니다. 실습은 React + Vite를 기준으로 진행하므로 Node.js와 npm이 설치되어 있어야 합니다. 터미널에서 다음 명령이 정상적으로 출력되는지 먼저 확인하세요.

node --version
npm --version

버전 번호가 출력되지 않는다면 Tailwind보다 먼저 Node.js 개발환경을 준비해야 합니다. 이미 React + Vite 프로젝트가 있다면 새 프로젝트 생성 단계는 건너뛰고 Tailwind 설치부터 진행해도 됩니다.

0단계: React + Vite 프로젝트에서 Tailwind CSS를 설치합니다

처음 학습한다면 별도 React + Vite 프로젝트를 하나 만들어 설치부터 실행 확인까지 한 번에 끝내는 것이 좋습니다. 현재 Tailwind CSS의 Vite 연동은 @tailwindcss/vite 플러그인을 사용하는 방식이 기본입니다.

1. React + Vite 프로젝트 준비

npm create vite@latest tailwind-first -- --template react
cd tailwind-first
npm install

2. Tailwind CSS 설치

npm install tailwindcss @tailwindcss/vite

3. Vite 플러그인 연결

vite.config.js에서 기존 React 플러그인을 유지한 채 Tailwind 플러그인을 추가합니다.

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  plugins: [react(), tailwindcss()],
});

4. CSS 연결

src/index.css의 기존 예제 스타일을 정리하고 Tailwind를 불러옵니다.

@import "tailwindcss";

src/main.jsx에서 ./index.css를 가져오는 기본 import는 그대로 유지합니다.

5. 실행 및 적용 확인

src/App.jsx를 다음처럼 단순하게 바꿔 Tailwind 클래스가 실제 화면에 반영되는지 확인합니다.

export default function App() {
  return (
    <h1 className="text-3xl font-bold underline">
      첫 Tailwind 화면
    </h1>
  );
}

npm run dev
# 화면 확인 뒤 개발 서버를 종료하고 빌드도 확인합니다.
npm run build

브라우저에서 제목이 큰 글씨·굵은 글씨·밑줄로 보이고 npm run build까지 성공하면 설치 단계가 끝난 것입니다. 이후 글은 이 환경이 준비되어 있다는 전제로 진행합니다.

현재 Vite 기준에서는 예전 Tailwind CSS v3 튜토리얼에서 자주 보이던 npx tailwindcss init -p와 @tailwind base·@tailwind components·@tailwind utilities를 그대로 따라 하지 않습니다. 버전이 다른 설정 예제를 섞지 말고 Tailwind 공식 Vite 설치 문서를 우선하세요.

화면에 클래스가 적용되지 않을 때는 src/index.css import, Vite 플러그인 등록, 개발 서버 재실행, 클래스 이름이 완성된 문자열로 작성되었는지를 순서대로 확인합니다. 외부 패키지나 모노레포 경로는 자동 감지 범위 밖일 수 있으므로 별도 소스 감지 설정이 필요할 수 있습니다.

1단계: 크기보다 역할이 분명한 유틸리티부터 익힙니다

처음에는 색상 전체와 임의 값을 외우지 말고 간격, 글자, 배경, 테두리, 너비처럼 자주 쓰는 범주를 익힙니다. 카드 하나를 만든 뒤 각 클래스가 어떤 CSS 속성을 바꾸는지 개발자 도구에서 확인하세요.

<article class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
  <h2 class="text-lg font-semibold text-slate-900">배포 상태</h2>
  <p class="mt-2 text-sm leading-6 text-slate-600">운영 배포가 완료되었습니다.</p>
</article>

완료 기준은 CSS 파일을 새로 만들지 않고 카드의 여백·타이포그래피·테두리를 설명하며 수정하는 것입니다. 기초 클래스가 헷갈리면 Tailwind CSS 기본 클래스 사용법을 먼저 확인하세요.

2단계: flex와 grid의 역할을 구분합니다

한 방향으로 정렬하는 내비게이션, 버튼 그룹, 아이콘과 텍스트에는 flex를 먼저 사용합니다. 행과 열을 함께 설계하는 카드 목록과 대시보드에는 grid가 잘 맞습니다. 위치가 어긋날 때 무작정 margin을 늘리기보다 부모의 정렬 규칙과 자식의 크기부터 확인하세요.

<section class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
  <article class="rounded-lg border p-4">카드 1</article>
  <article class="rounded-lg border p-4">카드 2</article>
  <article class="rounded-lg border p-4">카드 3</article>
</section>

3단계: 기본 클래스는 모바일, breakpoint는 확장으로 봅니다

Tailwind의 반응형 variant는 모바일 우선입니다. 접두사가 없는 클래스가 모든 화면의 기본값이고, sm:·md:·lg:는 해당 최소 너비 이상에서 덮어씁니다. 따라서 sm:을 작은 모바일 전용이라는 뜻으로 해석하면 반대 결과가 나올 수 있습니다.

<div class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
  <h2 class="text-center text-xl md:text-left md:text-2xl">주문 목록</h2>
  <button class="w-full md:w-auto">새 주문</button>
</div>

320px 안팎의 화면에서 먼저 확인한 뒤 콘텐츠가 실제로 깨지는 지점에 breakpoint를 추가하세요. 기본 breakpoint의 의미와 조합은 Tailwind 반응형 클래스 기준에서 이어서 볼 수 있습니다.

4단계: hover만 쓰지 말고 키보드와 상태를 함께 표현합니다

버튼과 입력 요소는 hover:뿐 아니라 focus-visible:, disabled:, aria-*, data-* 상태를 함께 설계합니다. 마우스가 없는 사용자도 현재 초점을 확인할 수 있어야 하며 비활성 상태는 색상만이 아니라 동작과 속성도 일치해야 합니다.

<button
  class="rounded-md bg-blue-600 px-4 py-2 text-white hover:bg-blue-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 disabled:cursor-not-allowed disabled:opacity-50"
  disabled
>
  저장 중
</button>

상태가 부모나 형제 요소에 따라 바뀐다면 group·peer를 검토하되, 먼저 실제 HTML 관계를 확인하세요. 자주 쓰는 상태 조합은 Tailwind 상태 variant 사용법에 정리돼 있습니다.

5단계: 동적 클래스는 완성된 문자열로 매핑합니다

Tailwind는 소스 파일을 일반 텍스트로 읽고 발견한 클래스에 필요한 CSS를 생성합니다. bg-${color}-600처럼 문자열 일부를 조합하면 완성된 클래스가 소스에 존재하지 않아 CSS가 생성되지 않을 수 있습니다.

const variants = {
  success: 'bg-emerald-600 text-white',
  warning: 'bg-amber-300 text-amber-950',
  danger: 'bg-red-600 text-white',
};

function Badge({ tone }: { tone: keyof typeof variants }) {
  return <span className={`rounded px-2 py-1 ${variants[tone]}`}>상태</span>;
}

가능한 값은 객체나 variant 함수에 완성된 클래스 문자열로 매핑하세요. 소스 감지와 @source가 필요한 경우는 Tailwind 동적 클래스 해결법에서 확인할 수 있습니다.

6단계: 반복되는 값은 디자인 토큰과 컴포넌트 규칙으로 묶습니다

임의 값이 늘어나기 시작하면 색상, 간격, breakpoint 같은 반복 기준을 프로젝트의 테마 변수로 옮깁니다. 반대로 한 번만 쓰는 값까지 모두 추상화하면 수정 위치가 늘어나므로 반복 빈도와 의미가 생겼을 때 묶는 것이 좋습니다.

React 컴포넌트에서는 버튼 크기·색상·상태 조합을 한곳에서 관리하되 호출부가 어떤 결과를 만드는지 알 수 있게 이름을 붙입니다. 긴 클래스 문자열 자체보다 서로 충돌하는 규칙과 지원하지 않는 조합을 줄이는 것이 목표입니다.

프로젝트로 확인하는 완료 기준

1. 카드 목록: spacing·typography·border와 grid를 사용합니다.
2. 반응형 화면: 모바일 기본값에서 시작해 실제 깨지는 구간에 breakpoint를 추가합니다.
3. 폼: focus-visible, invalid, disabled 상태를 키보드로 확인합니다.
4. 동적 UI: 조건별 완성된 클래스 문자열을 매핑하고 운영 빌드에서 확인합니다.
5. 재사용: 반복되는 토큰과 컴포넌트 variant만 공통 규칙으로 추출합니다.

이 다섯 가지를 구현하고 각 클래스의 역할과 선택 이유를 설명할 수 있다면 Tailwind를 단순 암기가 아니라 실무 도구로 사용할 준비가 된 것입니다.

공식 문서

• Tailwind CSS Using Vite
• Tailwind CSS Responsive Design
• Tailwind CSS Hover, Focus, and Other States
• Tailwind CSS Detecting Classes in Source Files
• Tailwind CSS Theme Variables