Как сделать кастомный класс !important в Tailwind?

Question

[non_null]

Подскажите, пожалуйста, как в Tailwind сделать кастомный класс с помощью !important.
Задаю классы таким образом:

@layer base {
  .h2-medium {
    @apply text-2xl-short font-medium;
  }

  .h3-medium {
    @apply  text-xl-short font-medium;
  }

  .p1-regular {
    @apply  text-xl font-normal;
  }

Вариант с добавлением ! как с нативными тайлвайнд классами не работает:

<p className={'!h2-medium'}>Text</p> // not working  :(

Дайте на водочку плиз :)

Answer 1

[strelok011]

пример scss
@apply bg-transparent #{!important};

Comments

[non_null]

получается что он по дефолту уже будет important? а есть вариант делать это только в случае необходимости?

[strelok011]

Вообще говоря практика управления состоянием сложилась такая, что у элемента нужно менять стили комбинацией классов. Случаями необходимости нужно управлять меняя набор классов.

Т.е. заранее определены в стилях несколько классов, в разметке они появляются только при необходимости (менять набор классов с помощью js, или понимать что только в этом конкретном случае нужно на постоянно основе прописывать несколько классов на тег).