How to change element top border color in component through props using Tailwind CSS ( Solved )-CodePudding

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"/>

CodePudding user response：

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

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

CodePudding user response：

You can use the border-t-{color} utility class. You can also use the after pseudo-class to add a border to the element after it has been rendered.

<ul>
  <li className="after:border-[7px] after:w-4 after:border-t-{props.colorTip} after:border-b-transparent">
    {/* ... */}
  </li>
</ul>

You can then pass the desired color as a prop to your component:

This will add a 7px red-600 top border to the li element in your component.