Tailwind也出来很久了，也有不少人推崇使用Tailwind来让开发更快速，那为什么我选择使用Styled-component呢？不是因为既有专案底层无法改的问题，而是其他考量因素。

首先我们先科普一下这两个是什么：

什么是Styled-component?

Styled-components是一种CSS-in-JS库，用于在React应用中创建样式化的组件。它允许开发者将组件的样式与其逻辑紧密结合，使用JavaScript编写CSS样式，并以组件的形式应用这些样式。这样的方式使得组件样式更加模块化、可重用，并提供了更好的可维护性和灵活性。

styled-components.com/

如何评价Styled-component

我们可以看到，在开发上，他具备了CSSModule的特性，也同时具备Component的特性，当我们需要一个很小的Atomslevel组件时，可以直接定义出来，也能复用。

在除错时，首先我们会通过Chrome的开发者工具，查看出问题的组件位置并进行调试，例如调整CSS样式

然后再回到IDE工具中找到，这个出问题的地方并做出调整，又或者直接到IDE中直接通过热更新调试，但～有一个前提就是，我们需要可以快速的找到你需要更改的地方。

想像一下，如果你今天是团队中的成员，但这一个Code，不是你开发的。

我们可以很确定的是，App_Button-dorjRWfMnCty

我们直接看App_Button，意思就是这个组件他的位置在App>Button，所以我们可以直接搜寻App页面，找到底下的组件就行了。

什么是Tailwind?

Tailwind是一种流行的前端CSS框架，通过原子类（AtomicClasses）来构建样式。它允许开发者通过组合简单的类名快速创建样式，使得样式管理更加灵活和高效。

tailwindcss.com/

Tailwind还提供了一些有用的特性，如响应式设计支持、自定义配置、插件扩展等，使得它在各种项目中都能发挥出色的作用。许多开发者喜欢使用Tailwind是因为它可以帮助他们更高效地开发和维护界面，同时提供了高度可定制化的能力。

如何評價Tailwind

同样的，我们在同样的调试议题上评论，你可以看到上面图中的TailwindSample，其实我并不关注这个A标签，他的Style是什么，我关注的是他是代表什么？Menu的连结吗？还是文章Card中用的连结按钮?

想像一下，如果你今天是团队中的成员，但这一个Code，不是你开发的。

恩。。其实我看不出来，我需要配合画面，填入几个样式(例如边框)之后看画面有没有跟着我的异动而改变，才能找到(或是用ReactProfile除错工具)。

另外如果你的HTML页面并不是很个都拆的很小，会觉得很杂乱，一堆TailwindClassName在上面一坨坨，尤其是有响应式设定，并不简洁

總結

我觉得Tailwind考虑的是快速开发，像是如果不使用CSSINJS，直上BootstrapSCSSSCSS变数定义好，可以快速的开发出页面(虽然难免会遇到一些要客制的部分)，不考虑维护的问题的话，像是形象网站，不太会有后续修改的问题，或者做完就结案。

Tailwind感觉就是在这个部分在更进阶一点，让你甚至不用额外定义样式就可以完成页面(但我相信还是会有一些客制化的情况)。专注在同一个位置编辑，像是免洗筷的概念，所以更适合接案公司类型的一次性项目使用。

...

而Styled-component则相反，以元件的概念使用，可带入变数，开发时可能会比较繁复，每次都是另外客制CSS，但其实我们按照设计稿的情况，都是直接复制贴上样式(如zeplin、Figma)，然后删减调整样式表，没有办法专注在同一个位置编辑(styled的位置跟div的位置)

不过，因为较容易调试的特性，所以Styled-compont会比较适合产品类型的网站。

开发元件库又是另一回事，两者没差别

每个人的考量因素不同，这些都只是我个人开发到现在的理解，所以此文章仅供参考即可，最终还是依照自己需求来做选择，如果有我没有分析到的部分，希望可以交流:)

Ref

CSSIn2023

為什麼選擇Styled-component而不是Tailwind