Responsive Breakpoints

Use the Tailwind breakpoints defined by the site core for responsive theme CSS. The standard Tailwind breakpoints are extended with xs and 3xl. Use breakpoint variants such as @variant max-md and @variant 3xl; never hardcode breakpoint widths in pixels or other units.

Correct

@layer themePart {
    .menu {
        @variant max-md {
            @apply hidden;
        }
    }
}
@layer themePart {
    .menu {
        @variant 3xl {
            @apply flex;
        }
    }
}

Incorrect

@media (max-width: 767px) { .menu { display: none; } }
@media (width >= 48rem) { .menu { display: flex; } }
@apply max-[767px]:hidden;

Fix

Replace numeric media or container width thresholds and arbitrary breakpoint values with the appropriate Tailwind breakpoint variant from site core.