Search code examples
csstailwind-css

Using inherit as value in Tailwind v4 doesn't work

https://play.tailwindcss.com/2VVorQvG0T?file=css

Since upgrading to Tailwind v4 where the config is CSS only I can no longer use inherit as a value. It creates the class but the actual value of the variable doesn't seem to work for some reason.

<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>

Is this a bug in Tailwind or am I doing something wrong?

Solution

  • Actually, if you take a look at the generated CSS, it perfectly creates what you asked for. The issue is that even when you replicate this with native CSS, it still doesn't work:

    :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>

    And if we omit the variable from the formula, it works:

    .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>

    So instead of using a variable, I would manually declare the class in 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>

    Is this a mistake? Yes, at least it's a shortcoming. I checked the bg-inherit class, and there, Tailwind declares the class perfectly without a var() variable, see here:

    .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() */
}

    However, bg-inherit is a class created by default. I assume that all variables declared in @theme will appear in var(), so inherit cannot work anywhere, as it needs to be directly tied to the class, not from a separate variable. Perhaps you could create a development request to include rounded-inherit in Tailwind, similar to bg-inherit.

    And since inherit cannot be passed with a variable in CSS - as it is meant to express inheritance directly – I think it's also a mistake that Tailwind doesn't warn when declaring a variable in @theme.