Dynamically fetched primary colors about ui HOT 4 OPEN

<template>
  <div>
    <p class="text-primary">Nuxt UI Primary</p>
    <p class="text-custom-100/20">Custom Primary</p>
    <p class="text-custom-500">Custom Primary</p>
  </div>

</template>

<script setup lang="ts">
const primaryColor100 = '123 222 123'
const primaryColor500 = '255 255 0'

useHead({
  style: [
    {
      key: 'primary-color-override',
      innerHTML: `:root { 
        --custom-primary-100: ${primaryColor100};
        --custom-primary-500: ${primaryColor500};
      }`
    }
  ]
})
</script>

import type { Config } from 'tailwindcss'

export default <Partial<Config>>{
  content: [
    './pages/**/*.vue'
  ],

  theme: {
    extend: {
      colors: {
        custom: {
          50: 'rgb(var(--custom-primary) / <alpha-value>)',
          100: 'rgb(var(--custom-primary-100) / <alpha-value>)',
          200: 'rgb(var(--custom-primary) / <alpha-value>)',
          300: 'rgb(var(--custom-primary) / <alpha-value>)',
          400: 'rgb(var(--custom-primary) / <alpha-value>)',
          500: 'rgb(var(--custom-primary-500) / <alpha-value>)',
          600: 'rgb(var(--custom-primary) / <alpha-value>)',
          700: 'rgb(var(--custom-primary) / <alpha-value>)',
          800: 'rgb(var(--custom-primary) / <alpha-value>)',
          900: 'rgb(var(--custom-primary) / <alpha-value>)',
          950: 'rgb(var(--custom-primary) / <alpha-value>)',
        },
      }
    }
  }
}