我们即将启动一个使用 Tailwind 进行样式设计的 Next.js 项目。我们对这两种技术都相当陌生，但我们已经开始将 UI 整合在一起，到目前为止一切顺利。然而，我们在造型上看到了很多重复。例如，每个文本框都应用了相同的 Tailwind 样式集。
为了减少样式的重复，我认为我们有两个选择：
我的问题是，将文本框分解为组件是否太细粒度了？我正在关注事情可能会变得更加复杂的地方 - 例如支持显示/隐藏密码选项、输入掩码等，并且该组件可能会变得非常重。
我倾向于答案是顺风中的自定义样式，但我想询问其他人的意见。
提前致谢。
您可以在 next.js 中做任何您想做的事情，并注意“您收到的每个答案都是来自其他开发人员的个人建议，并且可以完全可选”。
对我来说：
每当我想要分离代码来创建可重用组件时，我都会为按钮、输入以及与我们的设计系统相关的所有内容创建一个 UI 目录。之后，我将管理它们所需的道具，以及我需要在另一个地方处理以使用该组件的额外选项。
在我看来，您不需要为设计中的每个元素创建自定义组件。如果是公共元素，则创建一个组件。如果不是，只需在您需要的任何地方使用它即可，并如此简单地创建一切。
我喜欢顺风。它是创建 UI 的好工具。但现在我不直接使用它。因为你需要把它放在任何地方的类！我更喜欢使用功能强大的 UI 框架。例如，在我看来，Chakra UI 是一个完全可定制、功能强大且简单的工具，我可以使用它。它非常简单，使我的项目变得很小。您不需要将 tailwind 类放入组件中，只需调用您需要的组件，在配置中配置它即可！完成了。您可以在 Chakra 的组件中更改任何您想要的内容。
在我看来，如果你在react项目中重复任何事情，它可以用更好的方式处理。只需找到您拥有的最佳选择即可。如果您需要创建自定义组件，请执行此操作。如果您需要在一个地方处理某些东西，请不要这样做！如果您有一个函数在多个地方都需要它，请为其创建一个自定义挂钩。等等...