Tailwind CSS UI 下拉菜单

Tailwind CSS 是一个极其灵活的 CSS 框架，被广泛地应用于现代 Web 应用的开发中。本文将介绍如何使用 Tailwind CSS 创建下拉菜单。

创建基本结构

首先，在 HTML 文件中创建一个基本的下拉菜单结构：

<div class="relative">
  <button
    class="inline-flex justify-center items-center w-full text-gray-700"
    id="options-menu"
    aria-haspopup="true"
    aria-expanded="true"
  >
    Options
    <svg
      class="ml-2 -mr-0.5 h-4 w-4"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 20 20"
      fill="currentColor"
      aria-hidden="true"
    >
      <path
        fill-rule="evenodd"
        d="M10 12a2 2 0 100-4 2 2 0 000 4z"
        clip-rule="evenodd"
      />
    </svg>
  </button>

  <div
    class="origin-top-right absolute right-0 mt-2 w-40 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5"
    role="menu"
    aria-orientation="vertical"
    aria-labelledby="options-menu"
  >
    <div class="py-1" role="none">
      <a
        href="#"
        class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900"
        role="menuitem"
      >
        Account settings
      </a>
      <a
        href="#"
        class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900"
        role="menuitem"
      >
        Support
      </a>
      <a
        href="#"
        class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900"
        role="menuitem"
      >
        License
      </a>
      <form method="POST" action="#">
        <button type="submit" class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">
          Sign out
        </button>
      </form>
    </div>
  </div>
</div>

这个结构包括一个按钮和一个下拉菜单。按钮使用 inline-flex 来使文本和图标水平居中。

样式化菜单

下一步是样式化菜单本身。为了实现这个目标，我们可以使用 Tailwind CSS 中的一些类：

.origin-top-right {
  top: 100%;
  right: 0;
}

.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 transparent),
    var(--tw-ring-shadow, 0 0 transparent), var(--tw-shadow);
}

.ring-1 {
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgba(59, 130, 246, 0.5);
  --tw-ring-offset-shadow: 0 0 transparent;
  --tw-ring-shadow: 0 0 transparent;
}

.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
}

.rounded-md {
  border-radius: 0.375rem;
}

结论

使用 Tailwind CSS 创建下拉菜单非常简单，只需要使用一些预定义的类即可。我们可以使用这些类来样式化菜单并将其添加到我们的网站或应用程序中。