Skip to content

Add font-stretch utilities#12171

Closed
Gregory-Gerard wants to merge 1 commit intotailwindlabs:archive/master-2024-02-23from
Gregory-Gerard:font-stretch
Closed

Add font-stretch utilities#12171
Gregory-Gerard wants to merge 1 commit intotailwindlabs:archive/master-2024-02-23from
Gregory-Gerard:font-stretch

Conversation

@Gregory-Gerard
Copy link

@Gregory-Gerard Gregory-Gerard commented Oct 9, 2023

Hey there!

First-time contributor to Tailwind CSS, if there's anything specific you'd like me to adjust or if you have any questions, please don't hesitate to let me know.

Goal

I've added the .stretch-* classes to manage the font-stretch property. This addition is approximately 96% compatible overall, as per the information available on caniuse.com.

Stretch should allow percentage value or any config value. I've relied on the fontWeight property for this new feature. I hesitated between adding statics utilities or the version I sent, but I think that being able to use arbitrary values and extend configurations is interesting because this property accepts percentage values in addition to global values.

I found myself deliberating between using font-stretch and simply stretch. I would appreciate your guidance on which option is more suitable for this.

Documentation

Additional documentation of font-stretch property on MDN

If this feature is accepted, I could also take care of creating the corresponding documentation in https://github.com/tailwindlabs/tailwindcss.com.

Related discussions

#10156
#5686
#8324

@RobinMalfait RobinMalfait changed the base branch from master to archive/master-2024-02-23 March 4, 2024 21:46
KrisBraun added a commit that referenced this pull request Mar 8, 2024
Based on #12171.

Add [`font-stretch`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-stretch) utilities. Naming with `font-stretch` rather than `stretch` since the latter isn't clearly associated with fonts. Named values (e.g. `font-stretch-ulta-expanded`) and percentages (e.g. `font-stretch-50`) are supported.

---
Co-authored-by: Gregory Gerard <contact@gregory-gerard.dev>
@KrisBraun
Copy link
Contributor

Hey @Gregory-Gerard,

Thanks for contributing! These utilities will be helpful. With Tailwind CSS v4 coming, we'll add new feature there. I've opened #13153 to add font-stretch utilities to v4.

Thanks again for contributing!

@KrisBraun KrisBraun closed this Mar 8, 2024
KrisBraun added a commit that referenced this pull request Mar 8, 2024
* [v4] Add `font-stretch` utilities

Based on #12171 y @Gregory-Gerard.

Add [`font-stretch`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-stretch) utilities. Naming with `font-stretch` rather than `stretch` since the latter isn't clearly associated with fonts. Named values (e.g. `font-stretch-ulta-expanded`) and percentages (e.g. `font-stretch-50`) are supported.
@Gregory-Gerard Gregory-Gerard deleted the font-stretch branch March 9, 2024 14:52
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