Managing Custom CSS Color Variables with Tailwind CSS Tree-Shaking for Theme Management

[Besuf]

I'm looking for guidance on how to effectively manage custom CSS variables within Tailwind CSS while ensuring unused variables are removed in the production build. My project involves grouping color variables for theme management, but I encounter an issue where all variables in a grouped class are included in the final build, even if only some are used.

Current Setup
I have multiple CSS variables defined within a single utility class for easy theme switching:

.white {
  --red: #123412;
  --yellow: #123901;
  ...
}

In my React component, I apply this class to an element:

<div className="white">
  {/* Content */}
</div>

However, this results in all CSS variables from the .white class being included in the production build, regardless of whether they are used or not.

Desired Outcome
I want to keep my color variables grouped for easier theme management but ensure that only the necessary variables are included in the final build, leveraging Tailwind's tree-shaking capabilities.

Additional Context
Tailwind CSS version: "^3.4.1"
React version: "^18"
NextJs: "14.2.4",