如何同时使用 Tailwind CSS 和 Bootstrap 4？

Tailwind CSS 和 Bootstrap 4 都是著名的 CSS 框架，它们各有优点。如果您想同时使用两者，您可以按照以下步骤操作。

步骤：

1. 安装 Tailwind CSS 和 Bootstrap 4：

   npm install tailwindcss bootstrap
   

2. 配置 Tailwind CSS

   在项目的根目录下，创建一个名为 tailwind.config.js 的文件，复制以下代码并粘贴到文件中：

   module.exports = {
     purge: [],
     theme: {
       extend: {},
     },
     variants: {},
     plugins: [],
   }
   

   这个文件是用来配置 Tailwind CSS 的。您可以在这里配置您自己的颜色、字体、宽度、高度等样式变量。有关更多信息，请访问 Tailwind CSS 文档。

3. 配置 Bootstrap 4

   如果您使用的是 Sass，可以在您的样式文件中导入 Bootstrap 4 样式表。在您的 app.scss 文件中添加以下代码：

   // Import Bootstrap
   @import '~bootstrap/scss/bootstrap';
   

   如果您使用的是纯 CSS，您可以在您的 HTML 文件中添加以下代码：

   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css">
   

4. 启用 Tailwind CSS 和 Bootstrap 4

   在您的 CSS 样式文件中，您可以使用 @apply 指令向元素应用 Tailwind CSS 和 Bootstrap 4 样式。例如：

   .btn {
     @apply bg-blue-500 text-white;
   }
   

   这将向具有 btn 类的元素应用 Tailwind CSS 的蓝色背景和白色文本样式，以及 Bootstrap 4 的按钮样式。

   注意：如果您的样式表使用了很多的 @apply 指令，并且样式冲突，请使用更具体的选择器来为元素或类选择器应用样式。

5. 构建您的应用程序

结论：

使用 Tailwind CSS 和 Bootstrap 4 可以让您更快速地创建具有各种样式的网站和应用程序。 您可以通过按照上述步骤安装并配置它们来开始使用它们。

参考：

• Tailwind CSS 文档
• Bootstrap 4 文档