tailwindcss important

/* 使用 !important 在 Tailwind CSS 中 */

/* 默认情况下，Tailwind CSS 不会自动为样式添加 !important。如果你需要确保某些样式优先级更高，可以使用 important 关键字。*/

/* 示例 1: 使用 @layer 和 important */
@layer utilities {
  .custom-text-color {
    color: red !important;
  }
}

/* 示例 2: 直接在类中使用 important */
.text-red-important {
  @apply text-red-500 !important;
}

/* 示例 3: 使用配置文件中的 important 选项 */
/* tailwind.config.js */
module.exports = {
  important: true, // 全局启用 important
  theme: {
    extend: {},
  },
  plugins: [],
}

解释说明：

1. 示例 1: 使用 @layer 定义一个自定义的 utility 类，并通过 !important 确保其优先级高于其他样式。
2. 示例 2: 使用 Tailwind 的 @apply 指令将现有的 Tailwind 类应用到自定义类中，并通过 !important 提高优先级。
3. 示例 3: 通过修改 Tailwind 的配置文件 (tailwind.config.js)，全局启用 !important，这样所有生成的样式都将带有 !important。

如果你不需要这些功能，建议谨慎使用 !important，因为它可能会导致样式冲突和维护困难。