1
<!-- 산세리프 (UI/본문용) -->
2
<p class="font-sans">Tailwind CSS로 만든 텍스트</p>
3

4
<!-- 세리프 (기사·문서용) -->
5
<p class="font-serif">전통적인 세리프 폰트</p>
6

7
<!-- 모노스페이스 (코드용) -->
8
<code class="font-mono">const x = 10;</code>

1
<h1 class="text-4xl font-bold">페이지 제목</h1>
2
<h2 class="text-2xl font-semibold">섹션 제목</h2>
3
<p class="text-base text-gray-700">본문 텍스트</p>
4
<span class="text-sm text-gray-500">보조 설명</span>

1
<p class="font-light">가벼운 텍스트</p>
2
<p class="font-normal">보통 텍스트</p>
3
<p class="font-bold">굵은 텍스트</p>

1
<!-- 텍스트가 많을수록 leading-relaxed 이상을 권장 -->
2
<p class="leading-tight">줄 간격 좁음 (1.25)</p>
3
<p class="leading-normal">기본 줄 간격 (1.5)</p>
4
<p class="leading-relaxed">여유 있는 줄 간격 (1.625)</p>
5
<p class="leading-loose">넓은 줄 간격 (2)</p>
6

7
<!-- 숫자 단위 (임의 값) -->
8
<p class="leading-[1.8]">커스텀 줄 간격</p>

1
<h1 class="tracking-tighter">더 좁게</h1>
2
<h1 class="tracking-tight">좁게</h1>
3
<p class="tracking-normal">기본</p>
4
<p class="tracking-wide">넓게</p>
5
<p class="tracking-wider">더 넓게</p>
6
<p class="tracking-widest">가장 넓게 (버튼 라벨 등에 활용)</p>

1
<a class="underline">밑줄</a>
2
<span class="overline">윗줄</span>
3
<s class="line-through">취소선</s>
4
<span class="no-underline">장식 없음</span>
5

6
<!-- v4: 밑줄 색상·두께·스타일 제어 -->
7
<a class="underline decoration-blue-500 decoration-2 decoration-wavy">
8
  물결 밑줄
9
</a>

1
<p class="uppercase">모두 대문자</p>
2
<p class="lowercase">모두 소문자</p>
3
<p class="capitalize">각 단어 첫 글자 대문자</p>
4
<p class="normal-case">변환 없음</p>

1
<!-- 한 줄 말줄임 -->
2
<p class="truncate max-w-xs">
3
  아주 긴 텍스트가 컨테이너를 넘어가면 ...으로 처리
4
</p>
5

6
<!-- 여러 줄 말줄임 (line-clamp) -->
7
<p class="line-clamp-3">
8
  3줄을 초과하면 잘린다. 이 텍스트는 매우 길어서
9
  여러 줄에 걸쳐 표시되고, 3줄이 넘는 부분은
10
  말줄임표로 처리된다.
11
</p>
12

13
<!-- 단어 줄바꿈 -->
14
<p class="break-words">LongWordWithoutSpacesWillBreakHere</p>
15
<p class="break-all">모든 문자에서 줄바꿈 허용</p>

1
<p class="text-slate-900">매우 어두운 슬레이트</p>
2
<p class="text-gray-700">일반 본문 색상</p>
3
<p class="text-blue-600">파란색 강조</p>
4
<p class="text-red-500">에러·경고</p>
5
<p class="text-green-600">성공</p>
6
<p class="text-white">흰색 (어두운 배경용)</p>

1
<!-- v3 방식 (v4에서 작동 안 함) -->
2
<!-- <p class="text-blue-600 text-opacity-75">...</p> -->
3

4
<!-- v4 방식 -->
5
<p class="text-blue-600/75">75% 불투명도 파란색</p>
6
<p class="text-gray-900/50">50% 불투명도</p>
7
<p class="text-red-500/30">30% 불투명도</p>

1
<h1 class="bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent font-bold text-4xl">
2
  그라데이션 제목
3
</h1>
4

5
<!-- 3색 그라데이션 -->
6
<span class="bg-gradient-to-r from-blue-500 via-green-400 to-yellow-400 bg-clip-text text-transparent font-extrabold">
7
  무지개 텍스트
8
</span>

1
<div class="bg-white">흰 배경</div>
2
<div class="bg-gray-50">연한 회색 배경</div>
3
<div class="bg-blue-600 text-white">파란 배경</div>
4
<div class="bg-gradient-to-br from-indigo-500 to-purple-600">그라데이션 배경</div>

1
<!-- v4 방식 -->
2
<div class="bg-black/50">반투명 검정 오버레이</div>
3
<div class="bg-blue-500/20">연한 파란 배경</div>
4

5
<!-- 모달 오버레이 패턴 -->
6
<div class="fixed inset-0 bg-black/60 flex items-center justify-center">
7
  <div class="bg-white rounded-2xl p-8 shadow-2xl">모달 내용</div>
8
</div>

1
<!-- 배경 이미지 크기 -->
2
<div class="bg-cover bg-center h-64" style="background-image: url('...')">
3
  cover: 컨테이너를 꽉 채움
4
</div>
5

6
<div class="bg-contain bg-no-repeat bg-center h-64" style="background-image: url('...')">
7
  contain: 이미지 전체 보임
8
</div>

1
<!-- 기본 테두리 -->
2
<div class="border border-gray-200">기본 1px 테두리</div>
3
<div class="border-2 border-blue-500">2px 파란 테두리</div>
4
<div class="border-4 border-dashed border-red-400">4px 점선 빨간 테두리</div>
5

