Blazor Tailwind 4 Integration - max-width based media breakpoints

I am attempting to use Tailwind 4 with Blazor application where I want to use max-width based media breakpoints (bigger screens override smaller screens).

my source CSS config looks like this:

@import "tailwindcss";

@layer base {
    html ul, html ol {
        list-style: revert;
        margin-left: 20px;
        padding-left: 20px;
    }
}

@plugin "@tailwindcss/typography";

@layer components {
    [type='text'],
    input:where(:not([type])),
    [type='email'],
    [type='url'],
    [type='password'],
    [type='number'],
    [type='date'],
    [type='datetime-local'],
    [type='month'],
    [type='search'],
    [type='tel'],
    [type='time'],
    [type='week'],
    [multiple] {
        @apply bg-gray-100 border-none rounded-md p-2 text-gray-800 focus:ring-blue-500 focus:border-blue-500;
    }
}

@theme {
    --breakpoint- *: initial;   
}

@custom-variant 4xl (@media (max-width: 2047px));
@custom-variant 3xl (@media (max-width: 1791px));
@custom-variant 2xl (@media (max-width: 1535px));
@custom-variant xl (@media (max-width: 1279px));
@custom-variant lg (@media (max-width: 1023px));
@custom-variant md (@media (max-width: 767px));
@custom-variant sm (@media (max-width: 639px));

When I attempt to test screens with the following sample - it defaults to w-96 h-96 border-green-600 on utmost screen size but only switches to classes defined by lg: prefix and never adjusts to smaller sizes even when screen is resized to small size accordingly. So lg:w-80 lg:h-80 lg:border-yellow-600 remain in effect overriding smaller prefix even on smaller screens where i would expect smaller screen media constrains to take effect.

 <div class="mx-auto w-96 lg:w-80 md:w-64 sm:w-48 h-96 lg:h-80 md:h-64 sm:h-48 border-2 rounded-md border-green-600 lg:border-yellow-600 md:border-blue-600 sm:border-red-600">

 </div>

I am obviously either missing or misunderstanding something. any guidance on the subject is greatly appreciated. the full sample of Blazor project can be found here: Sample Prototype Blazor Project

It's just typo:

- --breakpoint- *: initial;
+ --breakpoint-*: initial;