Extending existing theme options in V4

[SebastianPfliegel]

In the JS config files theme options could be extended with the spread operator like this:

const defaultTheme = require('tailwindcss/defaultTheme')

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

How would I accomplish this behaviour in the CSS config files? I tried the following:

@import "tailwindcss";

@theme {
  --font-serif: "MyFont", var(--font-serif)
  --font-newfont: "MyFont", var(--font-serif)
}

The first try with overriding the existing --font-serif does not work. Creating a new font based on --font-serif works though.

[dvzrd]

I also ran into a similar issue. I had to do the following to get my fonts to work with the default fallbacks:

@theme inline {
  --font-serif: var(--font-family-serif);
  --font-newfont: var(--font-family-newfont);
}

@layer base {
  :root {
    --font-family-serif: "MyFont", var(--font-serif);
    --font-family-newfont: "MyFont", var(--font-serif);
  }
}