vue プロジェクトで定義済みの tailwind css を使用しています。
<p class="bg-white text-black focus:text-red focus:bg-white-2 dark:text-white dark:bg-black dark:focus:bg-black-2 dark:focus:text-yellow">some text</p>
<p class="bg-white text-black focus:text-red focus:bg-white-2 dark:text-white dark:bg-black dark:focus:bg-black-2 dark:focus:text-yellow">some text2</p>
<p class="bg-white text-black focus:text-red focus:bg-white-2 dark:text-white dark:bg-black dark:focus:bg-black-2 dark:focus:text-yellow">some text 3</p>
<p class="bg-white text-black focus:text-red focus:bg-white-2 dark:text-white dark:bg-black dark:focus:bg-black-2 dark:focus:text-yellow">some other text</p>
<p class="bg-white text-black focus:text-red focus:bg-white-2 dark:text-white dark:bg-black dark:focus:bg-black-2 dark:focus:text-yellow">more texttttttttt</p>
ご覧のとおり、タグごとに、この複数のクラスをすべて入力する必要があります。私が欲しいのは、変数クラスをこのようなクラスで動作させる方法があるということです
<p class="grouped-class">text</p>
<p class="grouped-class">text 2</p>
<p class="grouped-class">text 3</p>