排名前 5 的 Tailwind 组件库

介绍

为什么你应该使用基于 Tailwind 的组件库，而不是像 MUI、Chakra UI 和 Mantine 这样的组件库？如果你正在使用 Tailwind，最好使用基于 Tailwind 的组件库，这样你就可以直接使用 Tailwind 自定义组件。

5.雏菊界面

Daisy 提供了一些特殊的类，例如“btn”、“card”等。这些特殊的类是其他 Tailwind 实用类的组合。这些类的特异性较低，因此你可以轻松地覆盖它们，如下所示：

<button class="btn bg-blue-500">Default</button>

有些人可能不同意我将 Daisy 的排名排得这么低，但在我看来，Daisy 存在一些问题：

1. 它看起来不够专业，颜色太艳丽了。能不能定制一下，让它更专业一些？可以。但是它开箱即用，看起来确实不够专业。
2. 它抽象了组件的创建方式。基本上，当你使用像“btn”这样的特殊类时，你不知道它们是由哪些 Tailwind 工具类组成的。这对于学习和自定义来说并不理想，因此我更喜欢非抽象的组件库。
3. 组件是纯 HTML/CSS 的。这意味着 Daisy 组件的功能有限。相比之下，使用 JavaScript 的组件功能更强大。

4.Flowbite​

重要提示：Flowbite 有两个版本：常规版和Flowbite React。本文只讨论常规版 Flowbite，不讨论 Flowbite React，因为我认为它不太好用。Flowbite 是一个复制粘贴库，这意味着你不需要安装任何东西，如下所示：

<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 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">Default</button>

问题在于，正如你所见，它不支持 React。所以每次粘贴时你都需要将“class”改为“className”。此外，它又是一个纯 HTML/CSS 组件库。

3.WindUI​

类似 Flowbite，但更好用。这个组件库支持 React，所以直接复制粘贴就行。而且在我看来，它看起来也更美观。

2. Material Tailwind

非常漂亮且专业的组件库。与之前的其他组件库不同，它支持 JavaScript，功能也更加强大。

import { Button } from "@material-tailwind/react";

export default function Example() {
  return (
    <Button>Button</Button>;
    <Button size="sm" className="rounded-lg">Button</Button>;
  )
}

正如你所见，你可以通过直接编写 Tailwind 实用程序类来轻松自定义组件。唯一的缺点是抽象。你无法看到组件是如何创建的，以及使用了哪些 Tailwind 类。

1.shadcn /ui

一个复制粘贴组件库。类似于 Material Tailwind，但没有任何抽象。您可以查看组成组件的所有代码以及所有相关的 CSS。您可以轻松全面地自定义组件的各个部分。唯一的“缺点”是它对初学者不太友好。由于它只提供完全底层的控制，因此对于经验不足的用户来说可能比较难上手。

荣誉奖：TailwindUI

Tailwind Labs 的官方组件库。非常好用，不过要 300 美元。

PS：在 Twitter 上关注我，了解科技热点
https://twitter.com/Apestein_Dev