Il tema Tailwind di Magma imposta --spacing a 0.0025rem, quindi un passo numerico si
legge come una dimensione: p-100 è 100 x 0.0025rem, un quarto di rem (4px), gap-400
è 1rem. Accanto ai numeri ci sono i passi con un nome, e le misure del testo in ch: le
larghezze che tengono leggibile una riga (max-w-text per il testo corrente).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
Scala di dimensioni
I passi numerici di cui sono fatti i token di spaziatura, container, bordi e raggi. Non
hanno una custom property propria: in Tailwind ognuno è un passo di ogni utility di
spaziatura.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
Container
Larghezze per i blocchi di contenuto e per le container query. Nel tema di Magma le
utility di larghezza leggono la spaziatura con lo stesso nome prima del container:
max-w-xs è --spacing-xs, quindi per il container scrivi max-w-(--container-xs). Le
varianti delle container query (@md:) leggono i container.--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
Breakpoint
Varianti di Tailwind, non utility: tablet: vale da quella larghezza in su, max-tablet:
sotto.--breakpoint-mobilemobile:480px