Как избежать чрезмерных классов при внедрении темной темы в Tailwind v4.1?

Question

[Саман]

Имеется globals.css в моем NextJS (TS) проекте:

@import "tailwindcss";

:root {
  --background: #ffffff;
  --foreground: #171717;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
}

@theme {
  --color-primary: #ffffff;
  --color-primary-dark: #000000;
  --color-selected-primary: #f3f4f6;
  --color-selected-primary-dark: #151515;
}
 
@custom-variant dark (&:where(.dark, .dark *));

@font-face {
  font-family: "CourierPrime-Regular";
  src: url(../fonts/CourierPrime-Regular.ttf);
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: "CourierPrime-Regular", sans-serif;
}

Настроена функция переключения светлой/темной темы по классам. Сейчас использование классов выглядит примерно так:

<aside className="bg-primary dark:bg-primary-dark">...</aside>

Краткое объяснение: По дефолту стоит белый цвет (primary), а при dark устанавливается черный (primary-dark). Хотел спросить, есть ли возможность все объявить только как primary (дабы использовать только один класс в HTML теге), и уже в самом CSS менять его стили в зависимости какую тему выбрал пользователь?