-
|
Hey, I am using NextJS + styled-components template. SomeThing Like This const Container = tw`from-[randomColor] to-black bg-gradient-to-b` 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>
} |
Beta Was this translation helpful? Give feedback.
Answered by
06ketan
Jun 17, 2022
Replies: 1 comment
-
|
Unfortunately, Due to Babel limitations twin can't translate random values. You will find the answer by ben-Rogerson in issues raised here ⬇️⬇️⬇️ |
Beta Was this translation helpful? Give feedback.
0 replies
Answer selected by
ben-rogerson
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment

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