xiaohanyu

@abc1310054026 #72

恰恰相反，我个人认为如果工程师要写出一个“不丑”的页面，最好不用用 tailwind 这种约束性比较弱的方案，还是找成型的更高级一些 UI 库比较好一些。

tailwind 太自由了，也就是比裸写 CSS 高了一小档，个人自由发挥很容易就写出“奔放”过头的页面和设计，当然不可否认，tailwind 确实是有很多优秀的 template 可以参考。

@PluginsWorld #65

对的，是这样的，看上去非常美好，但是如果你要统一尺寸的 unit ，或者 color pallete ，用 tailwind 这种 h-[xxxPx] 的写法，丢失了 TypeScript 中的类型信息，后续修改维护其实还是非常麻烦的。

我个人认为，tailwind 其实是给库的作者使用的，绝大多数人其实也没有用 tailwind 重新写一套组件库的必要。

普通产品开发，用一套成型的组件库，加上 tailwind 适当修饰一下，可能是一个比较好的折衷的办法。

@abc1310054026 #62

class name 这个，用 CSS in JS 其实可以缓解不少了。

tailwind 的主要问题在于，如果重度使用，完全从头自己写组件库，其实维护性是蛮的，一个 `div` 几十个 class ，debug 起来其实蛮烦的，比如这种官方的例子，很难说是维护性很好：

```
<div class="sm:col-span-3">
<label for="last-name" class="block text-sm/6 font-medium text-gray-900">Last name</label>
<div class="mt-2">
<input type="text" name="last-name" id="last-name" autocomplete="family-name" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm/6">
</div>
</div>

<div class="sm:col-span-4">
<label for="email" class="block text-sm/6 font-medium text-gray-900">Email address</label>
<div class="mt-2">
<input id="email" name="email" type="email" autocomplete="email" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm/6">
</div>
</div>
```

@abc1310054026 #59

大部分 CSS 的 UI 库应试都是以 4px 为基础单位的吧？我有用过 taillwind ，但是觉得 tailwind 还是有一些别的问题，最终还是放弃了。

@PluginsWorld #47

其实大可不必自己去调试试验出一组颜色，网上有很多 color palette css generator ，选一个顺眼的克制使用，就行了。

Refactoring UI 是本不错的书。

我个人觉得，工程师做设计，太花哨的就不要想了，做到简洁、归整就是胜利，主要的要点还是要克制：

1. 不要用太多的颜色
2. 4px 做为一个基础的 unit ，所有的尺寸尽量以这个为基础，4px/8px/16px/24px/32px 这种
3. 网页上的元素，尽量对齐，善用 grid
4. 适当学习下字体、排版知识

我个人基本上就是按照以上几条从头到尾完成了自己产品的所有设计： https://ppresume.com ，供参考哈。

早年间 qingcloud 有个前端工程师的分享蛮不错的： https://speakerdeck.com/imdonkey01/qian-duan-gong-cheng-shi-ru-he-jian-gu-she-ji-gong-zuo

@gogogo1203 我实际上用的是 react-pdf-viewer 来显示的 PDF ，是支持自己指定 character map 的： https://github.com/react-pdf-viewer/react-pdf-viewer/issues/107#issuecomment-643749966 ，然后就可以显示 CJK 了。

但是 react-pdf-viewer 这个库也有一些问题，最近可能不怎么维护了，另外就是 bug 也有点多。

很不错很不错

reddit 上发一些帖子讲一些故事，效果还是不错的。