Dynamic Colors with Tailwind and Next 13.

Unanswered

Northeast Congo Lion posted this in #help-forum

Northeast Congo LionOP

2023-12-29T03:39:21.000Z

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!

2 Replies

@Northeast Congo Lion 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!

joulev

2023-12-29T04:23:20.000Z

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

if ts complains, add this code to any .ts or .d.ts files in your project (i usually put it in types/fix/react.ts)

import "react";

declare module "react" {
  // eslint-disable-next-line @typescript-eslint/consistent-indexed-object-style -- n/a
  interface CSSProperties {
    [key: `--${string}`]: string | number | undefined;
  }
}