Dynamic Colors with Tailwind and Next 13.

[violet mango]

Hello!. I have a multi-tenant application. Each customer has a personalized color.

I'm using the folder structure: src/app/[domain]/page.tsx where [domain] is the client's domain.

This way, I make a request to the Back-end, passing the domain as a parameter and get all the information for that client.

This is a basic example of what each customer's data would look like:

{ id: '1', name: 'Site Model 1', description: 'This is the website with model 1', color: '#0F7173' }

I need some strategy to add these colors dynamically in my application. I need it to work with Next 13 or 14.

My tailwind configuration:

extend: { colors: { 'client-color': 'var(--client-color)' } }

I did the following strategy, but it only works client-side:

document.documentElement.style.setProperty('--client-color', data.color)

I would like to know the best place where I can call this request and how I will get the color returned in this request to set as a CSS variable.

Basically I'm following vercel's example: https://github.com/vercel/platforms

I would be very grateful if you could help me with this problem. Thanks!

[dense mauve]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[lone scarab]

<div style={{
  "--client-color": "#123456",
}}>
  Hello world
</div>