[Feature Proposal]: Utilities for the CSS "inherit" keyword #1361

lilisgeorge · 2020-02-05T09:49:55Z

lilisgeorge
Feb 5, 2020

Hi,

There are cases where using inherit css keyword would make more sense. Especially when you have a calculated css rule and need to inherit from that rather than duplicating it

e.g.
Instead of ...

.parent {
  min-height: calc(100vh - 3rem);
}
.parent > .child {
  min-height: calc(100vh - 3rem);
}

<div class="calculated-class">
  <div class="child">...</div>
</div>

... better have a dedicated utility

.parent {
  min-height: calc(100vh - 3rem);
}
.min-h-inherit {
  min-height: inherit;
}

<div class="calculated-class">
  <div class="min-h-inherit">...</div>
</div>

Keep up the good work.

Regards,
GL

keith0305 · 2020-02-11T07:00:37Z

keith0305
Feb 11, 2020

+1. Thanks for raising this. I too, find myself extending Tailwind for this purpose in almost every project.

0 replies

le717 · 2020-04-04T17:57:51Z

le717
Apr 4, 2020

I would like to take this. We're getting hit at my job by the lack of native inherit support and I've been working on a PR to add support. What all properties should be granted inheritance? So far, I've added background-color, color, border-color, [min-max-]h and [min-max-]w. Are there other things that might benefit from an inherit utility?

1 reply

bhaambhu Dec 26, 2022

display : inherit is needed

adamwathan · 2020-04-04T18:01:15Z

adamwathan
Apr 4, 2020
Maintainer

Trying to figure out why I’ve never needed this — in the first example could you not use height: 100% for the child, or use flexbox to solve it?

2 replies

Johnrobmiller Jul 13, 2023

Whether or not you personally have not used that style does not matter. Other people can write code differently than you, and that's ok.

ghost Jan 12, 2025

@Johnrobmiller
yea but he's just trying to understand. I didn't hear any judgement from him.

@adamwathan
In my case I reached this due to a parent having max-h-X + child having "overflow-auto" + max-h-full.
which didn't work. I ended up adding "max-h-[inherit]" on the child.
here's the issue + explanation of the solution

le717 · 2020-04-04T18:28:44Z

le717
Apr 4, 2020

[min-]height: 100% doesn't work. I tested it using the test case given by @lilisgeorge and added a border to each container to visually see the height of the child element. min-height: inherit is the only thing that causes the child's height to match the parent's height.

I think it fails because calc() is being used. height: 100% requires the parent element to have an "absolute" value, absolute in this case meaning it's something the browser computed as part of the normal render routine. Since it's a dynamically calculated value that "absoluteness" is tossed out so the child element doesn't know what "100%" is. It can only inherit whatever that value is.

I know that's probably not the most technically accurate theory but that's how I've come to understand the problem.

I've not looked at the code lately, but I believe whenever this came up, flexbox did not work due to the way the application is structured.

<!-- My test case html showing only inherit works correctly-->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/dist/tailwind.css">
    <title>Hello, world!</title>
    <style>
      .parent {
        min-height: calc(100vh - 3rem);
      }
      .parent > .child {
        /* min-height: calc(100vh - 3rem); */
        /* height: 100%; */
        /* min-height: 100%; */
        min-height: inherit;  /* only this works */
      }
    </style>
  </head>
  <body class="p-4">
    <div class="parent border-4 border-solid border-blue-600 p-2">
      parent
      <div class="child border-4 border-solid border-pink-500">child</div>
    </div>
    </div>
  </body>
</html>

0 replies

lilisgeorge · 2020-04-04T19:10:36Z

lilisgeorge
Apr 4, 2020
Author

Hi again,

This is a sample of a layout I was experimenting back then, where it fails with height: 100% or min-height: 100% but works with min-height: inherit.

<body class="bg-green-300 relative pt-12">
  <div class="bg-white h-12 absolute top-0 left-0 right-0 w-full">
    header
  </div>
  <div class="main">
    <!-- try replacing min-h-inherit with h-full or min-h-full to see it failing. For some reason it stops forcing to stretch full height -->
    <div class="bg-gray-200 min-h-inherit">
      Content
    </div>
  </div>
</body>

.main {
  min-height: calc(100vh - 3rem);
}

.min-h-inherit {
  min-height: inherit;
}

0 replies

rightaway · 2020-04-08T19:40:36Z

rightaway
Apr 8, 2020

I added this to my config file and think it would be a good addition to the default config

theme: {
  extend: {
    colors: {
      inherit: 'inherit'
    }
  }
}

1 reply

ghost Jan 12, 2025

I expected this rule to be under "maxHeight". Am I missing something? (source)

wesort · 2020-05-07T11:49:03Z

wesort
May 7, 2020

Adding a use case for this: I want a child element to inherit the background colour.

Specifically, I'm positioning something absolutely on top of another element and need that parent's background colour to cascade naturally and on hover.

<div class="relative w-8 h-8 bg-white hover:bg-gray-300">
  <IconClock></IconClock>
  <div class="absolute bg-inherit">
    <div>H</div>
  </div>
</div>

0 replies

sylann · 2020-10-16T11:58:36Z

sylann
Oct 16, 2020

