TailwindCSSでクラス名を一つにまとめる方法

やりたいこと

下のボタンみたいに共通して使うTailwindCSSのクラス名を”white-button”みたいなクラス名にまとめたい

<button class="border p-2 mt-2 w-36 rounded-full border-slate-300">ボタン</button>

まとめ方

適当なCSSファイルを用意

.white-button{
    @apply border p-2 mt-2 w-36 rounded-full border-slate-300;
}

@applyに続けてTailwindCSSのクラス名を書くことで一つのクラス名にまとめられます。