避免与Tailwind实用程序类发生命名冲突的最佳实践是在tailwind.config.js文件上使用prefix选项。

module.exports = {
  prefix: 'tw-',
}

但是如果你只想为Tailwind类设置!important规则，并且你已经控制了css代码的顺序（tailwind类是最后一个），你可以在tailwind配置文件中将important选项设置为true。

module.exports = {
  important: true,
}

在选择仅设置important选项时，确保不覆盖tailwind类，请参见What is the order of precedence for CSS?

当您同时使用bootstrap和tailwind-css时，您将面临命名冲突，这将导致未定义的行为。
有两种方法可以克服。

• 第一种方法是在tailwind.config.css文件中使用prefix option

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

所以现在你可以在tailwind-css的类名称前使用前缀tw-，这不会破坏你现有的风格。

• 如果您在更改由添加tailwind-css到现有bootstrap项目引起的整体更改时遇到问题，则最好启动tailwind-css的preflight。

在他们的项目中默认使用印前检查，这是一组固执己见的基本样式。
这是建立在现代标准化之上的
Tailwind会自动将这些样式注入@tailwind base。
为了克服这个问题，从css文件中删除@tailwind base或添加preflight: false,

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

希望能有所帮助!

您可以使用前缀，随着最新更新的顺风，您可以这样做的CDN以及。
请参考此链接：https://developerwings.com/tailwind-and-bootstrap-together/