构建 Tailwind CSS 下拉组件
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
Tailwind CSS 是一个实用性优先的框架，我今年的大部分项目都使用它，我找不到任何理由再回到 Bootstrap 或 Foundation 等其他框架。
尽管如此，我发现了一个相当大的缺点，因为 Tailwind CSS 没有提供一套基础组件，无法让你更快地构建网站。
这就是为什么我在 DEV 社区开始了一系列教程，讲解如何使用 Tailwind CSS 和原生 JavaScript 的实用类来构建最常用的 Web 组件。
之前我向大家展示了如何构建Tailwind CSS 卡片组件，今天我将展示一些更高级的内容：如何构建 Tailwind CSS 下拉元素。
我们开始吧。
Tailwind CSS 下拉菜单
首先，我们需要构建HTML代码。让我们创建一个按钮，并使用Flowbite库中这个Tailwind CSS按钮的样式。
<button class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2.5 text-center inline-flex items-center" type="button">Dropdown button <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg></button>
现在我们来设置菜单本身的 HTML 代码。
<button class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2.5 text-center inline-flex items-center" type="button" data-dropdown-toggle="dropdown">Dropdown button <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg></button>
<!-- Dropdown menu -->
<div class="hidden bg-white text-base z-50 list-none divide-y divide-gray-100 rounded shadow my-4">
<div class="px-4 py-3">
<span class="block text-sm">Bonnie Green</span>
<span class="block text-sm font-medium text-gray-900 truncate">name@flowbite.com</span>
</div>
<ul class="py-1" aria-labelledby="dropdown">
<li>
<a href="#" class="text-sm hover:bg-gray-100 text-gray-700 block px-4 py-2">Dashboard</a>
</li>
<li>
<a href="#" class="text-sm hover:bg-gray-100 text-gray-700 block px-4 py-2">Settings</a>
</li>
<li>
<a href="#" class="text-sm hover:bg-gray-100 text-gray-700 block px-4 py-2">Earnings</a>
</li>
<li>
<a href="#" class="text-sm hover:bg-gray-100 text-gray-700 block px-4 py-2">Sign out</a>
</li>
</ul>
</div>
如您所见，我们已经将样式应用到菜单，并且我们使用hidden类来默认隐藏它，因为我们只想在单击按钮时显示它。
如果我们通过 CDN 或 NPM 将 Flowbite 库的 JavaScript 添加到我们的项目中，我们就可以使用数据属性将按钮与下拉菜单连接起来。
在标签结束之前添加以下 JavaScript 代码<body>：
<script src="https://unpkg.com/@themesberg/flowbite@latest/dist/flowbite.bundle.js"></script>
太好了！现在让我们data-dropdown-toggle="dropdown"给按钮添加属性，其中dropdown是下拉菜单元素的 id。
我们还需要id="dropdown"向下拉菜单元素中添加内容。
<button class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2.5 text-center inline-flex items-center" type="button" data-dropdown-toggle="dropdown">Dropdown button <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg></button>
<!-- Dropdown menu -->
<div class="hidden bg-white text-base z-50 list-none divide-y divide-gray-100 rounded shadow my-4" id="dropdown">
<div class="px-4 py-3">
<span class="block text-sm">Bonnie Green</span>
<span class="block text-sm font-medium text-gray-900 truncate">name@flowbite.com</span>
</div>
<ul class="py-1" aria-labelledby="dropdown">
<li>
<a href="#" class="text-sm hover:bg-gray-100 text-gray-700 block px-4 py-2">Dashboard</a>
</li>
<li>
<a href="#" class="text-sm hover:bg-gray-100 text-gray-700 block px-4 py-2">Settings</a>
</li>
<li>
<a href="#" class="text-sm hover:bg-gray-100 text-gray-700 block px-4 py-2">Earnings</a>
</li>
<li>
<a href="#" class="text-sm hover:bg-gray-100 text-gray-700 block px-4 py-2">Sign out</a>
</li>
</ul>
</div>
最终结果应如下所示：
点击按钮即可打开下拉菜单，点击按钮外部即可关闭下拉菜单。您可以在网站的任何位置使用此元素。
Flowbite - Tailwind CSS 组件库
这个Tailwind CSS 下拉组件是名为 Flowbite 的大型开源组件库的一部分。
想了解如何开始使用Tailwind CSS 组件库，请按照在线文档中的快速入门指南进行操作。
文章来源：https://dev.to/themesberg/building-a-tailwind-css-dropdown-component-ban