Tailwind CSS는 “의미를 가진 클래스 이름을 조합해서 스타일을 표현하는 방식”이야.
즉, px-3, text-gray-700, focus:outline-none 같은 이름 하나하나가 이미 CSS 속성과 값을 의미하고 있어서,
직접 CSS를 작성하지 않아도 돼.
아래는 Tailwind CSS의 클래스 패턴과 규칙들을 정리한 테이블이야.
이건 블로그에 바로 올릴 수 있는 설명체로 만들어봤어.
Tailwind CSS 클래스 구조 이해하기
Tailwind CSS는 다음과 같은 기본 구조 패턴을 가지고 있어.
[상태접두사:]속성-값
예를 들어
focus:outline-none → focus:는 상태(prefix),
outline-none은 **속성(property)과 값(value)**이야.
기본 구조 테이블
형태예시의미설명
| p-4 | padding: 1rem; | p는 padding, 4는 Tailwind의 spacing scale을 의미해. | |
| px-3 | padding-left/right: 0.75rem; | px는 x축(padding-left/right), 3은 spacing scale이야. | |
| py-2 | padding-top/bottom: 0.5rem; | py는 y축(padding-top/bottom). | |
| m-2 | margin: 0.5rem; | m은 margin. | |
| mt-4 | margin-top: 1rem; | 방향별 margin/padding은 t, b, l, r, x, y를 조합해 써. | |
| text-gray-700 | color: #374151; | text-는 글자색, gray-700은 색상 팔레트의 단계야. | |
| bg-blue-500 | background-color: #3B82F6; | bg-는 배경색. | |
| rounded-lg | border-radius: 0.5rem; | rounded는 모서리 둥글게. 크기는 sm, md, lg, xl 등 다양해. | |
| border | border: 1px solid currentColor; | 단순히 테두리를 추가해. | |
| border-gray-300 | border-color: #D1D5DB; | border- 뒤에 색상을 지정할 수 있어. | |
| w-full | width: 100%; | w-는 width. full은 100%를 의미해. | |
| h-10 | height: 2.5rem; | h-는 height. 숫자는 spacing scale 기준이야. | |
| font-bold | font-weight: 700; | 글자 굵기. thin, normal, semibold, bold 등. | |
| text-sm | font-size: 0.875rem; | text- + 사이즈 지정. | |
| shadow-md | 중간 그림자 적용 | shadow 계열은 그림자 크기 지정. | |
| flex | display: flex; | Flexbox 적용. | |
| items-center | align-items: center; | Flexbox 정렬용 클래스. | |
| justify-between | justify-content: space-between; | Flexbox 정렬용 클래스. |
상태 / 반응형 / 가상 클래스 패턴
패턴예시설명
| hover: | hover:bg-blue-500 | 마우스를 올렸을 때 배경색이 바뀌어. |
| focus: | focus:outline-none | 포커스될 때 아웃라인을 제거해. |
| active: | active:scale-95 | 클릭 중일 때 살짝 줄어드는 효과. |
| disabled: | disabled:opacity-50 | 비활성화 상태에서 투명하게. |
| sm: md: lg: xl: | sm:text-sm md:text-base lg:text-lg | 화면 크기에 따라 반응형 크기 조정. |
| dark: | dark:bg-gray-900 | 다크모드일 때 적용되는 스타일. |
| peer-focus: | peer-focus:text-blue-500 | 특정 input이 focus될 때 label 등의 다른 요소에 적용돼. |
색상 체계
Tailwind의 색상은 "색상명-단계" 구조로 되어 있어.
단계가 낮을수록 밝고, 클수록 어두워져.
색상 계열예시설명
| gray | text-gray-100 ~ text-gray-900 | 흑백 계열. UI 전반에 자주 써. |
| blue | bg-blue-100 ~ bg-blue-900 | 강조나 링크 색으로 자주 써. |
| red | text-red-600 | 오류나 경고 메시지용. |
| green | bg-green-500 | 성공, 확인용. |
예시 조합
<input class="peer w-full rounded-lg border border-gray-300 bg-white px-3 pt-5 pb-2 text-gray-700 placeholder-transparent focus:border-blue-500 focus:outline-none" /> <label class="absolute left-3 top-1 text-xs text-gray-400 transition-all peer-placeholder-shown:top-4 peer-placeholder-shown:text-gray-400 peer-placeholder-shown:text-sm peer-focus:top-1 peer-focus:text-xs peer-focus:text-blue-600" > 이메일 주소 </label>
→ 여기서 peer는 input과 label이 상호작용하도록 만들어주는 키워드야.
peer-focus:는 input이 focus될 때 label의 스타일을 바꾸는 거지.
마무리
Tailwind CSS는 **“클래스 네이밍 규칙만 이해하면 CSS를 거의 안 써도 되는 구조”**야.
디자인 시스템을 통일하고, 유지보수를 쉽게 해주지.
다만, 클래스가 많아지면 HTML이 길어지는 단점이 있어서,
자주 쓰는 조합은 컴포넌트화하거나 @apply를 써서 CSS에 묶는 게 좋아.
'Tailwind CSS' 카테고리의 다른 글
| Tailwind class 정리 (0) | 2025.11.10 |
|---|