chakra是否有必要结合tailwindcss

前言

有个静态页面项目， 使用的是 next.js@10.2.3, 当初 UI 选择的是 chakra@1. 最近有个页面， 想要自定义程度高一点。 于是想到了 tailwindcss。 但是 chakra 本身就是带有样式的组件了， 两者结合起来，是否有必要， 我们来看一看。

如何选择 chakra 和 tailwindcss

我们首先看看官网是怎么对比的：Comparison - Chakra UI

  • Tailwind CSS：CSS 框架，提供原子化的 CSS 类来帮助您样式化组件，让您处理诸如可访问性、组件组合、键盘导航、样式覆盖等众多其他事项。
  • Chakra UI：一个精心创建的 React 组件库，具有 Tailwind 的所有样式优势，并负责处理所有细节。
  • 如果是对 css 比较熟悉，有设计美感的人，可以使用 tailwindcss 更好。
  • 如果是前端开发，使用组件较多的人，还是使用 chakra 比较好。

另外一个 issue: Tailwind integration · Issue #634 · chakra-ui/chakra-ui, chakra 的创始人也其中参与了讨论：

  • 他看法就是可以一起用， tailwindcss 就是增加了一些 class.

chakra 的 props 是怎么设计的？

Design Principles - Chakra UI

通过把 css-in-js 那种写法转换成 props 设计，Style Props - Chakra UI

一定需要结合 tailwindcss， 我们需要注意什么？

从上面的选择看得出来，使用好 Style Props - Chakra UI 就能灵活的定义 UI 了。所以我不折腾了， 就打算用 chakra 了。但我们还是可以看看， 两者结合起来的时候， 需要注意什么。

prelight 的样式冲突

不使用 tailwindcss 的 base 样式，而是交给 UI 组件去统一， 这样 tailwindcss 的作用就是提供封装好的 class， 用于快速开发。

潜在的 class 冲突

theme 的冲突

使得 chakra 能够获取到 tailwindcss 配置的 theme， 从而能够使用 tailwindcss 的颜色配置。issue

在 emotion 中使用 twin.macro 实现 tailwindcss 的样式

把配置的复杂度又提升了一个 level.

结束语

既然用了 ChakraUI , 就符合他的那套模式，通过 style props 控制，主题样式，可有类似 tailwindCSS 的配置方案。和第三方组件结合的话， 也可使用 emotion 作为样式书写的工具。

另外 tailwindCSS 还是特别灵活的，上手难度不大，但用好的曲线还是比较陡峭的。最后我再推荐一个 UI 项目， 是 headless + tailwindcss 的结合，shadcn/ui， 值得试试。