為什麼選擇 Styled-component 而不是 Tailwind
Tailwind 也出来很久了，也有不少人推崇使用 Tailwind 来让开发更快速，那为什么我选择使用 Styled-component 呢？不是因为既有专案底层无法改的问题，而是其他考量因素。
首先我们先科普一下这两个是什么：
什么是 Styled-component ?
Styled-components 是一种 CSS-in-JS 库，用于在 React 应用中创建样式化的组件。它允许开发者将组件的样式与其逻辑紧密结合，使用 JavaScript 编写 CSS 样式，并以组件的形式应用这些样式。这样的方式使得组件样式更加模块化、可重用，并提供了更好的可维护性和灵活性。
如何评价 Styled-component
我们可以看到，在开发上，他具备了 CSSModule 的特性，也同时具备 Component 的特性，当我们需要一个很小的 Atoms level 组件时，可以直接定义出来，也能复用。
在除错时，首先我们会通过 Chrome 的开发者工具，查看出问题的组件位置并进行调试，例如调整 CSS样式
然后再回到 IDE 工具中找到，这个出问题的地方并做出调整，又或者直接到 IDE 中直接通过热更新调试，但～有一个前提就是，我们需要可以快速的找到 你需要更改的地方。
想像一下，如果你今天是团队中的成员，但这一个Code，不是你开发的。
我们可以很确定的是，App_Button-dorjRW fMnCty
我们直接看 App_Button，意思就是这个组件他的位置在 App > Button，所以我们可以直接搜寻 App 页面，找到底下的 组件就行了。
什么是 Tailwind ?
Tailwind是一种流行的前端CSS框架，通过原子类（Atomic Classes）来构建样式。它允许开发者通过组合简单的类名快速创建样式，使得样式管理更加灵活和高效。
Tailwind 还提供了一些有用的特性，如响应式设计支持、自定义配置、插件扩展等，使得它在各种项目中都能发挥出色的作用。许多开发者喜欢使用 Tailwind 是因为它可以帮助他们更高效地开发和维护界面，同时提供了高度可定制化的能力。
如何評價 Tailwind
同样的，我们在同样的调试议题上评论，你可以看到上面图中的 Tailwind Sample，其实我并不关注 这个A标签，他的Style是什么，我关注的是他是代表什么？ Menu的连结吗？还是 文章 Card 中用的连结按钮 ?
想像一下，如果你今天是团队中的成员，但这一个Code，不是你开发的。
恩。 。其实我看不出来，我需要配合画面，填入几个样式(例如边框) 之后看画面有没有跟着我的异动而改变，才能找到 (或是用 React Profile 除错工具)。
另外如果你的 HTML 页面并不是很个都拆的很小，会觉得很杂乱，一堆 Tailwind ClassName 在上面一坨坨，尤其是有响应式设定，并不简洁
總結
我觉得 Tailwind 考虑的是快速开发，像是如果不使用 CSS IN JS， 直上 Bootstrap + SCSS + SCSS变数定义好，可以快速的开发出页面 (虽然难免会遇到一些要客制的部分)，不考虑维护的问题的话，像是形象网站，不太会有后续修改的问题，或者做完就结案。
Tailwind 感觉就是在这个部分在更进阶一点，让你甚至不用额外定义样式就可以完成页面 (但我相信还是会有一些客制化的情况)。专注在同一个位置编辑，像是免洗筷的概念，所以更适合接案公司类型的一次性项目使用。
...
而 Styled-component 则相反，以元件的概念使用，可带入变数，开发时可能会比较繁复，每次都是另外客制CSS，但其实我们按照设计稿的情况，都是直接复制贴上样式(如 zeplin、Figma)，然后删减调整样式表，没有办法专注在同一个位置编辑 (styled 的位置 跟 div的位置)
不过，因为较容易调试的特性，所以 Styled-compont 会比较适合产品类型的网站。
开发元件库又是另一回事，两者没差别
每个人的考量因素不同，这些都只是我个人开发到现在的理解，所以此文章仅供参考即可，最终还是依照自己需求来做选择，如果有我没有分析到的部分，希望可以交流 :)
Ref
转载自:https://juejin.cn/post/7257285697383645221