Tailwindcss: [Feature Proposal] Configurable display properties

[nternetinspired]

I'd like to suggest that the display properties module be moved into the configuration file, to make it easily customisable.

Not only would this make it trivial for devs to add, or remove, properties as their project requires but it would also provide a quick way to implement CSS Grid in it's simplest form, or even bleeding-edge properties like display: contents;.

Whilst I'm not suggesting that display: contents; is quite ready for the primetime yet I do feel that global display values like inherit and initial certainly merit inclusion so I've created a PR to include those.

I honestly cannot remember when I last used display: table-cell or display: inline;, but I use display: initial; on _every single project_.

Configurability is Tailwinds key strength and, IMHO, the more configurable it is the better.

[benface]

@adamwathan has expressed interest in converting the core utilities into plugins, and if it happens I'm guessing it will make it easier to customize properties that aren't customizable in the config right now.

I'm curious, why do you need display: initial;? Isn't that the exact same thing as display: inline; since inline is the initial value of display?

[nternetinspired]

Isn't that the exact same thing as display: inline; since inline is the initial value of display?

No, because _inline is not the default display property_, it depends on the element. Sectioning elements, for example, have display: block as their initial value. These are commonly referred to as 'block-level' elements:

https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements#Block-level_vs._inline

Besides, the point of using .initial is to reset the element to it's default, _without needing to know what that default is_.

[benface]

@nternetinspired I'm afraid you're mistaken. The behaviour you're describing is the one of the revert keyword, which unfortunately is not well supported in browsers. initial, on the other hand, only resets a property to its initial value as defined by the CSS spec, which for display is inline.

You can read on the difference between initial and revert (as well as inherit and unset) here: https://bitsofco.de/initial-inherit-unset-and-revert/

[nternetinspired]

Thanks, but I'm not describing revert and I'm well aware of the differences.

Whilst the spec might designate the default value for the display property as inline, each element has it's own defaults. For block-level elements (and indeed unknown elements) the default display value is block.

You don't have to believe me, simply check the behaviour of html in any browser without any css applied.

<div>Foo</div><div>Bar</div>

Inline or block?

<ul>
  <li>Oh,</li>
  <li>Hey</li>
  <li>there!</li>
</ul>

Inline <li>? No. The default display value for <li> is not inline, it's list-item.

[benface]

I feel like we're not talking about the same thing @nternetinspired. Whether an element is block-level or inline-level is defined in HTML, sure, but it is implemented by browsers using the user agent stylesheet. For instance, Webkit's user agent stylesheet contains this rule:

address, article, aside, div, footer, header, hgroup, layer, main, nav, section {
    display: block;
}

Which is why <div> is display: block by default even without any author CSS. You can of course override that, and if you do with display: initial then the <div> effectively becomes display: inline because inline is the default value of display.

I suggest reading this Stack Overflow question and its accepted answer: https://stackoverflow.com/questions/18534561/what-is-use-of-initial-value-in-css

[nternetinspired]

😮 Thank you @benface 🙌

It seems I've misunderstood this most basic fact for years, and on re-reading the spec I can see that you are right! Thank you for updating me. Every day is a school day!! I'll revert my PR.

Thanks for your patience @benface 😺