6
<!-- 방향별 -->
7
<div class="border-b border-gray-200">하단 테두리만</div>
8
<div class="border-t-2 border-l-2 border-blue-300">상단+좌측</div>
9

10
<!-- 모서리 반지름 -->
11
<div class="rounded-sm">약간 둥근 모서리</div>
12
<div class="rounded">기본 둥근 모서리 (0.25rem)</div>
13
<div class="rounded-lg">큰 둥근 모서리</div>
14
<div class="rounded-xl">더 큰 둥근 모서리</div>
15
<div class="rounded-2xl">매우 큰 둥근 모서리 (카드)</div>
16
<div class="rounded-full">원형 (버튼·아바타)</div>

1
<!-- 포커스 시 링 표시 (접근성) -->
2
<button class="focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2
3
               px-4 py-2 bg-blue-600 text-white rounded-lg">
4
  포커스 링 버튼
5
</button>

1
<div class="shadow-sm">작은 그림자</div>
2
<div class="shadow">기본 그림자</div>
3
<div class="shadow-md">중간 그림자</div>
4
<div class="shadow-lg">큰 그림자 (카드 hover)</div>
5
<div class="shadow-xl">매우 큰 그림자 (모달)</div>
6
<div class="shadow-2xl">최대 그림자</div>
7
<div class="shadow-inner">안쪽 그림자 (입력창)</div>
8
<div class="shadow-none">그림자 제거</div>

1
<!-- 안쪽 그림자 세분화 (v4) -->
2
<input class="inset-shadow-sm border rounded px-3 py-2" />
3
<div class="inset-shadow-md bg-gray-50 p-4 rounded-xl">
4
  깊이감 있는 내부 영역
5
</div>

1
<div class="opacity-100">완전 불투명</div>
2
<div class="opacity-75">75%</div>
3
<div class="opacity-50">반투명</div>
4
<div class="opacity-0">투명 (숨김과 다름: 공간 유지)</div>

1
<!-- 부드러운 hover 전환 -->
2
<button class="bg-blue-500 hover:bg-blue-700 text-white
3
               transition-colors duration-200 ease-in-out
4
               px-4 py-2 rounded-lg">
5
  색상 전환
6
</button>
7

8
<!-- 크기 전환 -->
9
<div class="scale-100 hover:scale-105 transition-transform duration-300
10
            bg-white shadow-md rounded-xl p-4 cursor-pointer">
11
  hover 시 확대
12
</div>
13

14
<!-- 여러 속성 동시 전환 -->
15
<div class="opacity-80 hover:opacity-100 shadow hover:shadow-xl
16
            transition-all duration-300 rounded-xl p-6 bg-white">
17
  전체 전환
18
</div>
19

20
<!-- 내장 애니메이션 -->
21
<div class="animate-spin size-8 border-4 border-blue-500 border-t-transparent rounded-full"></div>
22
<div class="animate-pulse bg-gray-200 rounded h-4 w-full"></div>
23
<div class="animate-bounce">⬇️</div>
24
<div class="animate-ping absolute inline-flex size-3 bg-green-400 rounded-full opacity-75"></div>

1
<!-- index.html <head>에 추가 -->
2
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap" rel="stylesheet">

1
<!-- 사용 -->
2
<body class="font-korean">
3
  <h1 class="font-display text-4xl">디스플레이 폰트</h1>
4
  <code class="font-code text-sm">코드 폰트</code>
5
</body>

1
<!-- 정의한 토큰 사용 -->
2
<div class="bg-brand-500 text-white p-18 rounded-card shadow-card">
3
  브랜드 카드
4
</div>
5

6
<button class="bg-accent-500 hover:bg-accent-400 text-white px-6 py-3 rounded-full
7
               transition-colors duration-200">
8
  액센트 버튼
9
</button>

1
@import "tailwindcss";
2

3
@theme {
4
  /* Tailwind 기본 색상 덮어쓰기 */
5
  --color-primary-50:  #f0fdf4;
6
  --color-primary-100: #dcfce7;
7
  --color-primary-200: #bbf7d0;
8
  --color-primary-300: #86efac;
9
  --color-primary-400: #4ade80;
10
  --color-primary-500: #22c55e;
11
  --color-primary-600: #16a34a;
12
  --color-primary-700: #15803d;
13
  --color-primary-800: #166534;
14
  --color-primary-900: #14532d;
15
  --color-primary-950: #052e16;
16
}

1
<!-- 의미론적 색상 사용 -->
2
<button class="bg-primary-600 hover:bg-primary-700 text-white px-4 py-2 rounded-lg">
3
  주요 버튼
4
</button>
5
<span class="text-primary-600 font-medium">성공 메시지</span>
6
<div class="bg-primary-50 border border-primary-200 p-4 rounded-lg">
7
  성공 알림 박스
8
</div>

1
/* src/index.css — class 전략 사용 시 */
2
@import "tailwindcss";
3

4
@variant dark (&:where(.dark, .dark *));

1
<!-- 다크 모드 클래스 적용 패턴 -->
2
<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
3
  <h1 class="text-2xl font-bold">제목</h1>
4
  <p class="text-gray-600 dark:text-gray-400">설명 텍스트</p>
5
  <button class="bg-blue-600 dark:bg-blue-500 hover:bg-blue-700 dark:hover:bg-blue-400
6
                 text-white px-4 py-2 rounded-lg transition-colors">
7
    버튼
8
  </button>
9
</div>

1
// 다크 모드 토글 (class 전략)
2
document.documentElement.classList.toggle('dark')