앞 챕터에서 디자인 토큰으로 색과 간격을 이름으로 정리했습니다. Tailwind CSS는 그렇게 정리된 토큰을 미리 작은 클래스 수백 개로 만들어 둔 도구입니다. 직접 CSS 파일을 열어 규칙을 쓰는 대신, HTML 요소에 p-4, text-lg 같은 짧은 클래스를 붙여 스타일을 완성합니다. 하나의 클래스가 하나의 작은 일만 하기 때문에 이런 클래스를 유틸리티 클래스(utility class)라고 부릅니다.
유틸리티 클래스란
예를 들어 p-4는 'padding(안쪽 여백)을 토큰 4단계만큼' 적용합니다. Tailwind에서 숫자 4는 보통 16px에 해당합니다. text-lg는 글자를 한 단계 크게, font-bold는 굵게, rounded는 모서리를 둥글게 만듭니다. 즉 클래스 이름 자체가 곧 디자인 토큰을 가리킵니다.
<button class="bg-violet-400 text-white px-4 py-2 rounded">
신청하기
</button>px-4는 좌우(x축) 안쪽 여백, py-2는 위아래(y축) 안쪽 여백입니다. p는 padding, m은 margin이며, 뒤에 x(좌우), y(위아래), t/r/b/l(상/우/하/좌) 방향을 붙일 수 있습니다.왜 클래스를 여러 개 붙이는가
처음 보면 클래스가 많아 지저분해 보입니다. 하지만 이 방식에는 분명한 이점이 있습니다. 스타일이 HTML 안에 함께 있어 별도 CSS 파일을 오갈 필요가 없고, 클래스 이름이 토큰 스케일에 묶여 있어 임의의 13px 같은 값이 끼어들 여지가 없습니다. 즉 일관성이 강제됩니다.
- 색 —
bg-violet-400(배경),text-gray-800(글자),border-gray-200(테두리) - 크기/굵기 —
text-sm,text-xl,font-medium,font-bold - 여백 —
p-4,mt-6,gap-2 - 모양 —
rounded-lg,shadow,border
색 이름의 숫자
Tailwind 색은 violet-400처럼 색 이름과 숫자로 이뤄집니다. 숫자는 밝기 단계로, 50이 가장 밝고 900이 가장 어둡습니다. 그래서 violet-100은 연한 보라, violet-700은 진한 보라입니다. 배경엔 연한 단계, 글자엔 진한 단계를 고르면 대비가 자연스럽습니다.
상태에 따라 바뀌는 스타일
마우스를 올렸을 때만 색을 바꾸고 싶다면 hover:를 앞에 붙입니다. 이렇게 콜론 앞에 붙는 부분을 변형 접두어(variant)라고 합니다.
<a class="text-violet-600 hover:text-violet-800 hover:underline">
더 보기
</a>| 접두어 | 언제 적용 |
|---|---|
| hover: | 마우스를 올렸을 때 |
| focus: | 입력칸 등에 포커스가 갔을 때 |
| md: | 화면이 일정 너비 이상일 때 |
Tailwind는 새로운 디자인 규칙을 만드는 도구가 아니라, 토큰으로 정한 규칙을 빠르게 적용하는 손놀림입니다. 토큰을 이해했다면 클래스 이름은 그 토큰의 별명일 뿐입니다.
bg-violet-400처럼 존재하는 색 단계만 쓸 수 있습니다. bg-violet-450처럼 스케일에 없는 숫자를 쓰면 클래스가 인식되지 않아 아무 일도 일어나지 않습니다. 오타를 냈을 때 '왜 색이 안 바뀌지?' 싶다면 단계 숫자부터 확인하세요.이해도 퀴즈
정답 3개 이상 → +140 XP배운 내용을 확인해 보세요. 4문항 중 60% 이상 맞히면 챕터가 완료되고 경험치가 적립됩니다.