After conducting some research, I have not been able to find a definitive answer to my query.
I possess a CMS API that supplies branding colors and other assets for a React application that can dynamically change its appearance using a combination of colors and images.
As I am currently working on version 2 of this application, I am contemplating switching from sass/scss to tailwind. Previously, with sass and scss, we simply overrode colors with CSS in JS, which worked effectively.
However, in tailwind, creating a custom color palette requires a configuration file, which may not be suitable for my intended use case as the colors will be changing frequently.
Consider a component:
import { FC } from 'react';
const MyComponent: FC = () => {
return <div className='bg-blue-500'></div>;
};This method works well, but if I wish to change the color temporarily, I could use a class like bg-[#f1f1f1], which is also effective!
However, an issue arises when attempting to pass the color as a template string in React, as shown below:
import { FC } from 'react';
import { useBranding } from '../some_path';
const MyComponent: FC = () => {
const [branding] = useBranding(); // custom hook providing various colors
return <div className={`bg-[${branding.colours.primary}]`}></div>;
};Upon inspection, it appears that the color code is being injected correctly, yet it seems that Tailwind's preprocessing is potentially being bypassed in this scenario?
Does anyone have any suggestions on how to effectively incorporate colors in this manner with Tailwind?