올해 2월, 우리는 Tailwind UI를 출시했습니다. 이는 여러분이 Tailwind 프로젝트에 복사하여 붙여넣을 수 있는 HTML 컴포넌트 예제 모음으로, 여러분의 디자인을 위한 출발점으로 사용할 수 있습니다.
우리는 Tailwind UI를 HTML 전용으로 제작하여 가능한 한 보편적으로 사용할 수 있도록 했습니다. 하지만 많은 디자인이 본질적으로 상호작용적이며, 이러한 상호작용 동작을 JavaScript 프레임워크 간에 이식하는 것은 항상 쉬운 일이 아닙니다.
이에 대한 한 가지 예는 드롭다운 메뉴를 토글할 때 나타나는 페이드 인/아웃과 같은 진입/퇴장 트랜지션입니다.
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도 지원할 예정입니다!) 하지만 React 사용자들이 Vue와 Alpine.js에서 가능한 것과 동등한 경험을 할 수 있도록 <Transition> 컴포넌트부터 시작하기로 했습니다.
사용 예시는 다음과 같습니다:
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에서 토론해 보세요 →