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 prefies 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