Tailwind CSS 중급 테크닉

Tailwind CSS의 고급 기능들을 활용하여 더 효율적이고 유지보수 가능한 스타일링을 구현하는 방법을 배웁니다. 커스텀 유틸리티, 반응형 디자인, 다크모드 등 실무에서 자주 사용되는 중급 테크닉을 다룹니다.

---

---

들어가며

이 글에서는 Tailwind CSS 중급 테크닉에 대해 상세히 알아보겠습니다. 총 12가지 주요 개념을 다루며, 각각의 개념에 대한 설명과 실제 코드 예제를 함께 제공합니다.

목차

1. 커스텀_유틸리티_클래스
2. 임의값_사용하기
3. 그룹_변형_활용
4. Peer_변형으로_형제_제어
5. 컨테이너_쿼리_사용
6. 다크모드_전략
7. 플러그인으로_기능_확장
8. 조건부_클래스_관리
9. 반응형_폰트_크기
10. 애니메이션_커스터마이징
11. 그라디언트_고급_기법
12. 스크롤_스냅_구현

---

1. 커스텀 유틸리티 클래스

개요

@layer directive를 사용하여 재사용 가능한 커스텀 유틸리티 클래스를 생성합니다. 프로젝트 전반에서 일관된 스타일을 유지할 수 있습니다.

코드 예제

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}

설명

@layer를 사용하면 Tailwind의 빌드 시스템에 통합되어 퍼징과 최적화가 자동으로 적용됩니다. utilities 레이어에 추가하면 다른 유틸리티처럼 사용할 수 있습니다.

---

2. 임의값 사용하기

개요

대괄호 표기법을 사용하여 미리 정의되지 않은 임의의 값을 즉석에서 사용할 수 있습니다. 디자인 시스템을 벗어난 특수한 경우에 유용합니다.

코드 예제

<div className="top-[117px] bg-[#1da1f2]">
  <p className="text-[14px] leading-[1.2]">
    Custom values
  </p>
  <div className="grid-cols-[200px_1fr_1fr]" />
</div>

설명

임의값을 사용하면 config 파일 수정 없이 특정 값을 바로 적용할 수 있습니다. CSS 변수도 [var(--custom)]처럼 사용 가능합니다.

---

3. 그룹 변형 활용

개요

부모 요소의 상태에 따라 자식 요소의 스타일을 변경하는 group 변형을 사용합니다. 복잡한 호버 효과를 간단하게 구현할 수 있습니다.

코드 예제

<div className="group hover:bg-blue-500">
  <h3 className="group-hover:text-white">Title</h3>
  <p className="group-hover:opacity-100 opacity-0">
    Hidden text
  </p>
</div>

설명

부모에 group 클래스를 추가하면 자식에서 group-hover, group-focus 등으로 부모 상태에 반응할 수 있습니다. 카드 컴포넌트에 특히 유용합니다.

---

4. Peer 변형으로 형제 제어

개요

형제 요소의 상태에 따라 다른 형제 요소를 스타일링하는 peer 변형입니다. 체크박스나 라디오 버튼의 커스텀 UI에 효과적입니다.

코드 예제

<input type="checkbox" className="peer sr-only" />
<label className="peer-checked:bg-blue-500
               peer-checked:text-white
               bg-gray-200 p-4 cursor-pointer">
  Select me
</label>

설명

peer 클래스를 가진 요소의 상태를 peer-* 변형으로 감지합니다. CSS :checked 선택자를 JavaScript 없이 구현할 수 있습니다.

---

5. 컨테이너 쿼리 사용

개요

뷰포트가 아닌 부모 컨테이너 크기에 반응하는 스타일을 적용합니다. 컴포넌트 기반 반응형 디자인에 이상적입니다.

코드 예제

<div className="@container">
  <div className="@md:flex @md:gap-4">
    <img className="@md:w-1/3" />
    <div className="@md:w-2/3">Content</div>
  </div>
</div>

설명

@container를 부모에 설정하고 @md, @lg 같은 변형을 사용하면 해당 컨테이너 크기에 따라 스타일이 변경됩니다.

---

6. 다크모드 전략

개요

class 전략을 사용한 다크모드 구현으로 사용자가 직접 테마를 선택할 수 있게 합니다. 시스템 설정과 무관하게 동작합니다.

코드 예제

<div className="bg-white dark:bg-slate-800">
  <h1 className="text-gray-900 dark:text-white">
    Title
  </h1>
  <p className="text-gray-600 dark:text-gray-300" />
</div>

설명

tailwind.config.js에서 darkMode: 'class'로 설정하면 html이나 body에 dark 클래스가 있을 때만 다크모드 스타일이 적용됩니다.

