TailwindCSS styling not applied when passing prop value and using it in template literals (with Typescript)

I have a PrimaryButton component in NextJS, where I'm using TailwindCSS for styling. The component accepts a size prop, and I'm encountering an issue where the styling doesn't apply correctly when I pass the size value from the prop and use it within template literals. However, when I check the console, it shows that the relevant CSS attribute is applied to the element, but visually it doesn't reflect the expected styling.

PrimaryButton.tsx

import Link from "next/link";
import React from "react";

type Props = {
  size: number;
};

export default function PrimaryButton({ size }: Props) {

  const textSize = size ? `text-[${size.toString()}px]` : "";

  // Styling
  const primaryBtnStyle = `text-white p-2 bg-gradient-to-r from-indigo-400 to-rose-400 rounded-3xl ${textSize}`;

  return (
    <>
      <Link href="/signup" className={primaryBtnStyle}>
        Signup
      </Link>
    </>
  );
}

Using component

 <PrimaryButton size={24} />

Console Output

Is there anything I'm missing here. Any help would appreciated. Thanks

Tailwind searches your source code for complete class names so it knows what CSS it needs to generate. This means that you cannot dynamically concatenate strings together to form a single class name, although you can concatenate multiple full class names together.

According to the documentation:

> The most important implication of how Tailwind extracts class names is that it will only find classes that exist as complete unbroken strings in your source files. <br> If you use string interpolation or concatenate partial class names together, Tailwind will not find them and therefore will not generate the corresponding CSS

Consider using a fixed number of classes that can be represented in a static object or using inline styles.