지난 포스트에서 왜 Tailwind CSS를 팀 프로젝트에 채택했는지를 다뤘습니다.
생산성, 일관성, 그리고 디자인 시스템 구축의 편리함이라는 강점을 확인하셨을 겁니다.
이번 포스트에서는 Tailwind CSS를 처음 사용하는 분들을 위해 기본 문법과 사용법을 간단하게 정리해 보려고 합니다.
1. Tailwind CSS 기본 문법
Tailwind CSS는 HTML 태그의 className 속성에 스타일 정보를 직접 담는 방식으로 동작합니다. 이는 CSS 파일을 따로 작성하지 않고도, 클래스 이름만으로 스타일을 선언할 수 있도록 도와줍니다.
className 에 담기는 스타일 정보의 기본적인 구조는 다음과 같습니다.
prefix + property + value
- prefix: 상태나 반응형 브레이크포인트를 나타냅니다. (예:
hover:,sm:,focus:) - property: CSS 속성. (예:
bg→ background,text→ 글꼴 크기,border→ 테두리) - value: 속성 값. (예:
blue-500,4,lg)
기본 단위
Tailwind CSS는 rem 단위를 기본으로 사용합니다.
이는 브라우저의 기본 글꼴 크기(일반적으로 16px)를 기준으로 상대 크기를 설정하므로, 접근성과 반응형 디자인에서 유리합니다.
p-4 → 4 * 0.25rem = 1rem (16px)
text-lg → 1.125rem (18px)
rounded-lg → 0.5rem (8px)
예시
<div class="bg-blue-500 text-white p-4 rounded-lg">
Hello, Tailwind!
</div>
bg-blue-500: 배경색 파란색 (500단계).text-white: 텍스트 색상을 흰색으로 설정.p-4: 모든 방향에 4rem (16px) 의 패딩.rounded-lg: 모서리를 둥글게 처리.
2. 자주 사용하는 유틸리티 클래스
| 클래스 | 설명 | 예시 |
|---|---|---|
text-sm | 작은 텍스트 크기 | 0.875rem (14px) |
text-lg | 큰 텍스트 크기 | 1.125rem (18px) |
font-bold | 굵은 글꼴 | - |
text-center | 텍스트 중앙 정렬 | - |
uppercase | 대문자로 변환 | - |
| 클래스 | 설명 | 예시 |
|---|---|---|
bg-gray-100 | 연한 회색 배경 | - |
bg-blue-500 | 파란색 배경 | - |
border | 기본 테두리 추가 | 1px solid |
border-gray-500 | 테두리 색상 회색 | - |
rounded-full | 완전히 둥근 모서리 | - |
| 클래스 | 설명 | 예시 |
|---|---|---|
flex | Flexbox 컨테이너 선언 | - |
grid | Grid 컨테이너 선언 | - |
items-center | Flex/Grid 요소를 세로로 중앙 정렬 | - |
justify-center | Flex/Grid 요소를 가로로 중앙 정렬 | - |
gap-4 | Flex/Grid 내부 요소 간의 간격 설정 | 16px |
3. 반응형, 상태 클래스와 같은 Tailwind의 확장 기능
3.1 반응형 클래스
Tailwind는 sm:, md:, lg:, xl:과 같은 접두사를 사용해 반응형 디자인을 쉽게 구현합니다.
각 접두사의 화면 크기는 다음 표를 따릅니다.
| 접두사 | 화면 크기 (최소 너비) | 설명 |
|---|---|---|
sm: | 640px 이상 | 작은 화면(작은 태블릿 이상)에서 스타일 적용. |
md: | 768px 이상 | 중간 화면(태블릿 이상)에서 스타일 적용. |
lg: | 1024px 이상 | 큰 화면(작은 노트북 이상)에서 스타일 적용. |
xl: | 1280px 이상 | 더 큰 화면(데스크톱 이상)에서 스타일 적용. |
2xl: | 1536px 이상 | 초대형 화면(고해상도 모니터 등)에서 스타일 적용. |
예시
<div class="p-4 sm:p-6 md:p-8 lg:p-12">
반응형 패딩
</div>
결과
- 기본: 16px 패딩.
- 640px 이상(sm): 24px 패딩.
- 768px 이상(md): 32px 패딩.
- 1024px 이상(lg): 48px 패딩.
3.2 상태 클래스
상태 클래스는 요소의 상태(hover, focus, active 등)에 따라 스타일을 변경합니다.
예시
<button class="bg-blue-500 hover:bg-blue-700 text-white px-4 py-2 rounded">
Hover Me!
</button>
- 기본 상태: 배경 파란색(500).
- hover:bg-blue-700: 마우스 올리면 파란색(700).
이번 포스트는 여기까지입니다.
Tailwind CSS를 처음 사용할 때, 유틸리티 클래스의 이름과 종류가 헷갈리고, 클래스 순서 때문에 가독성이 떨어지는 문제를 한 번쯤은 겪어 보셨을 텐데요.
다음 포스트에서는 이런 문제를 해결하기 위해 Tailwind CSS 초보자를 위한 필수 VS Code Extension과, 팀 협업을 더 원활하게 만들어주는 플러그인을 소개해드리겠습니다.
