[BUG]: Hardcoded inline text color prevents CSS/Tailwind overrides

[R3tr0BoiDX]

Describe the issue

Description

When I wrap the TextType component in a parent element with Tailwind hover utilities (like hover:text-black), the text remains white, but it should change the text color to match the parent's hover state.

Technical Details

The issue stems from the getCurrentTextColor function and the inline style applied to the <span>.

Currently, the component defaults to #ffffff if the textColors array is empty:

const getCurrentTextColor = () => {
  if (textColors.length === 0) return "#ffffff"; // High specificity override
  return textColors[currentTextIndex % textColors.length];
};

Because this is applied as an inline style, it has higher CSS specificity than Tailwind’s utility classes or standard CSS selectors, making it impossible to change the text color via external classes or hover states.

Proposed Fix

Changing the default return value to inherit allows the component to respect the color defined by the parent or external CSS classes while maintaining functionality for the textColors prop.

if (textColors.length === 0) return "inherit";

Reproduction Link

No response

Steps to reproduce

1. Import the TextType component into a standard React project.
2. Wrap the component in a div with a dark background and a hover utility that changes the text color:

<div className="bg-black text-white hover:bg-white hover:text-red-500">
  <TextType text="This should turn red on hover" />
</div>

3. Run the application and hover your mouse over the container.
4. Observe that while the background changes, the text color remains white.
5. Inspect the element in Browser DevTools; you will see element.style { color: #ffffff; } overriding any styling hover class.

Validations

• I have checked other issues to see if my issue was already reported or addressed