Don't consider the global important state in @apply

[thecrypticace]

Fixes #18400

In v3 when you used important: true it did not affect @apply. However, in v4 it does and there's no way to make it not. This is definitely a bug and would be unexpected for users coming from v3 who use @apply and important together.

Basically, the following code, along with the detected utility flex in source files…

@import 'tailwindcss/utilities' important;
.flex-explicitly-important {
  @apply flex!;
}
.flex-not-important {
  @apply flex;
}

… would output this:

.flex {
  display: flex !important;
}
.flex-explicitly-important  {
  display: flex !important;
}
.flex-not-important {
  display: flex !important;
}

But it's expected that @apply doesn't consider the "global" important state. This PR addresss this problem and now the output is this:

.flex {
  display: flex !important;
}
.flex-explicitly-important  {
  display: flex !important;
}
.flex-not-important {
  display: flex; /* this line changed */
}

If you want to mark a utility as important in @apply you can still use ! after the utility to do so as shown above.

[RobinMalfait]

I think this makes sense, just a few suggestions.

I tested this on Catalyst and Tailwind Plus to make sure the output is identical (especially because we don't use @apply there). And the output is the same 👍