Hi there, I just wanted to share a use case I have faced.
inheriting style can be important when you work with a framework like Vue and when you try to achieve compositions and separate responsibilities.
This is generally not a problem because most attributes will cascade down but some like font-weight or others (depending on html tags, inputs and textareas are some problematic examples) will not.

If you have a component that shouldn't predict part of its styling, you then have the following choices:

use props to pass down classes (which in my opinion is terrible for several reasons, but I wont get into that here ^^)
set "prop: inherit" with inline css
create your own inherit css classes

0 replies

2ne · 2020-11-16T12:24:01Z

2ne
Nov 16, 2020

I am using background-color: inherit; for dealing with components when I can't add a class to the top-level element easily.

0 replies

alvis · 2021-08-02T08:05:34Z

alvis
Aug 2, 2021

Also it's need to fix child inside a parent with min-height
https://stackoverflow.com/questions/8468066/child-inside-parent-with-min-height-100-not-inheriting-height

3 replies

simonswiss Aug 3, 2021

Hey!

I might not understand the exact use case, but in this scenario typically, you can set the parent (with min-height) to display: flex:

https://play.tailwindcss.com/Op1goNLwPu

Depending on the use case, you may need to add a flex-1 class to the child element, so it occupies the entire available space.

alvis Aug 3, 2021

Thanks @simonswiss. I overlooked it. flex is definitely a better solution.

wengtytt Aug 17, 2021

Another common scenario is that when you have the children element with the fixed position but still want to inherit the parent height. In this case, flex with flex-1 won't work.

wengtytt · 2021-08-17T19:59:04Z

wengtytt
Aug 17, 2021

Another common scenario is that when you have the children element with the fixed position but still want to inherit the parent height. In this case, flex with flex-1 won't work.

0 replies

danon · 2021-11-12T14:00:29Z

danon
Nov 12, 2021

I'm needing max-width:inherit for dynamicly widthed absolute elements.

2 replies

isaac-wahba Aug 31, 2023

Have you found a solution?

HaominYuan Sep 3, 2023

w-[inherit] max-w-[inherit]
try this

godismyjudge95 · 2021-11-21T21:52:45Z

godismyjudge95
Nov 21, 2021

Another scenario:

Passing border radius down to child elements to avoid using overflow hidden on the parent (which can hide popup ui elements).

0 replies

mrassili · 2022-02-15T17:01:46Z

mrassili
Feb 15, 2022

Another scenario:
Say I have a div with 2 text elements inside, they both need to share the same line-height but they have different text-size, I set leading-6 on the parent div and then give the two elements inside text-sm and text-lg respectively, but then in order for the text to get the same line-height as parent I have to set leading-inherit on both which doesn't exist by default (since text-xx also sets line-height)

0 replies

Dhalias · 2022-02-17T22:37:31Z

Dhalias
Feb 17, 2022

As a workaround for now I've used h-[inherit] to apply it when needed.

You can also use with modifiers like lg:h-[inherit]

0 replies

alexcracea · 2022-09-16T12:28:07Z

alexcracea
Sep 16, 2022

Really need this feature, here's another use case - text-transform: inherit whenever I want a to inherit the text transform from parent (because by default the all buttons are reset to text-transform: none from reset)

My 2 cents:
Generally speaking I think its pointless to sit around and convince people with arguments like "don't need this feature", "you could refactor it to avoid this". The inherit and initial are 2 global values that any css property can have, it is a basic css fundamental that you as a front-end dev always can rely on. Tailwind needs this feature just because its essential.

1 reply

menasheh Jun 26, 2023

+1000. Needs to be easier to use tailwindcss than css, not the other way around. Workarounds are not helpful.

bhaambhu · 2022-12-26T05:06:22Z

bhaambhu
Dec 26, 2022

I am in a project that desperately needs display: "inherit" and have to use the style property for some elements. I'm using react-beautiful-dnd. The current code style component that I can't replace with className.

{(provided, snapshot) => (
       <div  
              ref={provided.innerRef}  
              {...provided.draggableProps}  
              style={{  
                     display: "inherit",  
              }}  
       >  
              <div  
                     ...

How can I do this with tailwind?

1 reply

tordans Dec 27, 2022

How can I do this with tailwind?

Those two ways do work in this case:

Use the arbitrary css class [display:inherit]
Add your own utility class to your .css (the one that has @tailwind …; in it)
```
@layer utilities {
  .inherit {
    display: inherit;
  }
}
```
This is basically what TW is doing in https://github.com/tailwindlabs/tailwindcss/blob/master/src/corePlugins.js#L691-L695.

Those solutions do work for other TW feature, but not here:

Extend your config. That would be something like …
```
    extend: {
      display: { inherit: 'inherit' },
    },
```
However, for the display core plugin no such thing seem to exist.
Use arbitrary values like display-inherit.
However, for this display core plugin there is no shared part to attach your arbitrary value to.

Here are the options to play with: https://play.tailwindcss.com/eRDYqURnB9

Uh oh!

[Feature Proposal]: Utilities for the CSS "inherit" keyword #1361

Uh oh!

Replies: 17 comments · 11 replies

Uh oh!

Uh oh!

Uh oh!

Uh oh!

adamwathan Apr 4, 2020 Maintainer

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

lilisgeorge Apr 4, 2020 Author

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Replies: 17 comments 11 replies

adamwathan
Apr 4, 2020
Maintainer

lilisgeorge
Apr 4, 2020
Author