How to use !important in v4

[nathan30]

Hi,

In v3, when I use @apply directive in .scss file, I use #{!important} interpolation and it's working perfectly

Since v4, I now have the following error

✘ [ERROR] Cannot apply unknown utility class: !important [plugin angular-sass]

I search in the v4 docs, but didn't find anything similar to the v3 (https://v3.tailwindcss.com/docs/using-with-preprocessors)

Do you have any tips to keep the "important" tag in my @apply ?

Thanks

[wongjn]

You could apply the important modifier tag to each element:

.foo {
  @apply text-2xl! text-red-200!;
}

---

As an aside, Adam Wathan (creator of Tailwind) does seem to advocate avoiding @apply:

• https://twitter.com/adamwathan/status/1226511611592085504
• https://twitter.com/adamwathan/status/1559250403547652097

[suraj50000]

I am using wordpress astra theme (child theme)

But i want some area tailwind button
<button class="tw:bg-sky-500 tw:hover:bg-sky-700 ...">Save </button>
i am using prefix also
@import "tailwindcss" prefix(tw);

but is showing wordpress astra theme button css design

i want using !important in <button class="tw:bg-sky-500 tw:hover:bg-sky-700 ...">Save </button>

[wongjn]

You'd put an exclamation at the end:

-<button class="tw:bg-sky-500 tw:hover:bg-sky-700 ...">Save </button>
+<button class="tw:bg-sky-500! tw:hover:bg-sky-700! ...">Save </button>

[dawnerd]

This probably needs to be added to the docs. V3.x had a section on Important but V4 doesn't and it's very confusing when it changes but there's no mention of why.

[himanshu634]

What if I want to make all the classes important by default, line v3 configuration property named important: true

[wongjn]

You can add the important tag to the Tailwind import:

@import "tailwindcss" important;