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

Question

我的项目目前是Vuejs，使用了BootstrapVue组件（貌似使用了bootstrap4css）。

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

可以同时使用吗？

谢谢。

Answer 1

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

但我认为你不应该这样做。因为它会破坏项目的统一性，并且会增加维护难度。

Answer 2

可能，是。是否推荐，NO.

有很多类会与相矛盾彼此例如

.container (Bootstrap)
.container (Tailwind)

.clearfix (B)
.clearfix (T)

并且清单还在继续...

我的建议是坚持使用 BootstrapVue 或 Tailwind。我个人的喜好，Tailwind。

Answer 3

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

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

BUT，很可能你会遇到 normalize.css 的问题，它在 @tailwind base

中使用

Answer 4

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

如果您只需要一两个类，例如color system of Tailwind，您也可以复制它们。有些字符必须被屏蔽，例如：

// style.css

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

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

示例：

// style.scss

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

Full code (Github Gist)

选项 2：集成 Tailwind

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

// tailwind.config.js

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

规范化定义可以通过disabling 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: [],
}

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

Can use both Tailwind css and Bootstrap 4 at the same time?

vue.js

bootstrap-4

vue-component

tailwind-css