Tailwind CSS中使用inherit属性异常：span未继承父元素背景色

核心问题分析 #

你现在的代码有两个关键错误导致背景色没按预期继承：

• 你给span设置了bg-rose-600类，这个类会直接给span设置玫瑰红色背景，优先级高于继承的父元素样式，所以父元素的蓝色被覆盖了。
• 你使用的border-inherit是用来让边框继承父元素边框属性的，和背景色完全无关，要实现背景色继承得用Tailwind专门的bg-inherit类。

修改后的代码 #

把span的className调整成这样：

<div className={`relative flex items-center justify-center bg-blue-500`}>
    <span
        className={`border-4 border-inherit h-16 w-16 absolute top-1 rounded-full duration-500 bg-inherit ${Menus[active].dis}`}>
    </span>
    <div className={`bg-white max-h-[4.4rem] max-w-[360px] px-6 rounded-t-xl mt-6`}>
    </div>
</div>

额外说明 #

兄弟元素的白色背景不会影响span的样式，因为span是绝对定位元素，和兄弟div属于同级节点，两者的背景是独立的。之前给父元素加!important没用，是因为span自身的bg-rose-600类已经直接设置了背景色，继承的样式优先级比不过直接设置的类。

内容的提问来源于stack exchange，提问作者Matt Freelance Web