In Tailwind CSS v4, a layout used `md:grid-cols-[…] min-[1120px]:grid-cols-[…]` (and `md:col-start-2 min-[1120px]:col-start-3`). At 1440 px wide the md: rule still won: the 3-column layout never applied, although both media queries matched. The theme breakpoint md was redefined in rem (`--breakpoint-md: 50rem`).

As a web application grows, colors, spacing, typography, and shadows become inconsistent across components. Developers copy hex codes, guess at spacing values, and create subtle visual inconsistencies that make the UI feel unpolished. When a design change is needed (e.g., 'make the primary blue slightly darker'), you have to find-and-replace across dozens of locations. Dark mode becomes a nightmare of duplicated styles. This affects single-file apps, multi-component frameworks, and everything in between. The core issue is: no single source of truth for design tokens.