我构建 daisyUI 的旅程：为什么 Tailwind CSS 还不够？

在寻找最有效率的网站样式设计方法的过程中，有很多值得探索的地方。在这篇文章中，我将分享我构建 daisyUI（一个基于 Tailwind CSS 之上的组件库）的旅程。

早期

大约 15 年前，我第一次开始接触 Web 开发，从一开始，CSS 就是我最喜欢的部分。我喜欢以不同方式设计相同内容的能力。我对 CSS 的强大功能以及它如何通过几行代码改变网站的整体外观和感觉感到惊讶。

那时还没有构建工具，也没有 CSS 预处理。人们为小型项目编写内联 CSS，如果样式很多，他们会使用原生的.css文件。

我也在使用原生 CSS。从页面顶部开始，向元素添加类名，然后为这些类编写样式。这非常有趣，我很享受。然而，随着项目变得越来越大，它开始失控，难以维护。那时，没有人谈论 CSS 架构以及如何编写可维护的 CSS。所以我只是尽力保持它的整洁和有条理。

尝试 CSS 库

随着 CSS 的发展，人们开始越来越多地使用它，他们意识到有一些通用的模式他们一遍又一遍地使用。因此，他们开始创建方法和库，以使 CSS 更易于维护。

早期的 CSS 库开始出现。 Blueprint、960.gs、YUI、Bootstrap、Foundation 等。

• 像Blueprint这样的库为 HTML 标签提供了默认样式，并提供了一些类名来设置元素的颜色或位置。如今，我们称它们为实用工具类。
• 像960.gs仅提供网格系统，以使创建布局更容易。
• 像Bootstrap或YUI提供了一组组件，如按钮、选项卡等。

这些库变得非常流行，人们开始越来越多地使用它们。但是，我很难自定义它们。如果不覆盖大量样式，我就无法更改组件的外观和感觉。我在几个项目中使用过它们，但我总是在为我的下一个项目寻找更好的解决方案。

尝试用 CSS 设计方法论解决问题

我找不到一个可以用于我所有项目的 CSS 库，因为我希望每个项目都有新的设计。因此，我没有依赖 CSS 库，而是为每个项目编写原生 CSS，但每次我都试图使其更易于维护和自定义。

有一些 CSS 编写方法论，如 OOCSS、ACSS、SMACSS 和 BEM 来解决这个问题，但我总是发现自己在一种方法论跳到另一种方法论，或者将它们混合在一起。这些方法论的一些严格规则对我不起作用，我总是在尝试寻找更好的 CSS 编写方式。

使用 CSS 预处理器完善样式

Less和Sass是我使用的第一批 CSS 预处理器。有了它们，我终于能够过度设计我的 CSS，以使其更易于维护。我尝试了许多结构来组织我的 CSS，但最终当项目变得更大时，它总是难以维护。

我基本上是将我的 Sass 文件从一个项目复制/粘贴到另一个项目，然后覆盖它们以更改颜色和设计细节。我曾尝试创建一种可以用于我所有项目的单一 Sass 架构，其中每个项目都可以有自己的设计。但我始终无法使其工作。组织一个多用途 CSS 架构以满足我所有项目的所有需求太复杂了。

回到 Bootstrap 的牢笼

然后我尝试在 Bootstrap 之上构建一个可自定义的主题，在那里我可以更改设计细节而无需覆盖大量样式。那个项目也没有进展顺利。与 Bootstrap 的默认样式作斗争并使其看起来像你想要的样子非常困难且耗时。

Tailwind 来拯救

当我第一次看到 Tailwind CSS 时，它引起了我的注意。它是一个 CSS 框架，不提供任何默认样式。它只提供实用工具类，以使你的网站样式设计更容易。这是一个使事情更容易自定义的好主意。我开始在一些项目中使用它，我对它很满意。

