Replacement for fontFeatureSettings using @theme?

[dotNomad]

Currently I'm using the below in my tailwind.config.ts:

  theme: {
    extend: {
      fontFamily: {
        sans: [
          ["var(--font-inter)", ...fontFamily.sans],
          { fontFeatureSettings: "'ss07'" },
        ],
      },
    },
  },

I am trying to migrate to the new @theme setup in my CSS file, but I'm unsure how to duplicate the fontFeatureSettings functionality for font-sans

[dotNomad]

With some experimentation I found the below works well, applying both the font-family and the font-feature-settings:

// globals.css

@theme inline {
  --font-sans: var(--font-inter), sans-serif;
  ...
}

@utility font-sans {
  font-feature-settings: "ss07";
}

Unsure if that is the expected way to accomplish this though.

[wongjn]

As per the documentation, you can configure it in @theme:

@theme inline {
  --font-sans: var(--font-inter), sans-serif;
  --font-sans--font-feature-settings: "ss07";
}

[dotNomad]

Thank you. I missed that in my searching 🤦