Help in Interpolation into template literals

[06ketan]

Hey, I am using NextJS + styled-components template.
I want help in making a gradient of random color to black

SomeThing Like This

const Container = tw`from-[randomColor]  to-black bg-gradient-to-b` 

I am getting error

Below is my code ⬇️⬇️⬇️

const Component= () => {

 const [randomColor, setRandomColor] = useState(null);

  const getRandomColor = () =>
    `hsl(${360 * Math.random()}, ${25 + 70 * Math.random()}%, ${
      75 + 10 * Math.random()
    }%)`;

  useEffect(() => {
    setColor(`from-[${getRandomColor ()}]`);
  }, []);

return
<div css={`${ tw` from-[${randomColor}] to-black bg-gradient-to-b ` }`} >
Something...
</div>
}

[06ketan]

Unfortunately, Due to Babel limitations twin can't translate random values.
Instead, you'll have to use plain old CSS for that 😭

You will find the answer by ben-Rogerson in issues raised here ⬇️⬇️⬇️

Click here to view the solution