tailwindcss 与 daisyUI

tailwindcss 是一款原子化的 css 工具库（框架）,可以无需书写 css 就可以快速构建网页。有一些组件使用 tailwindcss，构建出了非常酷炫的 UI，比如headlessui，确实是非常精美的 UI 库。

第一次接触 tailwindcss 应该还是在 20 年，那时候也没有想过会有那么大的争议，从我自己的角度来说，我自己也会用 css 预编译或者初始化一些常用的 class，比如 margin、padding、font-size、w-full、w-half 等，在一些简单的样式可以直接使用，只是没有那么细的粒度。

tailwindcss 的 github 的活跃度和 npm 下载量都非常高，原子级别的细粒度，争议的点：

• 标签使用 class 过长，不习惯
• html 标签可读性变差一些（个人觉得可读性差很多）
• 维护性可能也会降低一些（十几个 class 的样式，我有点看花眼）
• 需要一点学习成本，前期不熟悉，要一直去搜索，不过配上插件是挺快的

存在的几个小问题：

• 样式覆盖问题，样式是由样式表中的 class 决定，不是 class 里面的顺序
• 编译的时候引入 PurgeCSS（为了减少 css 的体积）可能会把有用的样式删除，因为 tailwindcss 并不能动态执行

优点也很多：

• css 体积大大减少（官方特地提到的一个优点，HTML 也会增大一些，HTML 增大应该比 css 变小要小）
• 可定制化高，非常自由
• 不需要再想 class 命名
• 响应式
• 约束性，虽然自由，但是也提供了约束性
• 良好的封装支持，常用的组件样式可以使用@apply 封装
• 语义化，tailwindcss 提供的样式大部分都是语义化的，记忆成本没那么高
• ......

对于粒度的划分，HTML 大致分为四个：

• style 内联，把样式都用 style 内联去写，是最细的粒度
• 多个 class，tailwindcss 级别，class="class1 class2 class3"
• 一个 class 解决，class="button"
• 组件

style 内联我肯定是第一个反对的，剩下的三个，各有利弊吧，无非就是约束性和自由度的取舍。tailwindcss 自由度够高，又提供复用封装，在我看来是完美的。但是，对公司来说，就得提供一套完全的组件样式，然后投入一定的成本去定制属于自己的组件 UI，包括那些复杂的工具类组件，tree、timepicker 等。也有库提供了一些 apitailwind-elements

说句实话，开发过的大部分项目，UI 都是参考了 element、antd 等流行的 UI 组件库，而且一些组件是真的开箱即用，如果只是 input、button、select 等，很容易就封装了，但是一些 swiper、transfer、tree、dialog 等，涉及交互的，要自己封装一遍，是真的有难度，时间成本也真的挺高的。如果使用了 UI 库，又使用 tailwindcss 的基础样式，基础样式由组件提供，一些特殊一点的由 tailwindcss 提供。或者说，大神们使用的场景，不是我理解的场景？

因为自己没有实践，在看了吹爆 tailwindcss 的项目之后，觉得对于维护还是有一定的成本，太多超过十个 class 的样式，不知道是否有一些规范，比如 class 超过多少个就自定义 class 解决。当用了一些 scss 等，也很容易自定义一些基本的样式 class。也有人说用了tailwindcss还用apply去封装，属于四不像，我也不知道是对还是错。

我自己觉得，当用了tailwindcss的时候，没必要因为用了，就不自定义自己的class，我们完全可以用tailwindcss进行一些便利的操作，然后配合自定义class，使得确实是一个标签太多的class看起来更美观一些。不需要像那些说的，用了tailwindcss就摆脱自定义class。

往期有文章《vite 新建 vue3 项目及安装插件笔记》有说了怎么安装 tailwindcss 和使用。daisyUI是使用 tailwindcss 构建的 UI 库，可以官网看一下，确实是有点酷炫。

daisyUI 为 Tailwind CSS 添加了类名以支持所有常用的 UI 组件。也可以用 tailwindcss 直接修改，而且高度可定制，自定义各种主题。看了一下，确实不错，虽然有些组件不太好看，比如 select，另外就是也是没提供那些涉及功能性的组件，总体来说可以用。

其实代码是否优雅，取决于写代码的人，不在于插件、框架，所以使用tailwindcss存在的那些问题，肯定也是有很好的解决方式，只是还没get到。