[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.

[giorgiopogliani]

What about some object at the end of the font-family array. There is something like that for the font-size.

Because I wanted to add a css rule for a specific font family something like this:

module.exports = {
  theme: {
    extend: {
      fontFamily: [
        "My Font",
        ...defaultTheme.fontFamily.serif,
        {
          fontFeatureSettings: '"SS02" on, "SS03" on, "SS04" on',
        },
      ],
    },
  },
};

Is there a way I can do this with a plugin?

[rozsazoltan]

References (from v4.2):

• Add font-features-* utility for font-feature-settings #19623
• 4.2 tailwindcss.com#2445