Tailwind CSS home page
Go back

Tailwind UI: 이제 React + Vue 지원 추가

Date

작년에 우리는 Tailwind UI를 출시했습니다. 이는 Tailwind CSS로 제작된 전문적으로 디자인된 UI 예제들의 방대한 디렉토리입니다. 지금까지 Tailwind UI의 모든 예제는 순수 HTML로 작성되어 모든 웹 개발자들이 공통적으로 사용할 수 있는 가장 기본적인 형태였으며, 이를 어떤 템플릿 언어나 JavaScript 프레임워크에도 적용할 수 있도록 했습니다.

오늘 우리는 Tailwind UI의 모든 예제에 React와 Vue 3에 대한 퍼스트클래스 지원을 추가하게 되어 기쁘게 생각합니다. 이제 여러분의 프로젝트에 이 예제들을 더 쉽게 적용할 수 있습니다.

Tailwind UI: 이제 React와 Vue 지원

긴 여정이었지만, 우리가 이곳에 도달한 것에 대해 매우 자랑스럽게 생각하며, 이제 Tailwind UI가 Tailwind CSS 사용자들에게 더욱 유용한 도구가 될 것이라고 확신합니다.

기능적이고 접근성 높은 컴포넌트

Tailwind UI의 모든 React와 Vue 예제는 Headless UI로 구동됩니다. Headless UI는 모달이나 드롭다운 같은 복잡한 컴포넌트를 만들 때 필요한 복잡한 자바스크립트 동작을 실제 스타일과 마크업에서 분리하기 위해 개발한 컴포넌트 라이브러리입니다.

Headless UI는 ARIA 속성 관리, 키보드 상호작용, 포커스 처리 등을 모두 처리해 줍니다. 따라서 Tailwind UI에서 제공하는 모든 React와 Vue 예제는 완전히 기능적이며, 복잡한 자바스크립트 코드를 직접 작성할 필요가 없습니다. 모든 복잡한 부분은 여러분의 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 flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500'
      )}
    >
      <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 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200'
        )}
      />
    </Switch>
  )
}

Tailwind UI에서 React나 Vue 예제를 복사한 후, 테두리 반경부터 패딩, 박스 그림자, 폰트 크기까지 모든 것을 변경할 수 있습니다. 이는 여러분이 익숙한 유틸리티 클래스를 추가하는 것만으로 가능합니다.

시작하기

이미 Tailwind UI 고객이라면, 이 모든 기능을 무료 업데이트로 바로 이용할 수 있습니다. 계정에 로그인한 후, 컴포넌트 상단의 드롭다운에서 HTML, React, Vue 중 원하는 형식을 선택하고 코드를 가져오면 됩니다.

Tailwind UI를 아직 사용해보지 않았다면, 무료 미리보기 컴포넌트를 살펴보며 작동 방식을 확인해 보세요. 새로운 사이드 프로젝트 아이디어를 빠르게 구현하거나, 업무에서 필요한 기능에 대한 영감을 얻거나, Tailwind를 사용해 특정 UI 트릭을 구현하는 방법을 배우는 데 유용한 도구입니다. 또한 Tailwind CSS, Headless UI, Heroicons와 같은 오픈소스 프로젝트를 지원하는 좋은 방법이기도 합니다.

한번 확인해보고 싶으신가요? Tailwind UI 웹사이트 방문 →