[v4] Referencing the default theme font stack is unclear in CSS-first configuration

[romansp]

In v3 it was really easy to extend default font-family configuration by prepending sans:

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        'sans': ['"Inter"', ...defaultTheme.fontFamily.sans],
      },
    }
  }
}

In v4 there doesn't seem to be a way to reference that default font stack anymore via CSS-first configuration.

If I use the following definition —font-sans: "Inter"; it will negate default font stack causing browser to fallback to serif font while custom font is loading (font-display: swap is applied). So I need to somehow to reference default font stack in --font-sans variable.

Current workaround seems to be to copy default stack and declare

--font-sans: "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

But this feels really unnecessary.

Is there a more elegant solution to this problem? Or maybe tailwindcss v4 could declare css variable with default font stack for others to reference?

[RobinMalfait]

Hey!

Our goal with Tailwind CSS v4 is to keep things simple. If you want to customize your theme values then you can, but if you want to rely on default values that existed before, then you currently have to copy & paste them. It's a tiny bit more work, but luckily you typically only have to do that once.

We could make it work with some fancy syntax, but that would only introduce new syntax that you'd have to learn. Something that comes to mind: --font-sans: "Inter", theme(--font-sans); and then we'd have to make sure that that theme(--font-sans) uses the old values to prevent infinite loops.

[romansp]

Thanks @RobinMalfait. Fully support the idea to keep things simple. Thought it's not particularly clear how to migrate v3 config to v4 and not introduce serif font fallback issue. Migration guide doesn't cover that. Especially when v3 docs have this section https://tailwindcss.com/docs/font-family#customizing-the-default-font showing how to reference default theme.

Having --font-sans: "Inter", theme(--font-sans); would be amazing to be honest but also understand potential complexity to prevent infinite loop.