Tailwind 4: How to create a 'font-heading' class that will take font-family and font-weight properties?

[vladbesson]

In tailwind 3 it was achieved with that

const tailwindConfig = {
  theme: {
    extend: {
      fontFamily: {
        heading: 'var(--bor-heading-font-family)'
      },
      fontWeight: {
        heading: 'var(--bor-heading-weight)'
      }
    }
  }
};

But in Tailwind 4 it does not work, only font-family is applying but not font-weight, and when I change that in css-first customisation it also does not work — only font-family is applying:

@import "tailwindcss";

@theme {
  --bor-heading-font-family: Inter, sans-serif;
  --bor-heading-weight: 700;

  --font-heading: var(--bor-heading-font-family);
  --font-weight-heading: var(--bor-heading-weight);
}

Here is the sandbox link — https://play.tailwindcss.com/5KFJdWt5yu?file=css

[vladbesson]

Of course, this can be achieved with the @layer utilities:

@layer utilities {
  .font-heading {
    font-family: var(--bor-heading-font-family);
    font-weight: var(--bor-heading-weight);
  }
}

But I'm wondering why the method with --font-family-heading and --font-weight-heading doesn't work

[wongjn]

See previous maintainer responses to this:

• Theme font-weight is lost if font-family is set #16752 (comment)
• Generated CSS for border-width is not consistent with v3 when importing a config with `@config` directive #16716 (comment)

[vladbesson]

Thank you!