[FIXED] How to change element top border color in component through props using Tailwind CSS ( Solved )

Issue

I'm trying to change the color of the top border by passing the color value as props to the component, but It doesn't make any effects.

I'm looking for a solution. Please help me!

export default function TargetsProgressInfo(props) {
    return (

            <ul>
                <span className={` after:border-[7px] after:w-4 ${props.colorTip} after:border-b-transparent`}></span></li>
            </ul>
        </div >

    )
}


**home.jsx**

<TargetsProgressInfo colorTip="after-border-t-red-600"/>

Solution

The solution is to pass the whole name of Tailwind CSS as props

        <TargetsProgressInfo colorTip="after:border-t-red-600"/>

Answered By - Zana Suleiman
Answer Checked By - - David Goodson (ReactFix Volunteer)