Hey guys!

I'm using Nextjs 13 with the App directory. I would like to extend my default Tailwind theme with a couple of colors that should get their value from global CSS variables, like this:

  theme: {
    extend: {
      colors: {
        primary: 'var(--color-primary)',
        accent: 'var(--color-accent)',
        primaryText: 'var(--text-color-primary)',
        accentText: 'var(--text-color-accent)',
      },
    },
  }

These values are stored in a database and needs to be fetched(server or client side, dosen't really matter) therefore I cannot set them directly inside the global.css file. Worth mentioning is that these colors are different depending on a uid from route params. Example:

myapp.com/platform_1/3 has different colors than myapp.com/platform_2/3

I've attached a screenshot of my folder structure

What's the best way to do this dynamically?