Utility-Friendly Transitions with @tailwindui/react

올해 2월, 우리는 Tailwind UI를 출시했습니다. 이는 여러분의 Tailwind 프로젝트에서 디자인을 시작할 때 복사하여 붙여넣을 수 있는 HTML 컴포넌트 예제 모음입니다.

Tailwind UI는 가능한 한 보편적으로 사용할 수 있도록 HTML 전용, 자바스크립트는 직접 추가하는 방식으로 제작했습니다. 하지만 많은 디자인이 본질적으로 상호작용적이며, 이러한 상호작용을 자바스크립트 프레임워크 간에 이식하는 것은 항상 쉬운 일이 아닙니다.

이에 대한 예로, 드롭다운 메뉴를 토글할 때 페이드 인/아웃 효과를 보여주는 enter/leave 트랜지션이 있습니다.

Vue.js는 매우 유틸리티 친화적인 API를 가진 <transition> 컴포넌트를 제공합니다:

<transition
  enter-active-class="transition-opacity duration-75"
  enter-from-class="opacity-0"
  enter-to-class="opacity-100"
  leave-active-class="transition-opacity duration-150"
  leave-from-class="opacity-100"
  leave-to-class="opacity-0"
>
  <div v-show="isShowing">
    <!-- 페이드 인/아웃 효과가 적용됩니다 -->
  </div>
</transition>

하지만 이를 React에서 구현하는 것은 훨씬 더 어려운 일입니다. 지금까지 유틸리티 중심의 트랜지션 스타일링을 지원하는 라이브러리가 없었기 때문입니다.

그래서 이번 주 초, 우리는 @tailwindui/react의 첫 번째 버전을 출시했습니다. 이 라이브러리는 유틸리티 중심의 HTML을 완전한 상호작용 UI로 변환하는 저수준 프리미티브를 제공합니다.

앞으로 몇 달 동안 더 많은 컴포넌트를 추가할 예정입니다 (드롭다운, 토글, 모달 등, 그리고 Vue 버전도!). 하지만 먼저 <Transition> 컴포넌트를 통해 React 사용자들이 Vue와 Alpine.js에서 가능한 것과 동등한 경험을 할 수 있도록 하기로 했습니다.

사용 예시는 다음과 같습니다:

import { Transition } from '@tailwindui/react'
import { useState } from 'react'

function MyComponent() {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <div>
      <button onClick={() => setIsOpen(!isOpen)}>Toggle</button>
      <Transition
        show={isOpen}
        enter="transition-opacity duration-75"
        enterFrom="opacity-0"
        enterTo="opacity-100"
        leave="transition-opacity duration-150"
        leaveFrom="opacity-100"
        leaveTo="opacity-0"
      >
        {/* 페이드 인/아웃 효과가 적용됩니다 */}
      </Transition>
    </div>
  )
}

문서를 읽어보세요 더 많은 고급 기능을 배울 수 있습니다:

• 추가 DOM 엘리먼트 없이 렌더링
• 관련 트랜지션 조정
• 초기 마운트 시 트랜지션

이 CodeSandbox 데모에서 실제 동작을 확인해 보세요:

여러분의 프로젝트에서 사용해 보세요. 문제가 발생하면 GitHub에 이슈를 등록해 주세요.

이 글에 대해 이야기하고 싶으신가요? GitHub에서 토론해 보세요 →