[Idea] - Arbitrary values with !important

[VicGUTT]

I've encountered a few situations in the pass where I needed an !important statement with Tailwind on exactly one element, and other times a few elements.
And in those cases my needs did not warrant setting the important config value to true.

These situation arises mostly when working with third party libraries where their CSS specificity beats that of Tailwind's.

So I'm thinking something like: !bg-primary, bg-primary!, bg-primary!important or to be consistent with the opt in arbitrary values syntax: bg-primary[!], could be a nice solution.

Any feedback appreciated :)

[alexcroox]

I have often longed for this for exactly the same reasons. I've found a workaround is to add a custom class to the element, apply the tailwind class you want to override with @apply, then it should allow you to override it back in the inline class for element.

<div class="custom-class">

.custom-class {
   @apply block;
}

then it can be used like:

<div class="custom-class flex">

(block/flex might be a bad example here if the specificity is already fine but you get the idea)

[VicGUTT]

Yes, I've also gone through similar length to get my specificity higher than that of the library. Even sometimes being almost the only custom CSS styles of the app. It's also annoying because then I'll have to think about how/where to name/put it.
That said, if this idea is deemed not suitable for Tailwind core, I don't imagine it being overly complicated to implement as a plugin.

We shall see ✌🏾

[adamwathan]

Yeah planning to add this as a core feature likely looking like !bg-black as that's the syntax we've used as an example in the docs for like 3 years.

[Rednegniw]

That would be a great addition

[sinnbeck]

@adamwathan Seems that the example !bg-black in the docs doesnt work with jit (worked before). Any way to work around this?

[adamwathan]

Added first class support for !bg-black syntax in core as of v0.1.15 👍