Viewport unit classes

Tailwind’s spacing utilities (p-4, gap-6, w-24) multiply --spacing. These classes redefine --spacing for an element and its children, so every spacing utility inside scales with the viewport relative to a design width. --screen-current is the design width of the active breakpoint.

Class	Styles
vw	--spacing: calc(4 / var(--screen-current) * 100vw);
vw-1	--spacing: calc(1 / var(--screen-current) * 100vw);
vw-px	--spacing: calc(1 / var(--screen-current) * 100vw);
spacing-reset	--spacing: 4px;
vw-1-2xl	--spacing: calc(1 / 1920 * 100vw);
vw-1-3xl	--spacing: calc(1 / 2560 * 100vw);
vw-1-lg	--spacing: calc(1 / 1192 * 100vw);
vw-1-md	--spacing: calc(1 / 768 * 100vw);
vw-1-sm	--spacing: calc(1 / 390 * 100vw);
vw-1-xl	--spacing: calc(1 / 1440 * 100vw);
vw-2xl	--spacing: calc(4 / 1920 * 100vw);
vw-3xl	--spacing: calc(4 / 2560 * 100vw);
vw-lg	--spacing: calc(4 / 1192 * 100vw);
vw-md	--spacing: calc(4 / 768 * 100vw);
vw-px-2xl	--spacing: calc(1 / 1920 * 100vw);
vw-px-3xl	--spacing: calc(1 / 2560 * 100vw);
vw-px-lg	--spacing: calc(1 / 1192 * 100vw);
vw-px-md	--spacing: calc(1 / 768 * 100vw);
vw-px-sm	--spacing: calc(1 / 390 * 100vw);
vw-px-xl	--spacing: calc(1 / 1440 * 100vw);
vw-sm	--spacing: calc(4 / 390 * 100vw);
vw-xl	--spacing: calc(4 / 1440 * 100vw);