I need to use colors from a backend api response to populate my tailwind theme colors

[m-haris-n]

Hello!
I am working on a project where I need to fetch all the colors from a backend api.
What I want to do is that I want to get the colors from the backend and then in the tailwind.config file, I want to use the response and populate the extended colors.
How can I do it?

[wongjn]

I would suggest using CSS variables for your colors. You can then at runtime of your project, dynamically generate the colors as CSS variable values from the backend.

[wongjn]

That entirely depends on your stack, i.e. for PHP:

<style>
:root {
  --color1: <?php echo $color1; ?>;
  --color2: <?php echo $color2; ?>;
}
</style>

or for JavaScript:

`
<style>
:root {
  --color1: ${color1};
  --color2: ${color2};
}
</style>
`

[m-haris-n]

Oh sorry for not mentioning.
I'm doing it in a ReactJS project.

[m-haris-n]

If you can guide me about how to do it in ReactJS, it'd be a great help.

[wongjn]

You should be able to use the JavaScript example I wrote above and adapt it to your project.

[m-haris-n]

Sounds good. I'll give it a try.
Where should I write the CSS variables? (the code that you wrote for the example)
In index.html, index.js?

[ichenglin]

If you're already using ReactJs,
you don't have to register CSS variables in order to update the elements' styles,
the ReactJs solution would be to use the ReactJs Native State Hook.

The reason is that ReactJs would automatically rerender the elements,
whenever the value of State Hook has changed,
so all we have to do is update the variable while ReactJs handles the rest for us.

Here's an example of using ReactJs Native State Hook.

class Example extends React.Component {

	constructor(props) {
		super(props);
		// initialize state hook
		this.state = {
			element_color: "#FFFFFF"
		};
	}

	async componentDidMount() {
		// request api
		const api_return = await fetch("https://example.com").then(response => response.json());
		// update state hook value
		this.setState({element_color: api_return.color});
	}

	render() {
		// this method is called whenever reactjs rerenders this element
		// the style={} applies style directly onto the element, without the use of CSS variables
		return <div style={{backgroundColor: this.state.element_color}}>
			{`This element has the color ${this.state.element_color}`}
		</div>;
	}
}

[m-haris-n]

I have no knowledge of class based components. Can you provide an example using functional components?

[ichenglin]

If you look at ReactJs Native State Hook documentation I provided earlier,
there's examples for users who prefer function components.

Anyway here's the example you are looking for.

export default function PageFunction() {
    const default_color = "#FFFFFF";
    const [color, set_color] = useState(default_color);
    // fetch for color
    if (color === default_color) {
        fetch("https://example.com/api").then(response => response.json()).then(json => set_color(json.color));
    }
    // return the element
    return <div style={{backgroundColor: color}}>
        {`the color is ${color}`}
    </div>;
}