Applying the class name through json not working, same works if hardcoded

Question

It's my json:

export const initialInitialPropsSchema: InitialProps[] = [
  { className: 'text-secondary text-5xl font-semibold', label: 'B' },
  { className: 'text-white  text-5xl font-semibold', label: 'M' },
  { className: 'text-tertiary  text-5xl font-semibold', label: 'A' },
];

my header: where I apply my class names on loop:

export const Header: FC<{ initials: InitialProps[] }> = ({ initials }) => {
  return (
    <div className="p-5 bg-primary flex justify-between">
      {initials.length &&
        initials.map((initial) => (
          <h1 key={initial.label} className={initial.className}>
            {initial.label}
          </h1>
        ))}
    </div>
  );
};

But in the browser I see all class names are applied. But no property update with element. If I hard code the classNames, instead of assign from json it works fine. I am using Nx workspace with vite for react app. the header placed under the header library.

in browser I see this:

UPDATE

In my header part, I simply added all classes what it's used in json like this: ( apart from loop as static )

<h1 className="text-secondary text-tertiary text-white text-5xl font-semibold"></h1>

then all look classes as well works. what would be the issue? how to solve this?

Answer 1

This is most likely due to the Tailwind compiler not including those classes in the generated CSS. As stated in the documentation, here and here

Tailwind doesn’t include any sort of client-side runtime, so class names need to be statically extractable at build-time, and can’t depend on any sort of arbitrary dynamic values that change on the client.

This is because Tailwind tries to optimize your bundle size by removing unused classes and it needs to be able to determine which of those to keep at build time which it seems is not possible in this case due to classes being assigned to variables.