---

7. 플러그인으로 기능 확장

개요

Tailwind 플러그인을 사용하여 프로젝트에 필요한 커스텀 스타일과 변형을 추가합니다. 팀 전체가 사용할 수 있는 디자인 시스템을 구축할 수 있습니다.

코드 예제

const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addUtilities }) {
      addUtilities({
        '.content-auto': { 'content-visibility': 'auto' }
      })
    })
  ]
}

설명

addUtilities, addComponents, addVariant 등의 API로 Tailwind를 확장할 수 있습니다. 복잡한 스타일 패턴을 재사용 가능하게 만듭니다.

---

8. 조건부 클래스 관리

개요

clsx나 classnames 라이브러리를 사용하여 조건부 클래스를 깔끔하게 관리합니다. 복잡한 상태 기반 스타일링을 가독성 있게 작성할 수 있습니다.

코드 예제

import clsx from 'clsx'

const button = clsx(
  'px-4 py-2 rounded',
  isActive && 'bg-blue-500 text-white',
  isDisabled && 'opacity-50 cursor-not-allowed',
  !isActive && 'bg-gray-200'
)

설명

clsx는 조건부 렌더링, 배열, 객체 등 다양한 형태의 클래스 입력을 처리합니다. Tailwind의 긴 클래스 문자열을 구조화할 수 있습니다.

---

9. 반응형 폰트 크기

개요

clamp() 함수와 임의값을 결합하여 뷰포트에 따라 부드럽게 변하는 타이포그래피를 구현합니다. 모든 화면 크기에서 최적의 가독성을 제공합니다.

코드 예제

<h1 className="text-[clamp(2rem,5vw,4rem)]
               leading-tight">
  Responsive Title
</h1>
<p className="text-[clamp(1rem,2.5vw,1.25rem)]" />

설명

clamp(최소값, 선호값, 최대값) 형식으로 뷰포트 너비에 비례하여 폰트 크기가 자동 조절됩니다. 미디어 쿼리 없이 유연한 타이포그래피를 만듭니다.

---

10. 애니메이션 커스터마이징

개요

tailwind.config.js에서 keyframes와 animation을 정의하여 프로젝트에 특화된 애니메이션을 생성합니다. 브랜드 아이덴티티를 반영한 모션을 구현할 수 있습니다.

코드 예제

module.exports = {
  theme: {
    extend: {
      keyframes: {
        slideIn: {
          '0%': { transform: 'translateX(-100%)' },
          '100%': { transform: 'translateX(0)' }
        }
      },
      animation: { slideIn: 'slideIn 0.3s ease-out' }
    }
  }
}

설명

정의한 애니메이션은 animate-slideIn처럼 유틸리티 클래스로 사용됩니다. duration, timing-function도 customize 가능합니다.

---

11. 그라디언트 고급 기법

개요

다중 색상 정지점과 방향을 조합하여 복잡한 그라디언트 효과를 만듭니다. 모던한 UI 디자인에 깊이와 시각적 흥미를 더합니다.

코드 예제

<div className="bg-gradient-to-r
               from-purple-500 via-pink-500 to-red-500
               hover:bg-gradient-to-l
               transition-all duration-500">
  <p className="bg-clip-text text-transparent
                bg-gradient-to-r from-blue-600 to-cyan-600" />
</div>

설명

from, via, to로 색상 정지점을 설정하고 방향(to-r, to-br 등)을 지정합니다. bg-clip-text로 텍스트에 그라디언트를 적용할 수 있습니다.

---

12. 스크롤 스냅 구현

개요

CSS 스크롤 스냅을 Tailwind로 구현하여 부드러운 스크롤 경험을 제공합니다. 캐러셀이나 풀페이지 레이아웃에 효과적입니다.

코드 예제

<div className="snap-x snap-mandatory overflow-x-auto
               flex gap-4">
  <div className="snap-center shrink-0 w-full" />
  <div className="snap-center shrink-0 w-full" />
  <div className="snap-center shrink-0 w-full" />
</div>

설명

snap-x/snap-y로 스크롤 방향을 설정하고 snap-mandatory/snap-proximity로 스냅 강도를 조절합니다. 자식 요소에 snap-start/center/end를 적용합니다.

---

마치며

이번 글에서는 Tailwind CSS 중급 테크닉에 대해 알아보았습니다. 총 12가지 개념을 다루었으며, 각각의 사용법과 예제를 살펴보았습니다.

관련 태그

#Tailwind #CustomUtilities #ResponsiveDesign #DarkMode #ComponentStyling