css - WebPack / Tailwind CSS の @apply ディレクティブを複製して SASS の @extend から遠ざける方法

Question

私は、ITCSS と Tailwind の間のどこかに位置する内部 CSS の「フレームワーク」/方法論に取り組んでいます。

多くのユーティリティ クラスを使用しますが、実際のクラス名が長くなりすぎて、独自のクラスに抽出したい場合があります。

疑似例を次に示します。

<button class="p-2 bg-primary elevate-1">Click Me</button

私がしたいこと：

.btn {
    @extend .p-2;
    @extend .bg-primary;
    @extend .elevate-1;
}

@extend は避けるべきであることはわかっているので、そのメソッドを使用したくありません。

問題なく @extend を使用できる webpack プラグインはありますか?

または、Adam Wathan が @apply ディレクティブを作成した方法を知っている人はいますか: https://tailwindcss.com/docs/extracting-components/#extracting-utility-patterns-with-apply

ドキュメントから取得すると、彼はこれを行うことができます：

.btn-blue {
    @apply bg-blue text-white font-bold py-2 px-4 rounded;
}

これは彼が書いたSASS関数ですか?もしそうなら、同様の作成方法に関する情報はありますか?

ありがとう。