Skip to content

Conversation

@bakura10
Copy link
Contributor

This PR adds support for the inherit spacing value. Tailwind currently lacks a lot for the "inherit" keyword, and there are various cases where it is actually useful. For instance, imagine a common form with some gap between fields, and with two fields that you would like to be two per row but preserving the global gap. For now we are forced to repeat everything:

<div class="grid gap-2 sm:gap-3 lg:gap-4">
  <div class="grid gap-2 sm:gap-3 lg:gap-4 sm:tw-grid-cols-2">
    <input>
    <input>
  </div>
  <input ...>
</div>

With this we can simply use:

<div class="grid gap-2 sm:gap-3 lg:gap-4">
  <div class="grid gap-inherit sm:tw-grid-cols-2">
    <input>
    <input>
  </div>
  <input ...>
</div>

@adamwathan
Copy link
Member

Hey thanks for this! I'm a bit hesitant to just add it to spacing alone and think if we want to start including inherit that we should go through the whole config and make sure it's included everywhere that makes sense. That sounds like a big project though and I'm not sure I'm going to have time to really dig in to that any time in the near future, so I'm going to say no to this PR for now, but not closed to revisiting it in the future.

In the mean time there is a super easy alternative, which is to use arbitrary values:

<div class="grid gap-2 sm:gap-3 lg:gap-4">
  <div class="grid gap-[inherit] sm:grid-cols-2">
    <input>
    <input>
  </div>
  <input ...>
</div>

Two extra characters but doesn't require any changes to Tailwind or your config at all 👍 Of course you can also add the inherit value to your own config if you'd like too.

Thanks regardless! ❤️

@adamwathan adamwathan closed this May 8, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants