작년에 우리는 Tailwind UI를 출시했습니다. 이는 Tailwind CSS로 구축된 전문적으로 디자인된 UI 예제의 거대한 디렉토리입니다. 지금까지 Tailwind UI의 모든 예제는 순수 HTML로 작성되었으며, 이는 모든 웹 개발자에게 공통적으로 적용 가능한 가장 기본적인 형태로, 어떤 템플릿 언어나 JavaScript 프레임워크에도 적용할 수 있게 해줍니다.
오늘 우리는 Tailwind UI의 모든 예제에 React와 Vue 3에 대한 퍼스트클래스 지원을 추가하게 되어 기쁘게 생각합니다. 이제 여러분의 프로젝트에 이를 더 쉽게 적용할 수 있습니다.
이것은 긴 여정이었지만, 우리가 이곳에 도달한 것에 대해 매우 자랑스럽게 생각하며, 이제 Tailwind UI가 Tailwind CSS 사용자들에게 더 유용한 도구가 될 것이라고 확신합니다.
기능적이고 접근성 있는 컴포넌트
Tailwind UI의 모든 React와 Vue 예제는 Headless UI로 구동됩니다. Headless UI는 모달이나 드롭다운 같은 복잡한 컴포넌트를 만들 때 필요한 모든 복잡한 JS 동작을 실제 스타일과 마크업에서 분리하기 위해 개발한 컴포넌트 라이브러리입니다.
Headless UI는 ARIA 속성 관리, 키보드 상호작용, 포커스 처리 등을 모두 처리해 줍니다. 따라서 Tailwind UI에서 제공하는 모든 React와 Vue 예제는 완전히 기능적이며, 복잡한 JS 코드를 직접 작성할 필요가 없습니다. 모든 복잡한 부분은 여러분의 node_modules 폴더 안에 안전하게 숨겨져 있어, 코드를 변경하지 않고도 개선 사항과 버그 수정을 제공받을 수 있습니다.
완전한 커스터마이징 가능
Headless UI를 사용하면 복잡한 자바스크립트 기능을 추상화하면서도 실제 마크업에 대한 제어권을 잃지 않습니다. 이는 전체 디자인이 여전히 여러분의 손안에 있다는 것을 의미합니다.
import { useState } from "react";import { Switch } from "@headlessui/react";function classNames(...classes) { return classes.filter(Boolean).join(" ");}export default function Example() { const [enabled, setEnabled] = useState(false); return ( <Switch checked={enabled} onChange={setEnabled} className={classNames( enabled ? "bg-indigo-600" : "bg-gray-200", "relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-none", )} > <span className="sr-only">Use setting</span> <span aria-hidden="true" className={classNames( enabled ? "translate-x-5" : "translate-x-0", "pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white ring-0 shadow transition duration-200 ease-in-out", )} /> </Switch> );}Tailwind UI에서 React나 Vue 예제를 복사한 후, 테두리 반경부터 패딩, 박스 그림자, 폰트 크기까지 모든 것을 변경할 수 있습니다. 이는 여러분이 익숙한 유틸리티 클래스를 추가하는 것만으로 가능합니다.
시작하기
이미 Tailwind UI 고객이라면, 이 모든 기능을 무료 업데이트로 바로 이용할 수 있습니다. 계정에 로그인한 후, 컴포넌트 상단의 드롭다운에서 HTML, React, Vue 중 하나를 선택하고 원하는 형식의 코드를 가져오면 됩니다.
Tailwind UI를 아직 사용해보지 않았다면, 무료 미리보기 컴포넌트를 살펴보며 작동 방식을 확인해 보세요. 새로운 사이드 프로젝트 아이디어를 빠르게 진행하거나, 업무에서 필요한 새로운 기능에 대한 영감을 얻거나, Tailwind를 사용해 특정 UI 트릭을 구현하는 방법을 배우는 데 유용한 도구입니다. 또한 Tailwind CSS, Headless UI, Heroicons와 같은 오픈소스 프로젝트를 지원하는 좋은 방법이기도 합니다.
한번 확인해보고 싶으신가요? Tailwind UI 웹사이트 방문 →