A rule for preferred position of important modifier

[kachkaev]

TailwindCSS v3 docs suggest adding ! at the start of a class name:
https://v3.tailwindcss.com/docs/configuration#important-modifier

Important modifier

Alternatively, you can make any utility important by adding a ! character to the beginning:

<p class="!font-medium font-bold">
  This will be medium even though bold comes later in the CSS.
</p>

The ! always goes at the beginning of the utility name, after any variants, but before any prefix:

<div class="sm:hover:!tw-font-bold">

This can be useful in rare situations where you need to increase specificity because you're at war with some styles you don't control.

---

TailwindCSS v4 docs suggest adding ! at the end of a class name:
https://tailwindcss.com/docs/styling-with-utility-classes#using-the-important-modifier

Using the important modifier

When you really need to force a specific utility class to take effect and have no other means of managing the specificity, you can add ! to the end of the class name to make all of the declarations !important:

<div class="bg-teal-500 bg-red-500!">
  <!-- ... -->
</div>

.bg-red-500\! {
  background-color: var(--color-red-500) !important;
}
.bg-teal-500 {
  background-color: var(--color-teal-500);
}

---

v4 supports both variants, referring to ‘before’ as old / legacy: tailwindlabs/tailwindcss#13103

It’d be great to have a rule that auto-fixes !foo-bar to foo-bar! (and possibly vice-versa, if needed). It could be called important-modifier-position with a possible option to choose between legacy and recommended. The rule can help folks migrate to v4 and maintain consistency.

---

PS: Note that if a modifier is inserted before and prefix is configured, class names should be like my-prefix:!p-10 instead of !my-prefix:p-10.