css 为顺风配置添加！important & selector策略

bbuxkriu 于 2023-05-08 发布在其他

关注(0)|答案(4)|浏览(273)

我已经得到了CMS应用程序与引导，并嵌入了react应用程序与顺风CSS到它。这两个css framework util类都有冲突。
我启用!important通过顺风配置然后有以下问题，也尝试了选择器策略通过配置作为重要：.tailwind-app，但仍然是bootstrap！重要规则优先。我需要增加特异性和添加添加！这对顺风类很重要，这样应用程序就可以在不受影响的情况下工作。
我不想在tailwind中使用pre-fixing样式，因为有一些组件是从我的组件库中加载的，我不想在其中进行更改https://github.com/tailwindlabs/tailwindcss/discussions/5080

css

来源：https://stackoverflow.com/questions/68527235/add-both-important-selector-strategy-for-tailwind-configuration

4条答案

按热度按时间

eivnm1vs1#

内置重要修饰符

您可以通过添加！字符开头：

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

https://tailwindcss.com/docs/configuration#important-modifier

赞(0）回复(0）举报 2023-05-08

w8f9ii692#

为了让SASS编译器满意，你需要使用以下语法：

@apply bg-transparent w-auto #{!important};

它把所有的“@apply”行都放到了“*！重要的 *”。
标签：https://github.com/tailwindlabs/discuss/issues/224

赞(0）回复(0）举报 2023-05-08

ar5n3qh53#

顺风

class="！flex”

赞(0）回复(0）举报 2023-05-08

62o28rlo4#

对于任意屏幕大小值，当您需要隐藏或显示某些内容时：
min-[950px]：！块

赞(0）回复(0）举报 2023-05-08

我来回答

css 为顺风配置添加！important & selector策略

4条答案

相关问题

热门标签

最新问答