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

Question

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

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

两者可以同时使用吗？

谢谢你。

Answer 1

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

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

但是，很可能你会遇到

normalize.css

的问题，它在

@tailwind base

中使用

Answer 2

选项 1：采用或重新创建课程

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

//样式.css

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

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

示例：

// style.scss

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

完整代码（Github Gist）

选项 2：集成 Tailwind

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

// tailwind.config.js

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

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

// 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 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

可能，

是。是否推荐，NO.

有很多类会与以下内容

矛盾 彼此例如

.容器（引导程序）
.集装箱（顺风）

.clearfix (B)
.clearfix (T)

这样的例子还在继续......

---

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

Answer 5

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

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

Answer 6

是否有像 bootstrap 这样建立在 tailwind 之上的自以为是的库，包含所有组件，如警报、网格、btns、卡片、折叠等。有时您不想离开 bootstrap 的舒适性，但同时想要 tailwind 实用程序

这正是我们想要的。终于找到了

https://tw-elements.com/

使用 Tailwind CSS 重新创建的 Bootstrap 组件，但具有更好的设计和更多功能

它有 AGPL 许可证，因此只要您的项目是开源的，您就可以免费使用它。