如何通过Props在组件中用Tailwind CSS修改元素上边框颜色

问题原因 #

你的代码存在两个关键错误，导致伪元素边框颜色不生效：

• Tailwind伪类前缀语法错误：after-border-t-red-600 应写成 after:border-t-red-600（伪类前缀与类名之间需用冒号:分隔，而非横杠-）
• 伪元素缺少必要的content属性：默认情况下，未设置content的伪元素不会被浏览器渲染

修正后的代码 #

TargetsProgressInfo组件

export default function TargetsProgressInfo(props) {
    return (
        <div>
            <ul>
                <li>
                    <span 
                        className={`after:content-[''] after:inline-block after:border-[7px] after:w-4 ${props.colorTip} after:border-b-transparent`}
                    ></span>
                </li>
            </ul>
        </div>
    )
}

补充说明：

• 添加after:content-['']确保伪元素能正常渲染
• 添加after:inline-block让伪元素的宽高、边框样式生效（行内元素默认无法设置这类尺寸属性）
• 修复了原代码中标签不闭合的问题（缺失<li>起始标签）

home.jsx调用代码

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

额外验证点 #

如果修改后仍不生效，可检查以下内容：

• 确认Tailwind配置的content字段包含你的组件文件路径（v3版本默认支持任意类名，但自定义配置可能需要手动指定）
• 临时添加after:bg-blue-500类验证伪元素是否存在，排查是否是尺寸或定位问题导致边框不可见

内容的提问来源于stack exchange，提问作者Zana Suleiman