Magma’s Tailwind theme sets --spacing to 0.0025rem, so a numeric step reads as a
size: p-100 is 100 x 0.0025rem, a quarter rem (4px), gap-400 is 1rem. Next to the
numbers come the named steps, and the text measures in ch: the widths that keep a line
readable (max-w-text for running text).N/A--spacing
-
0.0025rem
--spacing-nonegap-none0px
--spacing-xsgap-xs4px
--spacing-smgap-sm8px
--spacing-mdgap-md16px
--spacing-lggap-lg24px
--spacing-xlgap-xl32px
--spacing-2xlgap-2xl48px
--spacing-3xlgap-3xl64px
--spacing-4xlgap-4xl96px
N/A--spacing-phrasemax-w-phrase50ch
N/A--spacing-prosemax-w-prose65ch
N/A--spacing-textmax-w-text75ch
N/A--spacing-titlemax-w-title30ch
Sizing scale
The numeric steps the spacing, container, border and radius tokens are made of. They have
no custom property of their own: in Tailwind each one is a step of every spacing utility.size.0gap-00px
size.25gap-251px
size.50gap-502px
size.100gap-1004px
size.150gap-1506px
size.200gap-2008px
size.250gap-25010px
size.300gap-30012px
size.350gap-35014px
size.400gap-40016px
size.500gap-50020px
size.600gap-60024px
size.700gap-70028px
size.800gap-80032px
size.900gap-90036px
size.1000gap-100040px
size.1100gap-110044px
size.1200gap-120048px
size.1300gap-130052px
size.1400gap-140056px
size.1500gap-150060px
size.1600gap-160064px
size.2000gap-200080px
size.2400gap-240096px
size.2800gap-2800112px
size.3200gap-3200128px
size.3600gap-3600144px
size.4000gap-4000160px
size.4400gap-4400176px
size.4800gap-4800192px
size.5200gap-5200208px
size.5600gap-5600224px
size.6000gap-6000240px
size.6400gap-6400256px
size.7200gap-7200288px
size.8000gap-8000320px
size.9600gap-9600384px
size.10000gap-10000400px
size.11200gap-11200448px
size.12000gap-12000480px
size.12800gap-12800512px
size.14200gap-14200568px
size.16000gap-16000640px
size.18000gap-18000720px
size.19200gap-19200768px
size.20000gap-20000800px
size.24000gap-24000960px
size.25600gap-256001024px
size.28800gap-288001152px
size.32000gap-320001280px
size.34150gap-341501366px
size.36000gap-360001440px
size.38400gap-384001536px
size.48000gap-480001920px
size.64000gap-640002560px
Containers
Widths for content blocks and container queries. In Magma’s theme the width utilities
read the spacing of the same name before the container: max-w-xs is --spacing-xs, so
write max-w-(--container-xs) for the container. The container query variants (@md:)
read the containers.--container-4xsmax-w-4xs128px
--container-3xsmax-w-3xs192px
--container-2xsmax-w-2xs240px
--container-xsmax-w-(--container-xs)320px
--container-smmax-w-(--container-sm)384px
--container-mdmax-w-(--container-md)448px
--container-lgmax-w-(--container-lg)512px
--container-xlmax-w-(--container-xl)568px
--container-2xlmax-w-(--container-2xl)640px
--container-3xlmax-w-(--container-3xl)768px
--container-4xlmax-w-(--container-4xl)960px
--container-5xlmax-w-5xl1024px
--container-6xlmax-w-6xl1152px
--container-7xlmax-w-7xl1280px
Breakpoints
Tailwind variants, not utilities: tablet: applies from that width up, max-tablet:
below it.--breakpoint-mobilemobile:480px