Tailwind CSS는 CSS를 직접 작성하는 대신 Utility Class를 조합하여 스타일을 구성하는 방식이다.
처음 사용할 때는 어떤 클래스가 어떤 속성을 의미하는지 익숙하지 않아 자주 찾아보게 된다.
이번 글에서는 프로젝트를 진행하면서 자주 사용했던 Tailwind 클래스를 정리해보려고 한다.
자주 사용하는 기본 클래스
| 카테고리 | 클래스 | 설명 |
|---|---|---|
| 배경색 | bg-blue-500 | 배경 색상 |
| 글자 색상 | text-red-500 | 텍스트 색상 |
| 테두리 | border border-gray-300 | 테두리 및 색상 |
| 여백 | m-4, p-4 | Margin / Padding |
| 크기 | w-1/2, h-32 | 너비 / 높이 |
| 정렬 | flex justify-center items-center | Flex 정렬 |
| 글자 크기 | text-lg, text-2xl | Font Size |
| 글자 굵기 | font-bold | Font Weight |
| 그림자 | shadow-lg | Box Shadow |
| 반응형 | sm:, md:, lg: | 반응형 스타일 |
Font Size
Tailwind에서는 text-* 클래스를 사용하여 글자 크기를 지정한다.
| 클래스 | px | rem |
|---|---|---|
| text-xs | 12 | 0.75 |
| text-sm | 14 | 0.875 |
| text-base | 16 | 1 |
| text-lg | 18 | 1.125 |
| text-xl | 20 | 1.25 |
| text-2xl | 24 | 1.5 |
| text-3xl | 30 | 1.875 |
| text-4xl | 36 | 2.25 |
| text-5xl | 48 | 3 |
| text-6xl | 60 | 3.75 |
| text-7xl | 724.5 | 45.28125 |
| text-8xl | 966 | 60.375 |
| text-9xl | 1288 | 80.5 |
Border Radius
| 클래스 | px | 설명 |
|---|---|---|
| rounded-sm | 2 | 작은 둥글기 |
| rounded | 4 | 기본 |
| rounded-md | 6 | 중간 |
| rounded-lg | 8 | 큼 |
| rounded-xl | 12 | 더 큼 |
| rounded-2xl | 16 | 아주 큼 |
| rounded-3xl | 24 | 매우 큼 |
| rounded-full | 9999 | 원형 |
Flexbox
Tailwind에서 가장 많이 사용하는 클래스 중 하나이다.
| 클래스 | 설명 |
|---|---|
| flex | Flex 컨테이너 |
| flex-col | 세로 정렬 |
| flex-row | 가로 정렬 |
| justify-center | 가로 가운데 |
| items-center | 세로 가운데 |
| justify-between | 양 끝 정렬 |
| gap-4 | 요소 간 간격 |
자주 사용하는 Width
| 클래스 | 설명 |
|---|---|
| w-full | 100% |
| w-screen | 화면 전체 |
| w-fit | 내용 크기 |
| w-1/2 | 50% |
| w-1/3 | 33.3% |
| w-2/3 | 66.6% |
반응형 Prefix
Tailwind는 Prefix를 사용하여 화면 크기에 따라 다른 스타일을 적용할 수 있다.
| Prefix | 기본 기준 |
|---|---|
| sm: | 640px 이상 |
| md: | 768px 이상 |
| lg: | 1024px 이상 |
| xl: | 1280px 이상 |
| 2xl: | 1536px 이상 |
예를 들어
<div className="w-full md:w-1/2 lg:w-1/3">처럼 작성하면 화면 크기에 따라 너비가 변경된다.
결과
Tailwind CSS는 Utility Class를 조합하여 스타일을 구성하기 때문에 CSS 파일을 직접 작성하는 양을 크게 줄일 수 있다.
자주 사용하는 클래스를 미리 익혀두면 스타일을 빠르게 적용할 수 있으며, 반응형 레이아웃도 Prefix만 추가하여 간단하게 구현할 수 있다.
Reference
끄적끄적