构建 Tailwind CSS 警报组件

Tailwind CSS 是一个非常棒的实用优先框架，您可以使用它快速制作原型并构建用户界面。

与 Bootstrap 或 Bulma 等其他框架相比，其缺点之一是您没有获得一组默认的 UI 组件来开始使用。

今天我想开始一系列关于如何构建常用 Web 组件的文章，例如警报、按钮、下拉菜单等等。

我将从警报组件开始。

Tailwind CSS 警报组件

首先，我们需要构建基本的 HTML 标记，稍后我们将添加样式：



<div>
  <p>
    <span class="font-medium">Important Note!</span> Change a few things up and try submitting again.
  </p>
</div>

一个 div 元素和一个段落元素就足够了。现在让我们为主块元素添加一些样式。我将选择一个漂亮的蓝色背景色：



<div class="flex bg-blue-100 rounded-lg p-4 mb-4">
  <p>
    <span class="font-medium">Important Note!</span> Change a few things up and try submitting again.
  </p>
</div>

看起来已经好多了！我们再给段落元素添加一些样式：



<div class="flex bg-blue-100 rounded-lg p-4 mb-4">
  <p class="ml-3 text-sm text-blue-700">
    <span class="font-medium">Important Note!</span> Change a few things up and try submitting again.
  </p>
</div>

太棒了！我觉得加个图标也挺好看的。



<div class="flex bg-blue-100 rounded-lg p-4 mb-4">
  <svg class="w-5 h-5 text-blue-700" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>
  <p class="ml-3 text-sm text-blue-700">
    <span class="font-medium">Important Note!</span> Change a few things up and try submitting again.
  </p>
</div>

最终结果：

就是这样！您也可以将相同的警报用于成功和危险消息，只需将颜色从蓝色更改为绿色或红色，以及更改文本和图标即可。

Tailwind CSS 组件库 - Flowbite

这个Tailwind 警报组件是我参与开发的 Tailwind CSS 组件库的一部分。它遵循 MIT 许可证开源，并且已在Github和 NPM 上发布。

按照快速入门指南了解有关Flowbite（Tailwind CSS 组件库）的更多信息。

文章来源：https://dev.to/themesberg/building-a-tailwind-css-alert-component-3f76