构建 Tailwind CSS 按钮组件 + 变体

在最近的几个项目中，我一直在使用 Tailwind CSS 来构建和设计网站的组件、部分和页面。

然而，有一件事让我很困扰，那就是每次开始一个新项目时，我都必须一遍又一遍地构建某些常用组件。

这就是为什么我决定在这里启动 Tailwind CSS 组件系列并教您如何构建按钮、下拉菜单、模态框等元素。

几天前，我向您展示了如何构建Tailwind CSS 面包屑组件，今天我将向您展示如何构建按钮组件。

让我们开始吧！

Tailwind CSS 按钮组件

首先，了解按钮的 HTML 类型非常重要。它通常用作<a>元素，但您也可以将其用作<button>元素。

让我们首先创建按钮的 HTML 标记：

<button type="button">Flowbite</button>

让我们添加一些间距类：

<button type="button" class="px-5 py-2.5">Default</button>

现在让我们添加一些颜色：

<button type="button" class="text-white bg-blue-700 px-5 py-2.5">Flowbite</button>

应用文本相关的样式也很重要：

<button type="button" class="text-white bg-blue-700 font-medium text-sm px-5 py-2.5 text-center">Flowbite</button>

现在让我们将按钮变成圆形，但您也可以根据自己的喜好将其保持方形：

<button type="button" class="text-white bg-blue-700 font-medium rounded-lg text-sm px-5 py-2.5 text-center">Flowbite</button>

最后，别忘了添加悬停和焦点样式：

<button type="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-5 py-2.5 text-center">Flowbite</button>

Tailwind CSS 轮廓按钮样式

您还可以使用以下样式来构建没有纯色背景的按钮：

<button type="button" class="rounded-lg border border-gray-200 bg-white text-sm font-medium px-4 py-2 text-gray-900 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 mr-3 mb-3">Flowbite</button>

带图标的 Tailwind CSS 按钮

您可能还想在按钮内使用图标。flex为了获得最佳性能，我建议使用 SVG 图标。

<button type="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-5 py-2.5 text-center inline-flex items-center mr-3">
    <svg class="-ml-1 mr-2 h-5 w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path></svg>
    Buy now
</button>

按钮作为链接

<a>您可以使用标签而不是元素轻松地将按钮用作链接<button>：

<a href="#" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-3 mb-3">I'm a link</a>

就是这样！希望本教程能为您的 Tailwind CSS 之旅提供帮助。

Flowbite - Tailwind CSS 组件库

这个Tailwind CSS 按钮组件是名为 Flowbite 的更大库的一部分，该库包含更多使用 Tailwind CSS 中的实用程序类构建的变体和组件。

您可以通过阅读官方文档中的介绍和快速入门指南来了解更多信息并开始使用 Flowbite 。

鏂囩珷鏉ユ簮锛�https://dev.to/themesberg/building-a-tailwind-css-button-component-variants-55dp