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
相关产品推荐
相关产品推荐

