Add both !important & selector strategy for tailwind configuration

Question

I have got the CMS application with bootstrap, and embedding react application with tailwind css into it. There are clashes with both css framework util classes.

I enabled !important via tailwind configuration then have the below issue, Also tried with selector strategy via config as important: .tailwind-app, but still bootstrap !important rules override. I need to increase the specificity and add add !important to tailwind classes so that application will work without affected.

I don't want to use pre-fixing styles for tailwind because, there are some components loaded from my component library, in which I don't want to make changes https://github.com/tailwindlabs/tailwindcss/discussions/5080

user_9854149 · Answer

Built-in important modifier

You can make any utility important by adding a ! character to the beginning:

Output

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

https://tailwindcss.com/docs/just-in-time-mode#built-in-important-modifier

user_8205399 · Answer

In order to make the SASS compiler happy you need to use this syntaxe :

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

It put all the "@apply" line in "!important" on the output.

See there : https://github.com/tailwindlabs/discuss/issues/224

Add both !important & selector strategy for tailwind configuration

2 Answers