Fluid Spaces

Fluid values for Tailwind's spacing scale, from your smallest to your largest viewport.

How fluid sizes work

With breakpoints a space jumps: p-8 stays 32px until you add md:p-10 or lg:p-12. Between two breakpoints the layout is either too airy on a small phone or too tight on a wide screen.

A fluid size grows linearly with the viewport between Min Width and Max Width and stays fixed outside them. CSS clamp() does it in one line: a minimum, a value that follows the viewport width (vi) and a maximum.

--spacing-8: clamp(2rem, 1.7913rem + 1.0435vi, 2.6rem);

spacing 8 grows from 32px at 320px to 41.6px at 1240px

  • No media queries: p-8 instead of p-8 md:p-10 lg:p-12.
  • Paddings, margins and gaps grow with the text, so the layout keeps its rhythm.
  • Values are in rem, so they still follow the font size the user set in the browser.
NameMin size Tailwind defaultMax size
0
px
px
0.5
px
px
1
px
px
1.5
px
px
2
px
px
2.5
px
px
3
px
px
3.5
px
px
4
px
px
5
px
px
6
px
px
7
px
px
8
px
px
9
px
px
10
px
px
11
px
px
12
px
px
14
px
px
16
px
px
20
px
px
24
px
px
28
px
px
32
px
px
36
px
px
40
px
px
44
px
px
48
px
px
52
px
px
56
px
px
60
px
px
64
px
px
72
px
px
80
px
px
96
px
px
:root {
   --wabtu-0: 0rem;
   --wabtu-0.5: clamp(0.125rem, 0.1120rem + 0.0652vi, 0.1625rem);
   --wabtu-1: clamp(0.25rem, 0.2239rem + 0.1304vi, 0.325rem);
   --wabtu-1.5: clamp(0.375rem, 0.3359rem + 0.1957vi, 0.4875rem);
   --wabtu-2: clamp(0.5rem, 0.4478rem + 0.2609vi, 0.65rem);
   --wabtu-2.5: clamp(0.625rem, 0.5598rem + 0.3261vi, 0.8125rem);
   --wabtu-3: clamp(0.75rem, 0.6717rem + 0.3913vi, 0.975rem);
   --wabtu-3.5: clamp(0.875rem, 0.7837rem + 0.4565vi, 1.1375rem);
   --wabtu-4: clamp(1rem, 0.8957rem + 0.5217vi, 1.3rem);
   --wabtu-5: clamp(1.25rem, 1.1196rem + 0.6522vi, 1.625rem);
   --wabtu-6: clamp(1.5rem, 1.3435rem + 0.7826vi, 1.95rem);
   --wabtu-7: clamp(1.75rem, 1.5674rem + 0.9130vi, 2.275rem);
   --wabtu-8: clamp(2rem, 1.7913rem + 1.0435vi, 2.6rem);
   --wabtu-9: clamp(2.25rem, 2.0152rem + 1.1739vi, 2.925rem);
   --wabtu-10: clamp(2.5rem, 2.2391rem + 1.3043vi, 3.25rem);
   --wabtu-11: clamp(2.75rem, 2.4630rem + 1.4348vi, 3.575rem);
   --wabtu-12: clamp(3rem, 2.6870rem + 1.5652vi, 3.9rem);
   --wabtu-14: clamp(3.5rem, 3.1348rem + 1.8261vi, 4.55rem);
   --wabtu-16: clamp(4rem, 3.5826rem + 2.0870vi, 5.2rem);
   --wabtu-20: clamp(5rem, 4.4783rem + 2.6087vi, 6.5rem);
   --wabtu-24: clamp(6rem, 5.3739rem + 3.1304vi, 7.8rem);
   --wabtu-28: clamp(7rem, 6.2696rem + 3.6522vi, 9.1rem);
   --wabtu-32: clamp(8rem, 7.1652rem + 4.1739vi, 10.4rem);
   --wabtu-36: clamp(9rem, 8.0609rem + 4.6957vi, 11.7rem);
   --wabtu-40: clamp(10rem, 8.9565rem + 5.2174vi, 13rem);
   --wabtu-44: clamp(11rem, 9.8522rem + 5.7391vi, 14.3rem);
   --wabtu-48: clamp(12rem, 10.7478rem + 6.2609vi, 15.6rem);
   --wabtu-52: clamp(13rem, 11.6435rem + 6.7826vi, 16.9rem);
   --wabtu-56: clamp(14rem, 12.5391rem + 7.3043vi, 18.2rem);
   --wabtu-60: clamp(15rem, 13.4348rem + 7.8261vi, 19.5rem);
   --wabtu-64: clamp(16rem, 14.3304rem + 8.3478vi, 20.8rem);
   --wabtu-72: clamp(18rem, 16.1217rem + 9.3913vi, 23.4rem);
   --wabtu-80: clamp(20rem, 17.9130rem + 10.4348vi, 26rem);
   --wabtu-96: clamp(24rem, 21.4957rem + 12.5217vi, 31.2rem);
}
@theme {
  --spacing-0: 0rem;
  --spacing-0_5: clamp(0.125rem, 0.1120rem + 0.0652vi, 0.1625rem);
  --spacing-1: clamp(0.25rem, 0.2239rem + 0.1304vi, 0.325rem);
  --spacing-1_5: clamp(0.375rem, 0.3359rem + 0.1957vi, 0.4875rem);
  --spacing-2: clamp(0.5rem, 0.4478rem + 0.2609vi, 0.65rem);
  --spacing-2_5: clamp(0.625rem, 0.5598rem + 0.3261vi, 0.8125rem);
  --spacing-3: clamp(0.75rem, 0.6717rem + 0.3913vi, 0.975rem);
  --spacing-3_5: clamp(0.875rem, 0.7837rem + 0.4565vi, 1.1375rem);
  --spacing-4: clamp(1rem, 0.8957rem + 0.5217vi, 1.3rem);
  --spacing-5: clamp(1.25rem, 1.1196rem + 0.6522vi, 1.625rem);
  --spacing-6: clamp(1.5rem, 1.3435rem + 0.7826vi, 1.95rem);
  --spacing-7: clamp(1.75rem, 1.5674rem + 0.9130vi, 2.275rem);
  --spacing-8: clamp(2rem, 1.7913rem + 1.0435vi, 2.6rem);
  --spacing-9: clamp(2.25rem, 2.0152rem + 1.1739vi, 2.925rem);
  --spacing-10: clamp(2.5rem, 2.2391rem + 1.3043vi, 3.25rem);
  --spacing-11: clamp(2.75rem, 2.4630rem + 1.4348vi, 3.575rem);
  --spacing-12: clamp(3rem, 2.6870rem + 1.5652vi, 3.9rem);
  --spacing-14: clamp(3.5rem, 3.1348rem + 1.8261vi, 4.55rem);
  --spacing-16: clamp(4rem, 3.5826rem + 2.0870vi, 5.2rem);
  --spacing-20: clamp(5rem, 4.4783rem + 2.6087vi, 6.5rem);
  --spacing-24: clamp(6rem, 5.3739rem + 3.1304vi, 7.8rem);
  --spacing-28: clamp(7rem, 6.2696rem + 3.6522vi, 9.1rem);
  --spacing-32: clamp(8rem, 7.1652rem + 4.1739vi, 10.4rem);
  --spacing-36: clamp(9rem, 8.0609rem + 4.6957vi, 11.7rem);
  --spacing-40: clamp(10rem, 8.9565rem + 5.2174vi, 13rem);
  --spacing-44: clamp(11rem, 9.8522rem + 5.7391vi, 14.3rem);
  --spacing-48: clamp(12rem, 10.7478rem + 6.2609vi, 15.6rem);
  --spacing-52: clamp(13rem, 11.6435rem + 6.7826vi, 16.9rem);
  --spacing-56: clamp(14rem, 12.5391rem + 7.3043vi, 18.2rem);
  --spacing-60: clamp(15rem, 13.4348rem + 7.8261vi, 19.5rem);
  --spacing-64: clamp(16rem, 14.3304rem + 8.3478vi, 20.8rem);
  --spacing-72: clamp(18rem, 16.1217rem + 9.3913vi, 23.4rem);
  --spacing-80: clamp(20rem, 17.9130rem + 10.4348vi, 26rem);
  --spacing-96: clamp(24rem, 21.4957rem + 12.5217vi, 31.2rem);
}