[Tailwind CSS] 유틸리티 클래스

Tailwind CSS

Tailwind CSS

유틸리티 기반의 CSS 프레임워크로, CSS를 빠르고 효율적으로 작성할 수 있도록 돕는 도구이다. CSS 클래스를 미리 정의해 두고, 이를 조합하여 사용자 인터페이스를 구축할 수 있다.

Tailwind CSS 특징

• 유틸리티 클래스 기반: flex, mt-4, text-center, bg-blue-500 등의 유틸리티 클래스를 제공하여 바로 HTML 요소에 적용할 수 있다.
• 설정 가능한 디자인 시스템: tailwind.config.js 파일을 사용해 색상, 폰트 크기, 간격 등을 사용자 정의가 가능하다.
• 모바일 우선 접근 방식: 기본적으로 모바일 우선 스타일을 제공하며, sm, md, lg 등으로 브레이크포인트를 설정한다.
• 빠른 개발 속도: 반복적으로 사용하는 CSS를 작성할 필요가 없어 생산성을 높일 수 있다.
• JIT (Just-In-Time) 모드: 사용되는 클래스만 CSS에 포함하여 파일 크기를 최소화한다.

Tailwind CSS 클래스

1. 레이아웃

📑 Flexbox

flex, justify-, items-, flex-wrap, gap-*

<div class="flex justify-center items-center h-screen">
  Flexbox
</div>

• flex: Flexbox 컨테이너 활성화
• justify-center: Flexbox 아이템을 가로축 중앙 정렬
• items-center: Flexbox 아이템을 세로축 중앙 정렬

📑 Grid

grid, grid-cols-, gap-, place-items-*

<div class="grid grid-cols-3 gap-4">
  <div class="bg-gray-200 p-4">1</div>
  <div class="bg-gray-200 p-4">2</div>
  <div class="bg-gray-200 p-4">3</div>
</div>

• grid: Grid 레이아웃 활성화
• grid-cols-3: 3개의 열 생성
• gap-4: 아이템 간격을 16px로 설정

📑 기타 레이아웃 클래스

• block: 기본 블록 요소
• hidden: 요소 숨김
• float-{left/right/none}: 플로팅 요소
• clear-{left/right/both}: 플로팅 제거

2. 여백 및 패딩

📑 Margin

m-{size}, mt-{size}, mr-{size}, mb-{size}, ml-{size}

<div class="m-4">Margin Example</div>

📑 Padding

p-{size}, pt-{size}, pr-{size}, pb-{size}, pl-{size}

<div class="p-6">Padding Example</div>

📑 크기 단위

0, px, 0.5, 1, 2, ..., 96 (rem 단위로 계산)
m-4 → 16px (1rem = 4px).

3. 색상

📑 배경색

bg-{color}-{shade}

<div class="bg-blue-500 text-white p-4">Background Color</div>

📑 텍스트 색상

text-{color}-{shade}

<p class="text-red-500">Text Color</p>

📑 색상 팔레트

• 색상: red, blue, green, gray, yellow 등
• 명도: 50부터 900까지 (숫자가 높을수록 어두움)

4. 테두리

📑 기본 테두리

border, border-{color}, border-{size}

<div class="border border-gray-500 p-4">Border Example</div>

📑 모서리 둥글게

rounded, rounded-{size}

<div class="border border-red-500 rounded-lg p-4">Rounded Corners</div>

5. 타이포그래피

📑 글꼴 크기

text-{size}

<p class="text-xl">Text Size Example</p>

📑 글꼴 두께

font-{weight}

<p class="font-bold">Bold Text</p>

📑 줄 간격

leading-{size}

<p class="leading-loose">Loose Line Spacing</p>

📑 문자 간격

tracking-{size}

<p class="tracking-wide">Wide Letter Spacing</p>

6. 상태 클래스

📑 hover, focus

hover:, focus:

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Hover Example
</button>

📑 활성화 상태

active:*

<button class="bg-gray-400 active:bg-gray-600">Active Button</button>

📑 비활성화

disabled:*

<button class="bg-blue-500 text-white disabled:bg-gray-300" disabled>
  Disabled Button
</button>