Tailwind UI Require JS 사용 방법

Tailwind UI의 라이선스를 구매해서 사용하고 있다. 그런데 막상 사용하려 할 때 JS는 어떻게 해야 하는지 친절하게 가이드가 나와 있지 않아서 당황한 경험이 있다.

어떤 상태에 어떤 클래스들을 갖게 하라고 주석으로 남겨놨지만 사실상 그렇다면 JS를 내가 또 직접 구성해야 하는 불편함이 있었다. 그런 것을 알고 alpinejs 라이브러리를 이용해서 간단한 이벤트들에 스크립트를 추가할 수 있는 것을 설명해놓았다. https://tailwindui.com/documentation#using-html-and-your-own-js 하지만 이 문서를 읽고 바로 적용하기는 쉽지 않았다.

적용하려 하는 나의 프로젝트 상태는

yarn
laravel-mix
tailwindcss

TL;DR

See the Pen <a href="https://codepen.io/999hyeon/pen/OJmGjpq"> </a> by Hansanghyeon (<a href="https://codepen.io/999hyeon">@999hyeon</a>) on <a href="https://codepen.io">CodePen</a>.

Let’s go

tailwind css 공식 플러그인 적용

tailwind ui를 사용하려면 tailwind css의 서드파티 플러그인을 사용해야한다.

...
  plugins: [
    require('@tailwindcss/typography'),
    require('@tailwindcss/forms'),
    require('@tailwindcss/aspect-ratio'),
  ],
...Code language: JavaScript (javascript)

위처럼 3개의 서드파티 플러그인을 사용

이전에는 @tailwindcss/ui 플러그인을 추가로 적용해서 사용했어야 했지만 v2.0으로 넘어오면서 제거했다고 한다.

alpinejs 적용

yarn add alpinejs

script의 최상위 불러오는 곳에서

import Alpine from 'alpinejs';

Alpine.start();Code language: JavaScript (javascript)

사용해보기

공식문서에 나온 예제중 한가지를 이용해서 사용한다면

<div class="relative ...">
  <button type="button" class="...">
    Options
  </button>

  <!--
    Show/hide this element based on the dropdown state

    Entering: "transition ease-out duration-100 transform"
      From: "opacity-0 scale-95"
      To: "opacity-100 scale-100"
    Closing: "transition ease-in duration-75 transform"
      From: "opacity-100 scale-100"
      To: "opacity-0 scale-95"
  -->
  <div class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg">
    <div class="rounded-md bg-white shadow-xs">
      <!-- Snipped  -->
    </div>
  </div>
</div>Code language: HTML, XML (xml)

<div x-data="{ isOpen: false }" class="relative ...">
  <button type="button" @click="isOpen = !isOpen" class="...">
    Options
  </button>

  <div
    x-show="isOpen"
    x-transition:enter="transition ease-out duration-100 transform"
    x-transition:enter-start="opacity-0 scale-95"
    x-transition:enter-end="opacity-100 scale-100"
    x-transition:leave="transition ease-in duration-75 transform"
    x-transition:leave-start="opacity-100 scale-100"
    x-transition:leave-end="opacity-0 scale-95"
    class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg"
  >
    <div class="rounded-md bg-white shadow-xs">
      <!-- Snipped  -->
    </div>
  </div>
</div>Code language: HTML, XML (xml)

alpinejs를 이용해서 해당 클래스를 상태에 따라서 적용해줄 수 있다.

alpinejs의 out side click event

<div x-data="{id: 1}">
    <button @click="$dispatch('open-dropdown',{id})">Open Dropdown</button>
</div>

<ul x-data="{ open: false }"
    x-show="open"
    @open-dropdown.window="if ($event.detail.id == 1) open = true"
    @click.away="open = false">
    Dropdown Body
</ul>Code language: HTML, XML (xml)

@click.away를 통해서 out side click 이벤트 함수를 실행할 수 있다.

참고