为每个 CSS 规则提供实用工具类的想法很棒。最后，我有一个完全可自定义的 CSS 框架，可以用于我的所有项目。我能够为多个项目使用相同的 HTML，然后更改一些颜色和设计细节，使其看起来不同。

但仅使用实用工具类很慢且臃肿

然而，像其他人一样，我对每个项目和每个页面的每个元素都必须使用的类名数量感到不满意。在某个时候，我为每个组件（按钮、输入框、卡片等）设置了理想的类名，并且我将完全相同的类名复制到每个项目中。这很费力，我对此并不满意。

实用工具优先，而非仅实用工具

我需要一种更快更轻松的方式。我需要为按钮自定义的只是颜色、边框半径和大小。我不想每次都为按钮编写所有类名。我想要一个像 Bootstrap 一样简单的.btn类，但具有自定义它的能力。

我开始制作一个 CSS 文件，并将我所有的默认样式放在@apply指令中。这样，我就可以简单地使用btn类，然后使用bg-*实用工具类对其进行自定义。这好多了。我的代码变得更简洁，我能够更快地开发我的项目！

现在我拥有了使用 Tailwind CSS 实用工具类进行自定义的能力，以及 Bootstrap 的易用性。我对它很满意，并且我将其用于我的所有项目。

daisyUI 的诞生

我一直在我的所有项目中使用我的@apply集合，它运行良好。我决定将其作为一个库发布，以便其他人也可以使用它。我必须为它找到一个名字。我正在寻找一个简短的名称，可以代表成长和漂亮的想法。最后我选择了 🌼 daisyUI。它简短、易于记忆，并且这个名称在 NPM 上可用。

我开始将其作为一个副项目来做。我使用了 Tailwind CSS 的插件 API，使其尽可能易于使用。对于 0.x 版本，我从一些组件开始，然后我向其中添加了越来越多的组件。最后，它已准备好在实际项目中使用。随着 1.0 版本的发布，我收到了来自社区的大量反馈，并且我能够在每个版本中改进它。每次添加新组件时，我都试图使其尽可能可自定义。我试图使其易于使用且易于自定义。

我扩展了 Tailwind CSS 颜色名称，以使所有 daisyUI 组件默认可主题化。我想尽可能容易地更改组件的颜色，因为对我个人而言，使用 daisyUI 制作的网站看起来彼此不同非常重要。这要归功于 Tailwind CSS API，我才能够使其工作。现在，daisyUI 不仅提供了一组组件，还提供了将颜色应用于所有组件的主题。

如果仅用 CSS 就能实现样式，就应该仅用 CSS 实现

对我来说，daisyUI 作为一个 CSS 组件库，不依赖任何 JavaScript 库非常重要。我为可以使用纯 CSS 实现交互的组件提供了样式，但像日期选择器等内容不是 daisyUI 的一部分。我想尽可能保持简单，让人们使用他们最喜欢的 JavaScript 库来处理交互式组件。很高兴有很多无头 JavaScript 库，并且它们中的大多数都与 daisyUI 兼容。你可以简单地使用 daisyUI 类名或颜色 CSS 变量来设置它们的样式。

两全其美

我对 daisyUI 很满意，并且我将其用于我的所有项目。它允许我为每个项目创建一个新的设计，并且可以轻松自定义组件的外观和感觉。

我将 daisyUI 视为两全其美。组件类用于速度，实用工具类用于自定义。

现在我拥有了 Tailwind CSS 的自定义能力和 Bootstrap 的开发速度。我从未能够使用任何其他 CSS 库做到这一点。我很高兴我能够找到一个适合我的解决方案，并且我很高兴与社区分享它。

谢谢！

我要感谢所有使用过 daisyUI 并提供反馈的人。我很高兴我能够帮助你完成你的项目。我也感谢所有为 daisyUI 做出贡献的人以及所有捐款支持该项目的人。

目前在GitHub上有 130 位贡献者，在Open Collective上有 60 位财务支持者。没有你们的支持，daisyUI 是不可能实现的。感谢大家！💚