Add stretch value to length width, height styles.

[goldnite]

Stretch is not supported currently.

I think it would be nice if we add these values.

.w-stretch {
  width: -webkit-fill-available;
  width: -moz-available;
  width: stretch;
}

.min-w-stretch {
  min-width: -webkit-fill-available;
  min-width: -moz-available;
  min-width: stretch;
}

.max-w-stretch {
  max-width: -webkit-fill-available;
  max-width: -moz-available;
  max-width: stretch;
}

.h-stretch {
  height: -webkit-fill-available;
  height: -moz-available;
  height: stretch;
}

.min-h-stretch {
  min-height: -webkit-fill-available;
  min-height: -moz-available;
  min-height: stretch;
}

.max-h-stretch {
  max-height: -webkit-fill-available;
  max-height: -moz-available;
  max-height: stretch;
}

[tobi1220]

I think we should start by adding stretch for the width and height property since this is now supported by all browsers. For the other properties however, this value is not supported that well.

Supported:

• height https://developer.mozilla.org/en-US/docs/Web/CSS/height#browser_compatibility
• width https://developer.mozilla.org/en-US/docs/Web/CSS/width#browser_compatibility

Not supported by all:

• min-height https://developer.mozilla.org/en-US/docs/Web/CSS/min-height#browser_compatibility
• max-height https://developer.mozilla.org/en-US/docs/Web/CSS/max-height#browser_compatibility
• min-width https://developer.mozilla.org/en-US/docs/Web/CSS/min-width#browser_compatibility
• max-width https://developer.mozilla.org/en-US/docs/Web/CSS/max-width#browser_compatibility

[o-t-w]

Chrome and Firefox are working on unprefixing the stretch keyword. Safari have not officially stated that they think this feature is a good idea. I would hold off until it is clear Safari will support this eventually, but I hope that's soon.

WebKit/standards-positions#401

[peteruithoven]

Starting with Firefox 145, we now supports the legacy -webkit-fill-available keyword as a value for the CSS width and height properties, to improve rendering of content on the web that uses this keyword. This keyword is an alias for the recently standardized stretch keyword (which isn't shipping in Firefox yet).

https://www.firefox.com/en-US/firefox/145.0a1/releasenotes/#note-791162

[TimChinye]

Major +1 to this one. It's been almost a year now, although I'd say it is still arguably too early:

Chrome has already been unprefixed (however, Chrome's DevTools has not been updated to reflect this change).

FireFox has the opposite problem, they show stretch as a valid keyword, but strikes a line through it:

I've also noticed that FireFox's stretch and Chrome's stretch don't seem to work exactly the same.

I personally would appreciate the implementation of a stretch utility class, knowing it's limitations full well. However, I would still say it's too early to recommend that all developers use it. Perhaps, just keep tabs on this one.

[o-t-w]

The stretch keyword will land in Safari 27. I’d say it’s time to add this to Tailwind.