Tailwind CSS 기본 개념

Tailwind CSS 기본 개념

Tailwind CSS의 기본 개념

1. 유틸리티-퍼스트 프레임워크

Tailwind CSS는 유틸리티-퍼스트(Utility-First) 프레임워크로, 미리 정의된 CSS 클래스를 조합하여 빠르게 UI를 구성할 수 있습니다.

예를 들어, 다음과 같은 코드는 글자의 색상, 크기, 정렬 등을 Tailwind 클래스만으로 제어합니다:

<h1 class="text-4xl font-bold text-center text-blue-500">Hello, Tailwind!</h1>

2. Atomic Design 원칙

각 클래스는 하나의 스타일 속성만을 담당합니다. 이로 인해 작고 재사용 가능한 스타일을 구성할 수 있습니다.

 

---

유틸리티 클래스 구조

Tailwind CSS의 유틸리티 클래스는 일관성 있는 네이밍 규칙을 따릅니다.

1. 텍스트 스타일링

• 글자 크기: text-sm, text-lg, text-2xl
• 글자 색상: text-gray-700, text-red-500
• 글자 두께: font-light, font-bold

<p class="text-lg text-gray-700 font-medium">이것은 Tailwind로 작성한 문장입니다.</p>

2. 배경과 테두리

• 배경색: bg-blue-200, bg-green-500
• 테두리: border, border-gray-300, rounded-lg

<div class="bg-yellow-100 border border-yellow-400 rounded p-4">
  경고 메시지입니다.
</div>

3. 여백(Margin)과 패딩(Padding)

• 여백: m-4 (모든 방향), mt-2 (위쪽), mx-3 (좌우)
• 패딩: p-4 (모든 방향), py-2 (상하), px-5 (좌우)

<button class="px-4 py-2 bg-blue-500 text-white rounded">버튼</button>

 

 

---

 

기본 사용법

Tailwind CSS의 기본 사용법은 간단한 클래스 조합을 통해 스타일을 빠르게 적용하는 것입니다.

1. 버튼 스타일링 예제

<button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">
  클릭하세요
</button>

• bg-green-500: 버튼의 배경색 설정
• hover:bg-green-700: 마우스를 올렸을 때 배경색 변경
• text-white: 글자 색상 설정
• font-bold: 글자 두께 설정
• py-2 px-4: 상하, 좌우 패딩 설정
• rounded: 둥근 테두리 적용

2. 카드 컴포넌트 예제

<div class="max-w-sm rounded overflow-hidden shadow-lg bg-white">
  <img class="w-full" src="https://via.placeholder.com/150" alt="샘플 이미지">
  <div class="px-6 py-4">
    <h2 class="font-bold text-xl mb-2">카드 제목</h2>
    <p class="text-gray-700 text-base">
      이곳은 카드 설명이 들어가는 부분입니다.
    </p>
  </div>
</div>​

• max-w-sm: 최대 너비 설정
• rounded: 둥근 테두리 적용
• shadow-lg: 그림자 효과 추가
• px-6 py-4: 내부 여백 설정
• mb-2: 요소 간의 간격 조절

3. 레이아웃 구성 예제 (Flexbox 활용)

<div class="flex justify-between items-center bg-gray-200 p-4">
  <div class="text-xl font-semibold">로고</div>
  <nav class="space-x-4">
    <a href="#" class="text-gray-600 hover:text-black">홈</a>
    <a href="#" class="text-gray-600 hover:text-black">소개</a>
    <a href="#" class="text-gray-600 hover:text-black">문의</a>
  </nav>
</div>

• flex: 플렉스 박스 레이아웃 적용
• justify-between: 요소들을 양 끝으로 정렬
• items-center: 수직 정렬
• space-x-4: 링크 간 간격 설정

 

---

반응형 디자인 적용

Tailwind CSS는 모바일 퍼스트 접근 방식을 따르며, 반응형 디자인을 위한 브레이크포인트를 제공합니다.

1. 브레이크포인트

• sm: 640px 이상
• md: 768px 이상
• lg: 1024px 이상
• xl: 1280px 이상

2. 사용 방법

<div class="text-base md:text-lg lg:text-xl">
  화면 크기에 따라 글자 크기가 변경됩니다.
</div>

• 작은 화면에서는 text-base
• 중간 화면에서는 text-lg
• 큰 화면에서는 text-xl 적용

 

---

 

상태 기반 스타일링

1. Hover, Focus, Active 상태

Tailwind에서는 상태 기반 스타일을 쉽게 적용할 수 있습니다.

<button class="bg-blue-500 hover:bg-blue-700 focus:ring-2 focus:ring-blue-300 active:bg-blue-900 text-white px-4 py-2 rounded">
  상호작용 버튼
</button>

• hover:bg-blue-700: 마우스를 올렸을 때 배경색 변경
• focus:ring-2: 포커스 시 외곽선 효과 적용
• active:bg-blue-900: 클릭 상태에서 색상 변경

 

---

 

다크 모드 지원

Tailwind CSS는 다크 모드도 쉽게 적용할 수 있습니다.

1. 설정 방법

tailwind.config.js 파일에 다크 모드 설정 추가:

module.exports = {
  darkMode: 'class',
  content: ["./src/**/*.{html,js}"],
};

2. 사용 예시

<div class="bg-white dark:bg-gray-800 text-black dark:text-white p-4">
  다크 모드가 적용됩니다.
</div>

• 부모 요소에 class="dark"를 추가하면 다크 모드 활성화