1 – 유틸리티 클래스 체계
유틸리티 클래스는 한 가지 스타일만 담당하는 클래스다. text-center는 글자 가운데 정렬 하나, p-4는 안쪽 여백 하나만 맡는다. CSS 파일에 규칙을 쌓는 대신, 이 작은 클래스를 태그에 조합해 화면을 만든다.
클래스 이름은 다음 구조로 만들어진다.
[변형 접두사:]속성-값[/보조값][!]| 자리 | 역할 | 예 |
|---|---|---|
| 속성-값 | 무엇을 어떤 값으로 | bg-red-500, p-4, text-xl |
| 변형 접두사 | 언제 적용할지(조건) | hover:bg-red-700, md:p-8, dark:bg-gray-800 |
| /보조값 | 색 불투명도 등 추가 값 | bg-black/50 (검정 50% 불투명) |
[임의값] | 테마에 없는 값을 직접 지정 | bg-[#316ff6], grid-cols-[24rem_2.5rem_minmax(0,1fr)] |
! | 우선순위 강제(important) | bg-red-500! |
1.1 – 변형(variant) 접두사
변형 접두사는 “이 조건일 때만 적용한다”는 뜻이다. 종류는 크게 세 갈래로 나뉜다.
- 상태 변형 –
hover:,focus:,active:,disabled:등. 예:hover:bg-sky-700은 마우스를 올렸을 때만 배경색을 바꾼다. - 반응형 변형 –
sm:,md:,lg:,xl:,2xl:. 해당 화면 너비 이상에서만 적용한다(2장의 breakpoint 표 참고). - 환경·구조 변형 –
dark:(다크 모드),group-hover:(부모에 마우스를 올렸을 때 자식에 적용) 등.
접두사는 겹쳐 쓸 수 있다. dark:lg:hover:bg-indigo-600은 “다크 모드이고, 1024px 이상이고, 마우스를 올렸을 때”라는 세 조건을 모두 만족해야 적용된다.
1.2 – 충돌 규칙
같은 속성을 다루는 클래스 두 개를 한 태그에 쓰면(grid flex), HTML에 적은 순서가 아니라 Tailwind가 생성한 CSS 파일에서 뒤에 정의된 쪽이 이긴다. 어느 쪽이 이길지 예측하기 어려우므로, 공식 문서는 충돌하는 클래스를 함께 쓰지 말고 조건문으로 하나만 넣으라고 안내한다.
1.3 – 값은 어디서 오는가
bg-red-500의 red-500, p-4의 4 같은 값은 임의로 정한 것이 아니라 테마 변수라는 한 곳에서 나온다. 이것이 2장의 크기 체계다.
2 – 크기 체계 (테마 변수)
Tailwind v4의 모든 크기·색 값은 CSS 변수(테마 변수)로 정의돼 있다. 변수 이름의 앞부분(네임스페이스)이 어떤 유틸리티와 연결되는지 정해져 있다.
| 테마 변수 | 연결되는 유틸리티 | 예 |
|---|---|---|
--color-* | 색 | bg-red-500, text-sky-300 |
--spacing | 간격·크기(숫자 계열) | p-4, gap-6, w-16, max-h-16 |
--text-* | 글자 크기 | text-xl |
--font- / --font-weight- | 글꼴 / 굵기 | font-sans, font-bold |
--breakpoint-* | 반응형 변형 | sm:, md: |
--container-* | 최대 너비·컨테이너 쿼리 | max-w-md, @sm: |
--radius-* | 모서리 둥글기 | rounded-lg |
--shadow-* | 그림자 | shadow-md |
2.1 – 숫자 계열: 간격(spacing) 배수 체계
간격·크기의 숫자는 전부 한 변수 --spacing의 배수다. 기본값은 --spacing: 0.25rem(4px)이다.
클래스의 숫자 × 0.25rem = 실제 크기
p-1 = 0.25rem = 4px
p-2 = 0.5rem = 8px
p-4 = 1rem = 16px
p-8 = 2rem = 32px
w-16 = 4rem = 64pxv4는 이 배수를 동적으로 계산하므로 미리 정해진 단계표가 따로 없다. p-4든 p-17이든 숫자에 0.25rem을 곱해 만들어진다. 그래서 “숫자 1 = 4px”만 기억하면 모든 간격·너비·높이 클래스를 암산할 수 있다.
숫자 대신 쓰는 특수값도 있다. w-full(100%), w-screen(화면 너비), w-1/2(부모의 50%) 같은 분수·키워드 값이다. 가로·세로를 같이 정하는 size-12(너비·높이 모두 3rem)도 같은 배수 체계를 쓴다.
2.2 – 이름 계열: t셔츠 사이즈 체계
숫자가 아닌 sm, md, lg, xl 같은 이름 단계는 옷 사이즈처럼 “상대적 단계”를 나타낸다. 이름 계열은 네임스페이스마다 실제 값이 다르다는 점이 핵심이다. 같은 md라도 rounded-md와 max-w-md와 shadow-md는 서로 다른 값이다.
대표적인 이름 계열 두 가지의 실제 값은 다음과 같다.
반응형 breakpoint(--breakpoint-*):
| 접두사 | 값 |
|---|---|
sm: | 40rem (640px) |
md: | 48rem (768px) |
lg: | 64rem (1024px) |
xl: | 80rem (1280px) |
2xl: | 96rem (1536px) |
글자 크기(--text-)는 text-sm, text-base, text-lg, text-xl, text-2xl… 순서로 커지고, 최대 너비(--container-)는 max-w-sm, max-w-md, max-w-lg… 순서로 커진다.
2.3 – 색 체계
색은 색이름-밝기 두 조각이다. 이름(red, sky, gray 등)이 색 계열을, 숫자(50~950)가 밝기 단계를 정한다. 숫자가 작을수록 밝고 클수록 어둡다. bg-red-500은 빨강 계열의 중간 밝기 배경이라는 뜻이다.
2.4 – 기준값 바꾸기 (@theme)
테마 변수는 CSS에서 @theme 블록으로 바꾸거나 추가한다. 변수 하나를 바꾸면 그 변수를 쓰는 모든 유틸리티가 함께 바뀐다.
@import "tailwindcss";
@theme {
--breakpoint-sm: 30rem; /* sm: 이 640px 대신 480px부터 적용된다 */
--font-poppins: Poppins, sans-serif; /* font-poppins 클래스가 새로 생긴다 */
}--spacing: 4px처럼 기본 단위 자체를 바꾸는 것도, --color-*: initial로 기본 색을 전부 지우고 프로젝트 색만 등록하는 것도 가능하다.
3 – 두 체계의 관계 요약
클래스 하나는 다음처럼 조립된다.
md:hover:bg-red-500/75
│ │ │ └─ 값: 테마 변수 --color-red-500 + 불투명도 75%
│ │ └─ 속성: 배경색
│ └─ 조건: 마우스를 올렸을 때
└─ 조건: 화면 768px 이상일 때정리하면, 유틸리티 클래스 체계는 “조건 + 속성 + 값”이라는 이름 조립 규칙이고, 크기 체계는 그 값 자리에 들어가는 기준값 사전(테마 변수)이다. 숫자는 --spacing(0.25rem)의 배수, 이름(sm~2xl)은 네임스페이스별 단계, 색은 색이름-밝기 조합이며, 전부 @theme으로 바꿀 수 있다.
출처 (2026-07-27 확인)
- https://tailwindcss.com/docs/styling-with-utility-classes (유틸리티 클래스·변형·충돌·임의값)
- https://tailwindcss.com/docs/theme (테마 변수 네임스페이스·–spacing 0.25rem·@theme)
- https://tailwindcss.com/docs/responsive-design (breakpoint 값)