[ 目次 ]

• はじめに
• jsfiddleで試す
• CDNのtailwind.min.cssを読み込む
• HTML
• Javascript（ES6）
• jsfiddleを確認

はじめに

こんにちは、香港に住んでいるWEBデベロッパーのなかむ（@nakanakamu0828）です。

今回はTailwind CSSでドロップダウンを実装する方法を試していきたいと思います。

Tailwind CSS

jsfiddleで試す

CDNのtailwind.min.cssを読み込む

jsfiddleのreourceとしてtailwind.min.cssを読み込みます。
今回は、以下のURLを読み込むようにしています

https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css

HTML

<div class="relative">
    <button
      class="border border-blue bg-white p-3 rounded text-blue shadow-inner"
      dropdown="true"
      data-target="dropdown-menu"
    >
      <span>BUTTON</span>
      <svg class="ml-2 h-4" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 129 129" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 129 129">
        <g>
          <path d="m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z"/>
        </g>
      </svg>
    </button>
    <div
      id="dropdown-menu"
      class="invisible absolute w-48 pin-t pin-l mt-12 bg-white shadow rounded border overflow-hidden"
    >
        <a
            href="#"
            class="no-underline block px-4 py-3 border-b text-grey-darkest bg-white hover:text-white hover:bg-grey whitespace-no-wrap"
        >
          Profile
        </a>
        <a
            href="#"
            class="no-underline block px-4 py-3 border-b text-grey-darkest bg-white hover:text-white hover:bg-grey whitespace-no-wrap"
        >
          Logout
        </a>
    </div>
</div>

Javascript（ES6）

const $dropdowns = Array.prototype.slice.call(document.querySelectorAll('[dropdown="true"]'), 0)
if ($dropdowns.length > 0) {
    $dropdowns.forEach($el => {
        $el.addEventListener("click", event => {
          document.getElementById($el.dataset.target).classList.toggle("invisible")
        })
    })
}

invisibleクラスの有無でドロップダウンメニューの表示・非表示を切り替えます。

jsfiddleを確認