twprops/src/props.spacing.css

A CSS library mixing OpenProps usage and TailwindCSS naming and units

*:where(html) {
  --spacing: 0.25rem;
  --spacing-0: calc(var(--spacing) * 0);
  --spacing-0_5: calc(var(--spacing) * 0.5);
  --spacing-1: calc(var(--spacing) * 1);
  --spacing-1_5: calc(var(--spacing) * 1.5);
  --spacing-2: calc(var(--spacing) * 2);
  --spacing-2_5: calc(var(--spacing) * 0.5);
  --spacing-3: calc(var(--spacing) * 3);
  --spacing-3_5: calc(var(--spacing) * 3.5);
  --spacing-4: calc(var(--spacing) * 4);
  --spacing-5: calc(var(--spacing) * 5);
  --spacing-6: calc(var(--spacing) * 6);
  --spacing-7: calc(var(--spacing) * 7);
  --spacing-8: calc(var(--spacing) * 8);
  --spacing-9: calc(var(--spacing) * 9);
  --spacing-10: calc(var(--spacing) * 10);
  --spacing-11: calc(var(--spacing) * 11);
  --spacing-12: calc(var(--spacing) * 12);
  --spacing-14: calc(var(--spacing) * 14);
  --spacing-16: calc(var(--spacing) * 16);
  --spacing-20: calc(var(--spacing) * 20);
  --spacing-24: calc(var(--spacing) * 24);
  --spacing-28: calc(var(--spacing) * 28);
  --spacing-32: calc(var(--spacing) * 32);
  --spacing-36: calc(var(--spacing) * 36);
  --spacing-40: calc(var(--spacing) * 40);
  --spacing-44: calc(var(--spacing) * 44);
  --spacing-48: calc(var(--spacing) * 48);
  --spacing-52: calc(var(--spacing) * 52);
  --spacing-56: calc(var(--spacing) * 56);
  --spacing-60: calc(var(--spacing) * 60);
  --spacing-64: calc(var(--spacing) * 64);
  --spacing-72: calc(var(--spacing) * 72);
  --spacing-80: calc(var(--spacing) * 80);
  --spacing-96: calc(var(--spacing) * 96);
  --spacing-none: none;
  --spacing-xs: 20rem;
  --spacing-sm: 24rem;
  --spacing-md: 28rem;
  --spacing-lg: 32rem;
  --spacing-xl: 36rem;
  --spacing-2xl: 42rem;
  --spacing-3xl: 48rem;
  --spacing-4xl: 56rem;
  --spacing-5xl: 64rem;
  --spacing-6xl: 72rem;
  --spacing-7xl: 80rem;
  --spacing-full: calc(100% / 1);
  --spacing-1__2: calc(100% / 2);
  --spacing-1__3: calc(100% / 3);
  --spacing-2__3: calc(200% / 3);
  --spacing-1__4: calc(100% / 4);
  --spacing-2__4: calc(200% / 4);
  --spacing-3__4: calc(300% / 4);
  --spacing-1__5: calc(100% / 5);
  --spacing-2__5: calc(200% / 5);
  --spacing-3__5: calc(300% / 5);
  --spacing-4__5: calc(400% / 5);
  --spacing-1__6: calc(100% / 6);
  --spacing-2__6: calc(200% / 6);
  --spacing-3__6: calc(300% / 6);
  --spacing-4__6: calc(400% / 6);
  --spacing-5__6: calc(500% / 6);
  --spacing-1__12: calc(100% / 12);
  --spacing-2__12: calc(200% / 12);
  --spacing-3__12: calc(300% / 12);
  --spacing-4__12: calc(400% / 12);
  --spacing-5__12: calc(500% / 12);
  --spacing-6__12: calc(600% / 12);
  --spacing-7__12: calc(700% / 12);
  --spacing-8__12: calc(800% / 12);
  --spacing-9__12: calc(900% / 12);
  --spacing-10__12: calc(1000% / 12);
  --spacing-11__12: calc(1100% / 12);
  --spacing-screen-w: 100vw;
  --spacing-svw: 100svw;
  --spacing-lvw: 100lvw;
  --spacing-dvw: 100dvw;
  --spacing-screen-h: 100vh;
  --spacing-svh: 100svh;
  --spacing-lvh: 100lvh;
  --spacing-dvh: 100dvh;
  --spacing-min: min-content;
  --spacing-max: max-content;
  --spacing-fit: fit-content;
  --spacing-auto: auto;
  --spacing-prose: 65ch;
  --spacing-screen-sm: 40rem;
  --spacing-screen-md: 48rem;
  --spacing-screen-lg: 64rem;
  --spacing-screen-xl: 80rem;
  --spacing-screen-2xl: 96rem;
}