How to Configure Font Styles with @theme in Tailwind CSS v4

I used tailwind.config.js like this:

export default {
  theme: {
    extend: {
      fontSize: {
        'heading-banner-title': ['88px', { lineHeight: '100px', fontWeight: '700' }],
      },
    },
  },
};

Now I want to use the same configuration in Tailwind v4, but using @theme:

@theme {
  --text-heading-banner-title: 88px; /* I also want to add line-height and font-weight */
}

Previously, I was using the following style:

.text-heading-banner-title {
  @apply text-[88px] leading-[100px] font-bold;
}

However, when using this approach, responsive prefixes (e.g., sm:text-heading-banner-title) do not work as expected.

As per the documentation, you can add the extra options as extra CSS variables seperated by two hyphens --:

<script src="https://unpkg.com/@tailwindcss/browser@4.1.3"></script>

<style type="text/tailwindcss">
@theme {
  --text-heading-banner-title: 88px;
  --text-heading-banner-title--line-height: 100px;
  --text-heading-banner-title--font-weight: 700;
}
</style>

<div class="text-heading-banner-title">
  Hello world
</div>