主页 / coding / 问题 / 79426266
Accepted
Chrillewoodz
Asked: 2025-02-10 14:43:45 +0800 CST

在 Tailwind v4 中无法使用继承作为值

  • 772

https://play.tai​​lwindcss.com/2VVorQvG0T?file=css

自从升级到 Tailwind v4 后，配置就只有 CSS，我无法再将inherit其用作值。它创建了类，但由于某种原因，变量的实际值似乎不起作用。

<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
@theme {
  --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>

这是 Tailwind 的一个错误还是我做错了什么？

css

1 个回答

  1. Best Answer

    实际上，如果你看一下生成的 CSS，它完美地创建了你要求的内容。问题是，即使你使用原生 CSS 复制它，它仍然不起作用：

    :root {
  --radius-inherit: inherit;
}

.rounded-inherit {
  border-radius: var(--radius-inherit);
}

.first {
  margin: 5rem; 
  border-radius: 1.5rem; 
  background-color: #3B82F6; 
  width: 100px;
  height: 100px;
}

.second {
  background-color: #DC2626; 
}
    <div class="first">
  <div class="rounded-inherit second">inherit</div>
</div>

    如果我们从公式中省略变量，它就会起作用：

    .rounded-inherit {
  border-radius: inherit;
}

.first {
  margin: 5rem; 
  border-radius: 1.5rem; 
  background-color: #3B82F6; 
  width: 100px;
  height: 100px;
}

.second {
  background-color: #DC2626; 
}
    <div class="first">
  <div class="rounded-inherit second">inherit</div>
</div>

    因此，我不会使用变量，而是在 TailwindCSS 中手动声明类：

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

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

    这是一个错误吗？是的，至少这是一个缺点。我检查了这个bg-inherit类，Tailwind 完美地声明了该类而没有var()变量，见此处：

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

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

    /* generated */
.bg-inherit {
  background-color: inherit; /* without var() */
}

    但是，bg-inherit是默认创建的类。我假设在中声明的所有变量都@theme将出现在中var()，因此inherit无法在任何地方工作，因为它需要直接绑定到类，而不是来自单独的变量。也许您可以创建一个开发请求以包含rounded-inherit在 Tailwind 中，类似于bg-inherit。

    而且由于 inherit 不能在 CSS 中通过变量传递 - 因为它旨在直接表达继承 - 我认为 Tailwind 在声明变量时没有发出警告也是一个错误@theme。

    • 1

相关问题