Gradient css variables not working in v4.1.3 with Web Components

[Poimen]

We use Tailwind in a web component build. In version 4.1.1, Tailwind generated:

@layer base {

    *,
    ::backdrop,
    :after,
    :before {
        border: 0 solid;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        --tw-space-y-reverse: 0;
        --tw-border-style: solid;
        --tw-gradient-position: initial;
        --tw-gradient-from: #0000;
        --tw-gradient-via: #0000;
        --tw-gradient-to: #0000;
        --tw-gradient-stops: initial;
        --tw-gradient-via-stops: initial;
        --tw-gradient-from-position: 0%;
        --tw-gradient-via-position: 50%;
        --tw-gradient-to-position: 100%;
        --tw-font-weight: initial;
        --tw-shadow: 0 0 #0000;
        --tw-shadow-color: initial;
        --tw-shadow-alpha: 100%;
        --tw-inset-shadow: 0 0 #0000;
        --tw-inset-shadow-color: initial;
        --tw-inset-shadow-alpha: 100%;
        --tw-ring-color: initial;
        --tw-ring-shadow: 0 0 #0000;
        --tw-inset-ring-color: initial;
        --tw-inset-ring-shadow: 0 0 #0000;
        --tw-ring-inset: initial;
        --tw-ring-offset-width: 0px;
        --tw-ring-offset-color: #fff;
        --tw-ring-offset-shadow: 0 0 #0000;
        --tw-space-x-reverse: 0
    }

This worked fine. However, after upgrading to version 4.1.3, Tailwind moves these variables to:

@layer properties {
    @supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))) {

        *,
        ::backdrop,
        :after,
        :before {
            --tw-space-y-reverse: 0;
            --tw-border-style: solid;
            --tw-gradient-position: initial;
            --tw-gradient-from: #0000;
            --tw-gradient-via: #0000;
            --tw-gradient-to: #0000;
            --tw-gradient-stops: initial;
            --tw-gradient-via-stops: initial;
            --tw-gradient-from-position: 0%;
            --tw-gradient-via-position: 50%;
            --tw-gradient-to-position: 100%;
            --tw-font-weight: initial;
            --tw-shadow: 0 0 #0000;
            --tw-shadow-color: initial;
            --tw-shadow-alpha: 100%;
            --tw-inset-shadow: 0 0 #0000;
            --tw-inset-shadow-color: initial;
            --tw-inset-shadow-alpha: 100%;
            --tw-ring-color: initial;
            --tw-ring-shadow: 0 0 #0000;
            --tw-inset-ring-color: initial;
            --tw-inset-ring-shadow: 0 0 #0000;
            --tw-ring-inset: initial;
            --tw-ring-offset-width: 0px;
            --tw-ring-offset-color: #fff;
            --tw-ring-offset-shadow: 0 0 #0000;
            --tw-space-x-reverse: 0
        }
    }
}

@layer base {

    *,
    ::backdrop,
    :after,
    :before {
        border: 0 solid;
        box-sizing: border-box;
        margin: 0;
        padding: 0
    }

This then causes the browser to report that the variables are missing:

If I take the same output from v4.1.3 into a normal style.css in a index.html (i.e. no web component) then it works as expected. My conclusion is that the output from v4.1.3 is workable, but something in the way web components use's style doesn't agree with @layer properties.

Does anyone know how to resolve this with web components?