Recently, I've developed a component showcasing the "Text Gradient" effect in Tailwind + React. The component comprises of 4 select dropdowns and a "randomize" button. Upon clicking the button or selecting an option from the dropdowns, the changes are supposed to be previewed.
However, for the first time ever, I'm facing an issue where the color classes are not being correctly applied. Even though they appear in the className attribute of the <h2> tag, the classes are rarely reflected on the screen. Furthermore, the colors that fail to apply also do not show up in Dev Tools -> Style Sidebar.
To provide more insight, I have created a 2-minute video demonstrating the problem:
Upon watching the video, you'll notice my attempts to generate results consistently, but most of the time, the text ends up becoming transparent with no color applied.
You might think that the issue lies within faulty classes. However, if I copy the classes and test them on play.tailwindcss.com, they work perfectly fine.
<h2 class="bg-gradient-to-r from-pink-700 via-yellow-800 to-lime-500 bg-clip-text text-center text-7xl font-bold text-transparent">Whats Up</h2>
Here's an example of a class that fails to work in my PreviewText.jsx file but functions flawlessly on play.tailwindcss.com, thereby confirming that there is nothing wrong with the Tailwind classes.
Below is the relevant code snippet:
Gradient useState Variable:
const [gradient, setGradient] = useState({
direction: "bg-gradient-to-tl",
fromColor: "from-slate-800",
viaColor: "via-violet-500",
toColor: "to-zinc-400",
});
RandomizeGradient Function:
const randomizeTextGradient = () => {
const randomDirection =
gradientDirections[Math.floor(Math.random() * gradientDirections.length)]
.value;
const randomFromColor =
fromArray[Math.floor(Math.random() * fromArray.length)].value;
const randomViaColor =
viaArray[Math.floor(Math.random() * viaArray.length)].value;
const randomToColor =
toArray[Math.floor(Math.random() * toArray.length)].value;
const newGradient = {
direction: randomDirection,
fromColor: randomFromColor,
viaColor: randomViaColor,
toColor: randomToColor,
};
setGradient(newGradient);
};
TextGradient.tsx File:
<section className="text-white bg-transparent border-t border-b border-zinc-800 my-6">
<div className="py-4 mx-auto flex items-center gap-4 justify-between">
<div className="flex gap-2">
<button
className="focus:outline-none p-2 bg-zinc-900 border rounded-md border-zinc-700 hover:bg-zinc-700"
onClick={randomizeTextGradient}
>
<svg
xmlns="http://www.w3.org/2000/svg"
className="w-5 h-5 text-white"
fill="#fff"
viewBox="0 0 256 256"
>
...
</svg>
</button>
<CopyToClipboard
...
</CopyToClipboard>
</div>
...
</div>
</section>
<div>
<PreviewText gradient={gradient} />
</div>
For those interested, here's how the classes are generated in the code:
const colors = [
"slate", "gray", "zinc", "neutral", "stone", "red",
"orange", "amber", "yellow", "lime", "green", "emerald",
"teal", "cyan", "sky", "blue", "indigo", "violet",
"purple", "fuchsia", "pink", "rose",
];
const numbers = [100, 200, 300, 400, 500, 600, 700, 800, 900];
let fromArray = [];
let viaArray = [];
let toArray = [];
colors.forEach((color) => {
numbers.forEach((number) => {
let fromValueLabel = `from-${color}-${number}`;
let viaValueLabel = `via-${color}-${number}`;
let ...
I've been troubleshooting this issue for 2 days without success. Any assistance you can offer would be greatly appreciated. I've tested this code in both NextJS and React Vite projects.