Tailwindcss: [Feature Proposal] Font Feature classes

[alexbowers]

Some OpenSans fonts have support for various font features, for example, making font numbers mono-spaced. This is useful for things like tabular data where a column lining up makes it easier to read.

https://developer.mozilla.org/en-US/docs/Web/CSS/font-feature-settings

Here is an example of a font with various settings: https://rsms.me/inter/#features

[philippbosch]

The challenge, as I see it, would be that font-feature-settings can have multiple values, e.g.

.allsmallcaps { font-feature-settings: "c2sc", "smcp"; }

(source)

From what I understand, that would mean we would need to generate tailwind classes for all possible combinations/permutations. This does not seem feasible.

For the feature request at hand (tabular numbers) it could make sense to look into font-variant-numeric instead which also accepts multiple values but has much fewer options. I need this, too, and am looking into creating a plugin for that. Will post here if I succeed.

[philippbosch]

Hey @alexbowers,

in the meantime, I have created a plugin for font-variant-numeric. If you're still interested check it out on Github or NPM (https://www.npmjs.com/package/tailwindcss-font-variant-numeric). If you do, any feedback is very much appreciated.

[adamwathan]

I wouldn't be opposed to adding this to core at some point but right now I think a plugin is a great solution. In general I'd like to try and make people more comfortable relying on plugins, and plan to create a page in the documentation that links to a bunch of user-authored plugins soon.

Going to close this with no concrete plans to add to core right now but can revisit in the future.

[hacknug]

Just in case someone lands here, this plugin adds support for some of the features mentioned in this issue: https://github.com/benface/tailwindcss-typography

[tillkruss]

@adamwathan: I think font-variant-numeric: tabular-nums; would be useful, since it's fantastic to format file sizes and prevent text jumping when animating numbers.