v4: how to use system-ui font in WebKit, too?

[metaleap]

This is really a WebKit-only issue it seems, but maybe one of you more-seasoned frontend devs here knows anyway... =)

So before installing&importing TW (^4.1.17), I could have my newly-begun (local-only, VanillaJS) SPA use the OS UI font just via body { font-family: system-ui } and that worked in all browsers.

But now, just by adding TailwindCSS, my helloworld gui's fonts stay stuck at some-or-other sans only in WebKit (ie Safari, at my end it's Konqueror, see screenshot below) despite all these attempts in my one .css file:

body, * {
    font-family: system-ui;
    --font-primary: system-ui;
    --font-display: system-ui;
    --default-font-family: system-ui;
}

:root {
    font-family: system-ui;
    --font-primary: system-ui;
    --font-display: system-ui;
    --default-font-family: system-ui;
}

@theme {
    --font-primary: system-ui;
    --font-display: system-ui;
    --default-font-family: system-ui;
}

@layer base {
    :root {
        font-family: system-ui;
        --font-primary: system-ui;
        --font-display: system-ui;
        --default-font-family: system-ui;
    }

    body, * {
        font-family: system-ui;
        --font-primary: system-ui;
        --font-display: system-ui;
        --default-font-family: system-ui;
    }
}

Replacing with system-ui, -apple-system makes no difference either... anyone know? Clearly WebKit can do system-ui: that worked before bringing in TailwindCSS.

[metaleap]

Ah, I was just mis-remembering... 😭