What is the best approach for dynamic style that is coming from API?

[semet]

Dear Tailwind friends.
I am currently working on a project using tailwind v3 where the style is pre defined in the backend. The backend will return the style in the following formats:

{
"mobile_v2_header_transaction_deposit": {
      "background_color": "rgba(19, 219, 219, 1)",
      "background_image": "https://domain.com/someimage.png",
      "border_color": "rgba(246, 244, 251, 1)",
      "button_color": "rgba(15, 168, 168, 1)",
      "icon_color": "rgba(163, 11, 105, 1)",
      "style_type": "color",
      "text_color": "rgba(163, 11, 105, 1)"
    },
    "mobile_v2_header_transaction_recall": {
      "background_color": "rgba(14, 163, 11, 1)",
       "background_image": "https://domain.com/someimage.png",
      "border_color": "rgba(229, 228, 237, 1)",
      "button_color": "rgba(20, 248, 16, 1)",
      "icon_color": "rgba(237, 235, 248, 1)",
      "style_type": "color",
      "text_color": "rgba(200, 198, 209, 1)"
    }
}

the style_type is set based on user preference, it is either color or image. When the value is color, the background_color will take place, and if the value is image, the background_color will take place..

My current solution is to generate bunch of css variables for these pre-defined styles using a utility functions that generate something like:

--mobile-bg-color: rgba(19, 219, 219, 1)
--mobile-bg-image: url(https://domain.com/someimage.png)
and so on

and then create a custom class like:

.header-transaction-deposit {
     background-color: var(--mobile-bg-color)
     background-image: var(--mobile-bg-image)
}

as you can see, this works fine. But the down side is, there is over 200+ predefined styles that i have to turn into css variables.
I need a more tailwind way where i can consume the predefined style directly into tailwind utility class...

is this possible in tailwind v3? or is there any plugins that can help me out with this?