如何构建 Tailwind CSS 标签组件

我已经使用 Tailwind CSS 很长一段时间了，我永远不会再使用不采用实用优先方法的 CSS 框架。

与 Bootstrap 或 Bulma 等其他框架相比，Tailwind CSS 的一个缺点是缺少一组组件，例如按钮、下拉菜单、警报等。

这就是为什么我决定在 DEV 社区上启动一个教程系列，向您展示如何构建最常用的组件之一。

上次我向您展示了如何构建模态组件，今天我将向您展示如何构建 Tailwind CSS 选项卡组件。

最终效果如下：

让我们开始吧！

Tailwind CSS 标签组件

首先，我们需要编写基本的 HTML 标记，它可以是带有<a>标签的导航组件，也可以使用<ul>带有列表项的元素。

我们将坚持使用列表变体，因此让我们使用以下标记：




<ul>
    <li>
        <a href="#">Profile</a>
    </li>
    <li>
        <a href="#">Dashboard</a>
    </li>
    <li>
        <a href="#">Settings</a>
    </li>
    <li>
        <a href="#">Contacts</a>
    </li>
    <li>
        <a>Disabled</a>
    </li>
</ul>

是不是简洁又漂亮？现在我们需要让它看起来更漂亮一些。我们先来设计一下整个列表：




<ul class="flex flex-wrap border-b border-gray-200">
    <li>
        <a href="#">Profile</a>
    </li>
    <li>
        <a href="#">Dashboard</a>
    </li>
    <li>
        <a href="#">Settings</a>
    </li>
    <li>
        <a href="#">Contacts</a>
    </li>
    <li>
        <a>Disabled</a>
    </li>
</ul>

这有助于水平排列列表项。现在我们需要设置列表项和链接的样式：




<ul class="flex flex-wrap border-b border-gray-200">
    <li class="mr-2">
        <a href="#" aria-current="page" class="inline-block bg-gray-100 text-blue-600 rounded-t-lg py-4 px-4 text-sm font-medium text-center active">Profile</a>
    </li>
    <li class="mr-2">
        <a href="#" class="inline-block text-gray-500 hover:text-gray-600 hover:bg-gray-50 rounded-t-lg py-4 px-4 text-sm font-medium text-center">Dashboard</a>
    </li>
    <li class="mr-2">
        <a href="#" class="inline-block text-gray-500 hover:text-gray-600 hover:bg-gray-50 rounded-t-lg py-4 px-4 text-sm font-medium text-center">Settings</a>
    </li>
    <li class="mr-2">
        <a href="#" class="inline-block text-gray-500 hover:text-gray-600 hover:bg-gray-50 rounded-t-lg py-4 px-4 text-sm font-medium text-center">Contacts</a>
    </li>
    <li>
        <a class="inline-block text-gray-400 rounded-t-lg py-4 px-4 text-sm font-medium text-center cursor-not-allowed">Disabled</a>
    </li>
</ul>

太棒了！现在看起来应该像这样：

我们还应该为该组件创建一个暗模式样式，因此让我们首先添加以下类：




<ul class="flex flex-wrap border-b border-gray-200 dark:border-gray-700">
    <li class="mr-2">
        <a href="#" aria-current="page" class="inline-block bg-gray-100 text-blue-600 rounded-t-lg py-4 px-4 text-sm font-medium text-center active dark:bg-gray-800 dark:text-blue-500">Profile</a>
    </li>
    <li class="mr-2">
        <a href="#" class="inline-block text-gray-500 hover:text-gray-600 hover:bg-gray-50 rounded-t-lg py-4 px-4 text-sm font-medium text-center dark:text-gray-400  dark:hover:bg-gray-800 dark:hover:text-gray-300">Dashboard</a>
    </li>
    <li class="mr-2">
        <a href="#" class="inline-block text-gray-500 hover:text-gray-600 hover:bg-gray-50 rounded-t-lg py-4 px-4 text-sm font-medium text-center dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-300">Settings</a>
    </li>
    <li class="mr-2">
        <a href="#" class="inline-block text-gray-500 hover:text-gray-600 hover:bg-gray-50 rounded-t-lg py-4 px-4 text-sm font-medium text-center dark:text-gray-400  dark:hover:bg-gray-800 dark:hover:text-gray-300">Contacts</a>
    </li>
    <li>
        <a class="inline-block text-gray-400 rounded-t-lg py-4 px-4 text-sm font-medium text-center dark:text-gray-500 cursor-not-allowed">Disabled</a>
    </li>
</ul>

如果您想了解如何使用 Tailwind CSS 切换暗模式，请查看 Flowbite 的指南。

如果激活了暗模式，则标签组件应如下所示：

Flowbite - Tailwind CSS 组件

这个标签组件是基于 Tailwind CSS 的更大的开源组件库 Flowbite 的一部分。

如果您查看Flowbite 文档，您会发现组件（例如选项卡）有更多变体和选项。

鏂囩珷鏉ユ簮锛�https://dev.to/themesberg/how-to-build-a-tailwind-css-tabs-component-56o2