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

[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.