Tailwind CSS 打破现有样式

Question

当我将 Tailwind 添加到 React 项目时，它打破了现有的样式。

我希望只使用 Tailwind 类（如mb-3）作为快捷方式。
我没想到它会覆盖现有的样式，比如将按钮背景更改为透明。

我做错了吗？或者 Tailwind 是否故意覆盖样式？

编辑：

这就是我所说的：（来自node_modules\tailwindcss\src\css\preflight.css）

当我排除基础时，问题就消失了，即：

//@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

编辑2：

找到解决方案了！

module.exports = {
  corePlugins: {
    preflight: false,
  }
}

Answer 1

当您同时使用bootstrap和tailwind-css时，您将面临命名冲突，这将导致未定义的行为，

为了避免这种情况，请在文件中使用前缀选项tailwind.config.js

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

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

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

module.exports = {
  important: true,
}

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

扩展答案：

感谢阿西米利，

Tailwind-Css在其项目中默认实现Preflight ，这是一组固定的基本样式。

这是建立在现代标准化之上的

Tailwind 会自动将这些样式注入到@tailwind base.

因此，要克服这个问题，请@tailwind base从 css 文件中删除或添加preflight: false,

module.exports = {
   corePlugins: {
      preflight: false,
   }
}

希望能帮助到你！