Not able to apply dynamic value to className on the basis of condition

[muhammadmeharbhutta]

What version of Tailwind CSS are you using?

v4.01.10

What build tool (or framework if it abstracts the build tool) are you using?

Vite 6.3.5

What version of Node.js are you using?

For example: v22.16.0

What browser are you using?

Chrome

What operating system are you using?

Windows

Code

export interface UserAvatarProps {
  src: string | null | undefined;
  firstName: string;
  lastName: string | null | undefined;
  className?: string;
  showOnOff?: boolean;
  isOnline?: boolean;
  size?: number;
  contentSize?: string;
  borderSize?: number;
  background?: string;
  content?: string;
}

const UserAvatar = (props: UserAvatarProps) => {
  const {
    src,
    firstName,
    lastName,
    size = 10,
    contentSize = "sm",
    background = "bg-accent",
    content = "text-accent-content",
    borderSize,
    className,
    showOnOff,
    isOnline,
  } = props;
  return (
    <div
      className={`avatar avatar-placeholder ${
        showOnOff ? (isOnline ? "avatar-online" : "avatar-offline") : ""
      } ${className ? className : ""}`}
    >
      <div
        className={`overflow-hidden rounded-full size-${size} ${
          borderSize ? `border-${borderSize}` : ""
        } ${background} ${content}`}
      >
        {src ? (
          <img src={src} alt={`Avatar ${firstName} ${lastName}`} />
        ) : (
          <span className={`text-${contentSize}`}>
            {firstName[0]}
            {lastName && lastName[0]}
          </span>
        )}
      </div>
    </div>
  );
};

export default UserAvatar;

Describe your issue

Not assigning the size-32 and border-2 class if the size value change to 32 and border value to 2 and also not showing class even when inspect.

[wongjn]

As per the documentation:

Since Tailwind scans your source files as plain text, it has no way of understanding string concatenation or interpolation in the programming language you're using.

❌ Don't construct class names dynamically

<div class="text-{{ error ? 'red' : 'green' }}-600"></div>

In the example above, the strings text-red-600 and text-green-600 do not exist, so Tailwind will not generate those classes.

Instead, make sure any class names you’re using exist in full:

✅ Always use complete class names

<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>

If you're using a component library like React or Vue, this means you shouldn't use props to dynamically construct classes:

❌ Don't use props to build class names dynamically

function Button({ color, children }) {
  return <button className={`bg-${color}-600 hover:bg-${color}-500 ...`}>{children}</button>;
}