You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Tailwind v4中使用inherit作为值无效,请求排查原因

问题分析与解决

这不是Tailwind的Bug,是操作方式有误。

在Tailwind v4中,若要为border-radius添加inherit选项,不能通过@theme直接定义CSS变量--radius-inherit: inherit——Tailwind对主题变量的处理逻辑会导致该值无法正确生效。

正确的实现方式是在@theme的border-radius配置块中添加inherit值:

<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
@theme {
  border-radius: {
    inherit: inherit;
  }
}
</style>

<div class="w-[100px] h-[100px] bg-blue-500 rounded-3xl m-20">
  <div class="rounded-inherit bg-red-600">inherit</div>
</div>

这样生成的.rounded-inherit类会直接设置border-radius: inherit,能够正确继承父元素的圆角属性值。


内容的提问来源于stack exchange,提问作者Chrillewoodz

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.14 10:47:34