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.

[porobertdev]

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>

!bg-sky-700 also seem to work.

[wongjn]

Yep, that's for backwards compatibility with v3. However, v4 is putting the exclamation at the end.

[himanshu634]

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

[albanotoskasf]

@wongjn Thanks for this, but how would it work if I wanted to add a custom selector in front of every tailwind selector, for example instead of .text-black to be .custom-css-selector-classname .text-black ? Thanks in advance!

[wongjn]

You'd do:

@layer theme, base, components, utilities;

@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/preflight.css" layer(base);

@layer utilities {
  .custom-css-selector-classname {
    @tailwind utilities;
  }
}

[albanotoskasf]

Thanks @wongjn ! It seems the browser loads it like this: .custom-css-selector-classname { .text-black { //}}, instead of .custom-css-selector-classname .text-black{//} is it related to that or something else?

[wongjn]

They're the same thing. Tailwind uses the nested syntax in development but will flatten it in production.

[albanotoskasf]

Thanks @wongjn , for me it wasn't working fine because @layer had lower priority, I just used this instead:

@scope (.custom-css-selector-classname) {
    @tailwind utilities;
}

Now it is getting proper priority.

[sandercoffee]

Why change it to the end again? In v2 or something, it was at the end, then it moved to the front, and now it's back at the end. WTF… Create new things, don’t change what already works.