.btn {
  @apply font-bold py-2 px-4 rounded;
}

.btn {
  font-weight: bold;
  и тд
}

ну типа того, да. + у тебя палитра, которой ты придерживаешься и расширяешь её по мере надобности

Можешь подробнее рассказать? Я постоянно переопределяю/дополняю глобальные, и у меня бульма с тем же чейнингом ( button is-outlined is-danger ), ни разу проблем не видел.

вот палитра и возможно размеры - помоему этому место в переменных

и будет вполне норм

.btn {
  background: $color-blue-1;
  border-radius: 6px;
  border: 1px solid $color-blue-8;
  color: $color-blue-14;
  padding: 6px 12px;
}

.btn:hover {
  background: $color-blue-2;
  border: 1px solid $color-blue-9;
  color: $color-blue-15;
}

.btn.busy {
  background: $color-yellow-1;
  border: 1px solid $color-yellow-8;
  color: $color-yellow-14;
}

.btn.busy:hover {
  background: $color-yellow-2;
  border: 1px solid $color-yellow-9;
  color: $color-yellow-15;
}

есть у меня допустим вот такое в обычном scss файле

  .new-code-form :global(button:not(.busy):not(.bad)) {
    background: $color-green-1;
    border: 1px solid $color-green-8;
    color: $color-green-14;
  }

  .new-code-form :global(button:not(.busy):not(.bad):hover) {
    background: $color-green-2;
    border: 1px solid $color-green-9;
    color: $color-green-15;
  }

хм.. тут перебьёт потому что это nested селектор %)

а не потому что добавляются хеши

у меня свелтовская часть вставляется в уже готовую страницу с большей частью уже готовыми стилями.  некоторые мелочи достилизовывались (подравнивались) на свелтовской стороне, и в результате адаптивность (переопределения в медиазапросах в глобальной цсс-ке) поотваливались для свелтовских компонентов.  хотя всё работает для остального содержимого страницы.  
торопился, навтыкал стопицот !импотентов, был очень зол.

но если без глобала,

<button class="btn" on:click={() => setUserInfo()}>Новая</button>

то вот тогда будет как раз эта ситуация

  .new-code-form :global(button:not(.busy):not(.bad)) {
    background: $color-green-1;
    border: 1px solid $color-green-8;
    color: $color-green-14;
  }

  .new-code-form :global(button:not(.busy):not(.bad):hover) {
    background: $color-green-2;
    border: 1px solid $color-green-9;
    color: $color-green-15;
  }

А какая у тебя задача по расширению, что ты такой код написал? Передача по глобалу между компонентами?

ну у меня частный случай кнопки, она прост зелёная вместо синей %)

а кнопка элемент спрятана в компоненте который по промису меняет её вид

меня так то больше стало привлекать юзать какие-то базовые классы вне компонентов, и допиливать их в частных случаях вот такими переопределениями

ну и когда класс докинется допустим если использовать селектор .btn, то у тебя .btn.busy перебьётся

это когда кнопка не компонент а элемент в который ты класс просто дописал на котором есть стандартные стили

  .new-code-form :global(button:not(.busy):not(.bad)) {
    background: $color-green-1;
    border: 1px solid $color-green-8;
    color: $color-green-14;
  }

  .new-code-form :global(button:not(.busy):not(.bad):hover) {
    background: $color-green-2;
    border: 1px solid $color-green-9;
    color: $color-green-15;
  }

Ага, ясно.
Ну, я не могу не согласиться с чуваками из команды свелта, что этот твой кейс прекрасно решается css-переменными и лучше, чем с ним справляются глобальные классы.
Еще он решается добавлением класса .default с стейтом по умолчанию, который можно переопределять без этих костылей.
За такой css-код я бы отправлял в исправительную колонию.

А еще, что я делаю не так?

ты делаешь не так что там усиленные селекторы в компоненте, потому что стили скоупаные

а у меня сейчас стили не скоупаные

и как же переопределять default, расскажи
без этих костылей