shurikenui/react 安装问题

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

更棒的是，这套设计系统是用 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 的这个属性的配置而导致样式失效。