可以同时使用 Tailwind css 和 Bootstrap 4 吗？

Question

我的项目目前是使用 BootstrapVue 组件的 Vuejs（似乎使用 bootstrap 4 css）。

我正在尝试将 Tailwind css 用于新的自定义组件。

是否可以同时使用它们？

谢谢你。

Answer 1

选项 1：采用或重新创建类

如果您只需要一两个类，例如Tailwind 的颜色系统，您也可以复制它们。有些字符必须被屏蔽，例如：

// 样式.css

.hover\:text-blue-900:hover,
.text-blue-900 {
  color: #183f6d;
}

这就是我在项目开始时所做的，其中 bootstrap 是主要框架。 如果它应该有多种颜色和功能，您也可以使用 SCSS 快速构建它。然而，从长远来看，我认为这不是最好、最干净的解决方案。

示例：

// 样式.scss

(...)
@each $name, $hexcode in $tailwind-colors {
    .hover\:text-#{$name}:hover,
        .text-#{$name} {
            color: $hexcode
        }
    }
}

完整代码（Github要点）

选项 2：集成 Tailwind

但是，一旦需要添加更多功能，或者您想要将其构建得更干净，您可以在此处使用文档中提到的前缀，如Ostap Brehin所说。

// tailwind.config.js

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

可以通过禁用 preflight来删除标准化定义：

// tailwind.config.js

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

最好检查一下生成的 CSS 文件。

这是我的完整tailwind.config.js文件：

// tailwind.config.js

module.exports = {
    content: [
        './**/*.php',
        '../Resources/**/*.{html,js}',
    ],
    safelist: [
        'tw-bg-blue-800/75',
        {
            pattern: /(bg|text)-(blue)-(800)/,
            variants: ['hover'],
        },
    ],
    prefix: 'tw-',
    theme: {
        extend: {},
    },
    corePlugins: {
        preflight: false,
    },
    plugins: [],
}

Answer 2

您可以使用前缀解决类冲突

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

但是，很可能你会遇到一个问题normalize.css，用于@tailwind base

Answer 3

是的，您可以一起使用 Tailwind 和 Bootstrap。

但是，您需要对您的顺风车进行一些配置。首先是添加前缀，然后关闭预检。如果您不使用 Tailwind JIT，那么也请确保重要的内容为真。如果您使用的是 Tailwind JIT，那么您可以使用“!” 在上课之前，让这件事变得重要。例如“！tw-block”。

以下是 Tailwind JIT/CDN 的合适配置：

  <script>
    tailwind.config = {
      prefix: "tw-",
      corePlugins: {
         preflight: false,
      }
    }
  </script>

如果您不使用 CDN，请使用以下配置：

module.exports = {
    content: ["./**/*.html"],
    prefix: "tw-",
    important: true,
    corePlugins: {
        preflight: false,
    }
}

我已经写了一个完整的博客：https ://developerwings.com/tailwind-and-bootstrap-together/

Answer 4

只要 2 个库中没有名称冲突（我认为它们不是），它们就可以正常工作。

但我认为你不应该。因为它会破坏项目的统一性，并且会使维护变得更加困难。

Answer 5

可能，是的。是否推荐，否。

有很多类会相互矛盾，例如

.container (Bootstrap)
.container (Tailwind)

.clearfix (B)
.clearfix (T)

And the list goes on...

My advice would be to either stick with BootstrapVue or Tailwind. My personal preference, Tailwind.