Tailwind does not draw gradient when color is thrown as props Next.js

Question

Unexpectedly ran into this problem: I want to make squares in my application that will display colors in a particular site theme.

Problem: when I drop colors into the component, Tailwind for some reason refuses to draw a gradient.

Correction: even if the color is in a variable, it doesn't work either. My code:

"use client";

interface ISettingsThemePickerItemProps {
  startColor: string;
  endColor: string;
}

function SettingsThemePickerItem({
  startColor,
  endColor
}: ISettingsThemePickerItemProps) {
  const t = "#fff";
  return (
    <div
      className={
        `h-[100px] w-full rounded-2xl border bg-gradient-to-br from-[${t}] from-0% via-white via-50% to-red-500`
      }
    ></div>
  );
}

export default SettingsThemePickerItem;

When written like this, the gradient will not be displayed. In the browser you can see that the necessary classes are not being pulled. But if you go back to normal writing (from-[#fff]), everything will be fine

Answer 1

As per 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.

If you use string interpolation or concatenate partial class names together, Tailwind will not find them and therefore will not generate the corresponding CSS:

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>

You could:

• Have the entire class in the t variable like

  const t = "from-[#fff]";
  return (
    <div
      className={
        `… ${t} …`
      }
    ></div>
  );
  

• Forego the t variable entirely like:

  return (
    <div
      className="… from-[#fff] …"></div>
  );