Tailwind CSS · 타이포그래피, 색, 효과
앞 장에서 상자를 배치했다면, 이번엔 그 상자에 옷을 입힙니다. 글자 크기와 굵기, 색, 테두리, 둥근 모서리, 그림자, 그리고 움직임(트랜지션)까지 Tailwind? 클래스 하나하나로 끝냅니다.
bg-blue-500), 사포로 모서리 다듬기(rounded-lg), 조명 그림자(shadow-md) 같은
도구를 골라 끼우기만 하면 돼요.이 문서는 Tailwind CSS v4 (4.1.x) 기준입니다. v4는 색을 oklch 팔레트로 다시 그려
화면에서 더 선명하게 보이고, 그라데이션·그림자 일부 클래스 이름이 v3와 달라졌습니다(아래에서 표시).
라이브 데모는 브라우저용 Tailwind v4를 실시간으로 컴파일해 보여줍니다.
1. 타이포그래피 — 글자 꾸미기
무엇: 글자의 크기·굵기·기울임·정렬·줄높이·자간·장식·말줄임을 클래스로 정합니다.
순수 CSS? 의 font-size, font-weight,
text-align 같은 속성을 작은 이름으로 줄여 둔 것이에요.
크기 — text-xs ~ text-9xl
작은 글씨부터 거대한 제목까지 13단계입니다. 숫자가 커질수록 글자가 커져요.
| 클래스 | 크기 | 클래스 | 크기 |
|---|---|---|---|
text-xs | 0.75rem (12px) | text-2xl | 1.5rem (24px) |
text-sm | 0.875rem (14px) | text-3xl | 1.875rem (30px) |
text-base | 1rem (16px) · 기본 | text-4xl | 2.25rem (36px) |
text-lg | 1.125rem (18px) | text-5xl ~ text-9xl | 3rem(48px) ~ 8rem(128px) |
text-xl | 1.25rem (20px) | 사이 단계: 6xl(60), 7xl(72), 8xl(96) | |
굵기 — font-thin ~ font-black
| 클래스 | 굵기(font-weight) |
|---|---|
font-thin / font-extralight | 100 / 200 |
font-light / font-normal | 300 / 400 (보통) |
font-medium / font-semibold | 500 / 600 |
font-bold / font-extrabold / font-black | 700 / 800 / 900 (가장 굵음) |
정렬 · 기울임 · 장식 · 변형
| 분류 | 클래스 | 의미 |
|---|---|---|
| 기울임 | italic / not-italic | 기울임꼴 / 해제 |
| 정렬 | text-left / text-center / text-right / text-justify | 왼쪽 / 가운데 / 오른쪽 / 양끝맞춤 |
| 줄높이 | leading-none ~ leading-loose, leading-6 | line-height(줄 간격). 숫자는 0.25rem 배수 |
| 자간 | tracking-tight / tracking-normal / tracking-wide | letter-spacing(글자 사이 간격) |
| 밑줄/취소선 | underline / line-through / no-underline | 밑줄 / 가운데줄 / 해제 |
| 대소문자 | uppercase / lowercase / capitalize / normal-case | 전부 대문자 / 소문자 / 첫 글자만 대문자 / 원래대로 |
| 한 줄 말줄임 | truncate | 넘치면 끝을 … 으로 자름(한 줄) |
| 여러 줄 말줄임 | line-clamp-2, line-clamp-3, line-clamp-none | N줄까지만 보이고 나머지는 … |
| 공백 처리 | whitespace-nowrap / whitespace-pre / whitespace-normal | 줄바꿈 금지 / 공백·줄바꿈 보존 / 기본 |
truncate 는 한 줄만 말줄임표로 자릅니다. 카드 설명처럼 두세 줄까지 보이고 자르고 싶으면
line-clamp-2 처럼 줄 수를 지정하세요. 표의 긴 코드명, 목록의 긴 설명에 자주 씁니다.
코드로 보면 이렇게 생겼습니다.
<h1 class="text-3xl font-bold tracking-tight">큰 제목</h1> <p class="text-sm text-gray-500 leading-relaxed">작은 회색 본문, 넉넉한 줄높이</p> <span class="uppercase font-semibold tracking-wide">badge</span> <p class="truncate">아주 긴 한 줄… 끝을 점으로 자름</p> <p class="line-clamp-2">두 줄까지만 보이고 나머지는 …</p>
2. 색 — 팔레트 체계
무엇: Tailwind는 색을 색이름-단계 형태로 줍니다. 예를 들어 blue-500 은
"파랑의 중간 밝기"예요. 단계는 50(아주 연함)부터 950(아주 진함)까지 11칸입니다.
blue-100 으로 옅은 배경, blue-600 으로 진한 글자를 한 색 안에서 맞춥니다.색 이름과 단계
중립색(회색 계열)과 유채색이 있고, 각 색마다 50 · 100 · 200 · 300 · 400 · 500 · 600 · 700 · 800 · 900 · 950 단계가 있습니다.
| 분류 | 색 이름 |
|---|---|
| 회색 계열(중립) | slate · gray · zinc · neutral · stone |
| 따뜻한 계열 | red · orange · amber · yellow · lime |
| 초록·청록 계열 | green · emerald · teal · cyan |
| 파랑·보라 계열 | sky · blue · indigo · violet · purple |
| 분홍 계열 | fuchsia · pink · rose |
| 특수 | black · white · transparent · current(현재 글자색) |
어디에 색을 칠하나
| 클래스 | 의미(CSS) | 예 |
|---|---|---|
text-{색} | 글자색(color) | text-red-600 |
bg-{색} | 배경색(background) | bg-blue-100 |
border-{색} | 테두리색(border-color) | border-gray-300 |
ring-{색} | 포커스 링 색 | ring-blue-500 |
{색}/{투명도} | 투명도 섞기(slash 표기) | text-blue-500/50 = 파랑 50% 불투명 |
v3까지는 text-opacity-50 같은 별도 클래스를 썼지만, v4에서는 색 뒤에
슬래시 + 숫자로 한 번에 적습니다. bg-black/50(검정 50% = 반투명 오버레이),
text-white/70(흰 글자 70%) 처럼요. 더 짧고 직관적입니다.
3. 배경 — 단색과 그라데이션
무엇: 단색 배경은 bg-{색}, 색이 번지는 그라데이션은 방향 + 색 정거장으로 만듭니다.
| 클래스 | 의미 |
|---|---|
bg-linear-to-r / -b / -tr / -bl … | 선형 그라데이션 방향(오른쪽/아래/오른쪽위/왼쪽아래) |
from-{색} | 시작 색 |
via-{색} | 중간 경유 색(선택) |
to-{색} | 끝 색 |
bg-radial / bg-conic | 원형 / 원뿔형 그라데이션 |
v3의 bg-gradient-to-r 은 v4에서 bg-linear-to-r 로 바뀌었습니다(원형·원뿔형이 추가되면서
"선형"임을 분명히 한 것). 옛 자료를 볼 때 gradient → linear 로 읽으면 됩니다.
색 정거장(from-/via-/to-)은 그대로입니다.
<!-- 왼→오 파랑에서 보라로 --> <div class="bg-linear-to-r from-blue-500 to-purple-500">...</div> <!-- 위→아래, 중간에 분홍 경유 --> <div class="bg-linear-to-b from-sky-400 via-pink-400 to-orange-400">...</div>
4. 테두리 — border
무엇: 두께·변(어느 쪽)·색·선 모양을 정합니다. 자식 사이에만 구분선을 넣는 divide- 도 있어요.
| 클래스 | 의미 |
|---|---|
border | 네 변 1px 테두리 |
border-2 / border-4 / border-8 | 두께 2/4/8px |
border-t / border-r / border-b / border-l | 위/오른쪽/아래/왼쪽 한 변만 |
border-x / border-y | 좌우 / 상하 두 변 |
border-{색} | 테두리 색(border-gray-300) |
border-solid / border-dashed / border-dotted | 실선 / 점선(대시) / 점선(도트) |
divide-x / divide-y | 자식 요소들 사이에만 세로/가로 구분선 |
divide-y 를 부모에 주면, 부모 바깥이 아니라 자식들끼리 맞닿는 곳에만 가로선이 그려집니다.
메뉴 목록, 설정 행(行)처럼 항목을 줄로 구분할 때 깔끔합니다. 색은 divide-gray-200.
<div class="border-2 border-dashed border-blue-400 p-4">점선 테두리</div> <div class="border-l-4 border-amber-500 pl-3">왼쪽 강조 막대(인용문 느낌)</div> <ul class="divide-y divide-gray-200"> <li class="py-2">항목 1</li> <li class="py-2">항목 2</li> </ul>
5. 둥근 모서리 — rounded
무엇: 모서리를 둥글게(border-radius). 크기 단계와 특정 모서리 지정이 있습니다.
| 클래스 | 둥글기 |
|---|---|
rounded-none | 각짐(0) |
rounded-xs / rounded-sm | 2px / 4px |
rounded-md / rounded-lg | 6px / 8px |
rounded-xl / rounded-2xl / rounded-3xl | 12px / 16px / 24px |
rounded-full | 완전 원형(알약·아바타) |
rounded-t-* / rounded-b-* / rounded-l-* / rounded-r-* | 위/아래/왼/오 두 모서리만 |
rounded-tl-* / rounded-tr-* / rounded-br-* / rounded-bl-* | 특정 한 모서리만 |
v4에서 둥글기 단계 이름이 한 칸씩 작아졌습니다. v3의 rounded(0.25rem)는 v4의 rounded-sm,
v3의 rounded-sm 은 v4의 rounded-xs 가 되었어요(그림자도 같은 방식으로 이동, 아래 참고).
6. 그림자와 효과 — shadow · opacity · ring
무엇: 떠 보이는 그림자, 전체 투명도, 그리고 포커스 표시용 "링"입니다.
| 클래스 | 의미 |
|---|---|
shadow-2xs / shadow-xs / shadow-sm | 아주 옅음 → 옅음(작은 그림자) |
shadow-md / shadow-lg | 보통 / 큼(카드·메뉴) |
shadow-xl / shadow-2xl | 아주 큼 / 가장 큼(모달·팝오버) |
shadow-none | 그림자 제거 |
shadow-{색} | 그림자에 색(shadow-blue-500/40) |
opacity-0 ~ opacity-100 | 요소 전체 투명도(0~100%, 보통 25 단위) |
ring / ring-2 / ring-4 | 바깥 테두리 같은 "링"(focus 표시) |
ring-{색} | 링 색(ring-blue-500) |
ring-offset-2 / ring-offset-{색} | 링과 요소 사이 간격 / 그 틈의 색 |
그림자 이름도 한 칸씩 작아졌습니다. v3의 shadow-sm 은 v4 shadow-xs,
v3의 그냥 shadow 는 v4 shadow-sm 입니다(맨 아래 shadow-2xs 가 새로 추가).
또 v3에서 ring 은 3px였지만 v4에서는 1px 입니다 — 3px 효과를 원하면 ring-2 이상을 쓰세요.
<button class="rounded-lg bg-blue-600 text-white px-4 py-2
shadow-md hover:shadow-lg
ring-2 ring-blue-300 ring-offset-2">
포커스 링이 있는 버튼
</button>7. 트랜지션과 변형 — 움직임
무엇: 상태가 바뀔 때 부드럽게 변하도록(transition), 그리고 모양을 변형(transform: 확대·회전·이동)합니다.
보통 hover:(마우스 올림) 같은 상태와 짝지어 씁니다.
| 분류 | 클래스 | 의미 |
|---|---|---|
| 트랜지션 | transition / transition-colors / transition-transform | 모든/색/변형만 부드럽게 |
| 시간 | duration-150 / duration-300 / duration-700 | 지속 시간(ms) |
| 가속곡선 | ease-linear / ease-in / ease-out / ease-in-out | 빨라짐/느려짐 곡선 |
| 지연 | delay-100 / delay-300 | 시작 전 기다림(ms) |
| 크기 | scale-95 / scale-100 / scale-110 | 축소 / 원래 / 확대(%) |
| 회전 | rotate-3 / rotate-45 / -rotate-6 | 시계/반시계 회전(도) |
| 이동 | translate-x-2 / -translate-y-1 | 가로/세로로 밀기(음수 가능) |
| 기울이기 | skew-x-6 / skew-y-3 | 가로/세로로 비스듬히 |
| 기준점 | origin-center / origin-top-left | 변형이 일어나는 중심점 |
"무엇을 부드럽게(transition) + 얼마나 오래(duration) + 어떤 상태일 때(hover:) 어떻게 변형(scale/rotate)"
를 조합합니다. 예: transition-transform duration-200 hover:scale-105 는
"마우스를 올리면 0.2초에 걸쳐 5% 커진다"는 뜻입니다.
<div class="transition-transform duration-300 ease-out
hover:scale-110 hover:rotate-3">
마우스를 올리면 살짝 커지고 기울어짐
</div>라이브 데모
지금까지의 색·그림자·둥근 모서리를 합친 카드입니다. 클래스를 직접 바꿔 보세요.
이번엔 그라데이션 + 호버 효과입니다. 버튼·박스에 마우스를 올려 보세요.
한눈에 — 스타일 유틸 카탈로그
| 분류 | 대표 클래스 | 한 줄 설명 |
|---|---|---|
| 글자 크기 | text-xs ~ text-9xl | 12px부터 128px까지 13단계 |
| 글자 굵기 | font-thin ~ font-black | 100~900 |
| 정렬·장식 | text-center, italic, underline, uppercase | 가운데/기울임/밑줄/대문자 |
| 줄높이·자간 | leading-*, tracking-* | 줄 간격 / 글자 사이 간격 |
| 말줄임 | truncate, line-clamp-2 | 한 줄 / N줄 자르고 … |
| 색 | text-*, bg-*, border-* + 색-단계 | blue-500, 투명도 /50 |
| 그라데이션 | bg-linear-to-r + from-/via-/to- | 방향 + 색 정거장(v4 이름) |
| 테두리 | border, border-2, border-dashed, divide-y | 두께/모양/자식 구분선 |
| 둥근 모서리 | rounded-lg, rounded-full | 모서리 둥글기 |
| 그림자 | shadow-sm ~ shadow-2xl | 떠 보이는 그림자(v4 이름 이동) |
| 링·투명도 | ring-2, ring-blue-500, opacity-50 | 포커스 링(v4 기본 1px) / 투명도 |
| 트랜지션 | transition, duration-300, ease-out | 부드러운 변화 |
| 변형 | scale-105, rotate-3, translate-x-2 | 확대/회전/이동 |
이 프로젝트의 프론트엔드는 이런 스타일 유틸 위에 Shadcn UI 컴포넌트를 얹어 씁니다. 버튼·배지·카드의 색과 그림자, 포커스 링은 모두 여기서 본 클래스들로 만들어져 있어요. 실제 화면 구성은 웹앱 7장 UI 구성(07-ui) 에서 다룹니다.
다음 단계
- 화면 크기·상태·다크모드로 클래스를 바꾸기 → 반응형 · 상태 · 다크모드
- 이 스타일들을 묶은 완성 컴포넌트 → Shadcn UI
- 바탕이 되는 순수 CSS 개념 → CSS