shurikenui/react 安装问题
tailwindshuriken

shurikenui/react 安装问题

记高颜值组件 shurikenui/react 安装过程中遇到的问题:tailwind 配置中 content 属性未配置全导致样式丢失

更新于 2024-06-23
1320

Shuriken UI 是前沿 UI 设计模板开发团队 cssninja 开发的是一套非常精美的设计系统。

shuriken.jpg
shuriken.jpg
在他们近期推出的 Tairoxpulse 这两套分别用 nuxtjs 和 nextjs 开发的 UI 模板中都使用到了这套设计系统。这两个产品以丰富的页面案例展示了一致而精妙美观的 UI 设计,深得我心。

xpulse 截图
xpulse 截图

更棒的是,这套设计系统是用 Tailwind CSS 这个 css 工具库实现的,这也是我一直在项目中实践的,这样就更方便开发中借鉴一些好的 UI 设计了。

之前在项目中就在使用他们所开源的基于 tailwindcss 封装的 css 样式库 shuriken-ui/tailwind,自己根据样式封装简单组件来用,但是效率很低,最近看到官方 github 账号下已经开源了进一步封装的 react 版本的组件库 shuriken-ui/react,想到解决了自己的心腹之患,今后能更方便地使用高颜值组件了,但是在项目当中安装了依赖之后,却遇到了一个很头疼的问题,卡了很久:按照文档安装之后,调试的时候却发现,编译后的结果缺少了很多 css 类名,导致组件样式失效,尝试了重新装包、安装旧版本等方法,都以失败告终。最后迫不得已把源代码拉下来看了一下,对比了代码库的 demo 项目和自己项目的差异之后才发现,是 tailwind 配置文件 tailwind.config.js 中配置的 content 属性缺少了 shuriken-ui 在 node_modules 中的组件库目录。

js
module.exports = withShurikenUI({
// mode: 'jit',
content: [
"app/**/*.{ts,tsx}",
"pages/**/*.{js,ts,jsx,tsx}",
"components/**/*.{ts,tsx}",
"node_modules/@shuriken-ui/react/dist/**/*.js",
],
// ...
})

原因可能是可能是由于 tailwind 构建时采用了 JIT 策略,导致组件库里的类名由于未配置目录而未打包进最终样式文件,导致样式失效。

这个问题其实也是使用 tailwindcss的时候常见的问题,tailwindcss3 当中默认使用了 JIT 这个特性,并且不支持禁用,在起新项目的时候,很容易因为忽略 content 的这个属性的配置而导致样式失效。