Properties always has !important when important is set to true and using focus:*

[themustafaomar]

There is something I believe it shouldn't behave like this
I made a component called .form-control in a separate file, when applying focus properties like this, every single property takes !important flag:

@layer components {
  .form-control {
    @apply py-2 px-4 block w-full rounded-md border border-gray-300 shadow-sm focus:outline-none focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50;
  }
}

This applied to focus state as well:

1. It's important to know that this is happening only if I set important to true in tailwind.config.js.
2. And when I remove focus:* properties everything working well.

Currently, I'm rolling back to the old way and it's working perfectly.

@layer components {
  .form-control {
    @apply py-2 px-4 block w-full rounded-md border border-gray-300 shadow-sm;
  }
  .form-control:focus {
    @apply outline-none border-indigo-300 ring ring-indigo-200 ring-opacity-50
  }
}

Have I misunderstood something or this is a bug?

Link to a minimal reproduction:

https://github.com/themustafaomar/tailwind-v2-apply-is-weird

[adamwathan]

Hey! This is likely a bug, we will take a look 👍🏻

[RobinMalfait]

Hey! This will work in the next version of tailwind.

Relevant PR: #2824

---

Wanted to verify with your exact setup, here is what a test looks like:

(Didn't want to create a dedicated test for your scenario since it is redundant, but wanted to verify in case something else was still missing.)