为顺风配置添加 !important 和选择策略答案

【问题标题】：Add both !important & selector strategy for tailwind configuration为顺风配置添加 !important 和选择策略
【发布时间】：2021-10-02 05:41:46
【问题描述】：

我已经获得了带有引导程序的 CMS 应用程序，并将带有尾风 css 的反应应用程序嵌入其中。与两个 css 框架实用程序类存在冲突。

我通过顺风配置启用!important，然后出现以下问题，还尝试通过配置选择器策略作为重要：.tailwind-app，但仍然引导！重要规则覆盖。我需要增加特异性并将 add !important 添加到顺风类中，以便应用程序可以正常工作。

我不想为顺风使用预修复样式，因为我的组件库中加载了一些组件，我不想在其中进行更改 https://github.com/tailwindlabs/tailwindcss/discussions/5080

【问题讨论】：

【解决方案1】：

内置重要修饰符

您可以通过添加 ! 使任何实用程序变得重要字符到开头：

<button class="!bg-green-500">Hello</button>

输出

.\!bg-green-500 {
    --tw-bg-opacity: 1 !important;
    background-color: rgb(34 197 94 / var(--tw-bg-opacity)) !important
}

【讨论】：