在同一个项目中使用 Material Ui 和 Tailwind 是一个好习惯吗

Question

我正在将 next.js 与 tailwind css 一起使用，并且我在项目中需要一些现成的组件，这样我就可以节省时间，因为我使用了 Material-ui。我的应用程序工作正常，但我收到一条警告消息。如果“是”（意味着如果两者的组合不会影响项目的性能或将来的任何其他问题），是否可以在同一个项目中使用这两种技术（material-ui 和 tailwind css）？删除下面显示的警告消息

Answer 1

这是好的做法吗？

绝对不是，您将面临许多命名冲突，这会给编译器带来许多混乱，并且优先级会不寻常

但你能做到这一点吗？

是的你可以 ！！

为了避免命名冲突，请在文件中使用前缀选项tailwind.config.js

// tailwind.config.js
module.exports = {
  prefix: 'tw-',    Use your desired prefix 
}

tw-因此，现在您可以在 tailwind-css 类名之前使用前缀，这不会破坏任何现有样式。

笔记

如果您希望 tailwind 类比任何其他 css 样式获得更高的优先级，您可以将important 选项设置为 truetailwind.config.js

module.exports = {
  important: true,
}

额外的

要了解 CSS 优先级，请遵循CSS 的优先级顺序是什么？