Magma’s Tailwind theme replaces Tailwind’s defaults with the tokens of Magma. Import it in your Tailwind entry point after Tailwind’s own theme and utilities, without its preflight (Magma has its own reset):

@import 'tailwindcss/theme.css' layer(theme);
@import 'tailwindcss/utilities.css' layer(utilities);
@import '@maggioli-design-system/styles/dist/tailwind/theme.css';
@import '@maggioli-design-system/styles/dist/tailwind/typography.css';
@import '@maggioli-design-system/styles/dist/tailwind/utilities.css';

The whole setup, the cascade layers included, is in Installation. Everything on this page is generated from styles/dist/tailwind/consumption.json, which Magma builds from Tailwind’s own design system.

How a token becomes a class

The theme publishes each token as a variable of a Tailwind namespace: --magma-text-muted is --color-fg-muted, so the --color utilities take it with the key fg-muted: text-fg-muted, bg-fg-muted, border-fg-muted. The numeric steps come from --spacing: 0.0025rem: gap-400 is 400 x 0.0025rem, 1rem. --color-*492

accent-*bg-*border-*border-b-*border-be-*border-bs-*border-e-*border-l-*border-r-*border-s-*border-t-*border-x-*and 39 more

--font-*4

font-*

--text-*18

text-*

--leading-*9

leading-*

--spacing-*14

basis-*block-*border-spacing-*border-spacing-x-*border-spacing-y-*bottom-*gap-*gap-x-*gap-y-*h-*indent-*inline-*and 111 more

--container-*14

@*:@max-*:@min-*:basis-*columns-*inline-*max-inline-*max-w-*min-inline-*min-w-*w-*

--breakpoint-*7

*:max-*:min-*:not-*:

--aspect-*8

aspect-*

--ease-*24

ease-*

--radius-*24

rounded-*rounded-b-*rounded-bl-*rounded-br-*rounded-e-*rounded-ee-*rounded-es-*rounded-l-*rounded-r-*rounded-s-*rounded-se-*rounded-ss-*and 3 more

--shadow-*39

shadow-*

Classes that read another token

Where two namespaces share a key, some classes read the other one. The width utilities read the spacing first: max-w-xs is --spacing-xs, not --container-xs. For the token in the last column, write its arbitrary value: max-w-(--container-xs). leading-xs--leading-xs--spacing-xs

leading-sm--leading-sm--spacing-sm

leading-md--leading-md--spacing-md

leading-lg--leading-lg--spacing-lg

leading-xl--leading-xl--spacing-xl

leading-2xl--leading-2xl--spacing-2xl

leading-3xl--leading-3xl--spacing-3xl

leading-4xl--leading-4xl--spacing-4xl

max-w-prose--max-width-prose--spacing-prose

basis-xs--spacing-xs--container-xs

inline-xs--spacing-xs--container-xs

max-inline-xs--spacing-xs--container-xs

max-w-xs--spacing-xs--container-xs

min-inline-xs--spacing-xs--container-xs

min-w-xs--spacing-xs--container-xs

w-xs--spacing-xs--container-xs

basis-sm--spacing-sm--container-sm

inline-sm--spacing-sm--container-sm

max-inline-sm--spacing-sm--container-sm

max-w-sm--spacing-sm--container-sm

min-inline-sm--spacing-sm--container-sm

min-w-sm--spacing-sm--container-sm

w-sm--spacing-sm--container-sm

basis-md--spacing-md--container-md

inline-md--spacing-md--container-md

max-inline-md--spacing-md--container-md

max-w-md--spacing-md--container-md

min-inline-md--spacing-md--container-md

min-w-md--spacing-md--container-md

w-md--spacing-md--container-md

basis-lg--spacing-lg--container-lg

inline-lg--spacing-lg--container-lg

max-inline-lg--spacing-lg--container-lg

max-w-lg--spacing-lg--container-lg

min-inline-lg--spacing-lg--container-lg

min-w-lg--spacing-lg--container-lg

w-lg--spacing-lg--container-lg

basis-xl--spacing-xl--container-xl

inline-xl--spacing-xl--container-xl

max-inline-xl--spacing-xl--container-xl

max-w-xl--spacing-xl--container-xl

min-inline-xl--spacing-xl--container-xl

min-w-xl--spacing-xl--container-xl

w-xl--spacing-xl--container-xl

basis-2xl--spacing-2xl--container-2xl

inline-2xl--spacing-2xl--container-2xl

max-inline-2xl--spacing-2xl--container-2xl

max-w-2xl--spacing-2xl--container-2xl

min-inline-2xl--spacing-2xl--container-2xl

min-w-2xl--spacing-2xl--container-2xl

w-2xl--spacing-2xl--container-2xl

basis-3xl--spacing-3xl--container-3xl

inline-3xl--spacing-3xl--container-3xl

max-inline-3xl--spacing-3xl--container-3xl

max-w-3xl--spacing-3xl--container-3xl

min-inline-3xl--spacing-3xl--container-3xl

min-w-3xl--spacing-3xl--container-3xl

w-3xl--spacing-3xl--container-3xl

basis-4xl--spacing-4xl--container-4xl

inline-4xl--spacing-4xl--container-4xl

max-inline-4xl--spacing-4xl--container-4xl

max-w-4xl--spacing-4xl--container-4xl

min-inline-4xl--spacing-4xl--container-4xl

min-w-4xl--spacing-4xl--container-4xl

w-4xl--spacing-4xl--container-4xl

Tokens no utility reads

Tailwind 4 has no namespace for border widths: border-xs does not exist, use the arbitrary value. It reads durations from --transition-duration-*, which styles does not publish: duration-200 writes 200ms, the value of --duration-200, without reading the variable. --duration-75duration-75

--duration-100duration-100

--duration-150duration-150

--duration-200duration-200

--duration-300duration-300

--duration-500duration-500

--duration-700duration-700

--duration-1000duration-1000

--border-noneborder-(length:--border-none)

--border-xsborder-(length:--border-xs)

--border-smborder-(length:--border-sm)

--border-mdborder-(length:--border-md)

--border-lgborder-(length:--border-lg)

--border-xlborder-(length:--border-xl)

Magma utilities

The @utility classes of styles and design-tokens, with the tokens and Tailwind variables they read. text-title-h1--font-title--text-size-title-h1--text-size-title-h1--line-height--text-size-title-h1--letter-spacing--text-size-title-h1--font-weight--font-weight-blackstyles/dist/tailwind/typography.css

text-title-h2--font-title--text-size-title-h2--text-size-title-h2--line-height--text-size-title-h2--letter-spacing--text-size-title-h2--font-weight--font-weight-blackstyles/dist/tailwind/typography.css

text-title-h3--font-title--text-size-title-h3--text-size-title-h3--line-height--text-size-title-h3--letter-spacing--text-size-title-h3--font-weight--font-weight-blackstyles/dist/tailwind/typography.css

text-title-h4--font-title--text-size-title-h4--text-size-title-h4--line-height--text-size-title-h4--letter-spacing--text-size-title-h4--font-weight--font-weight-blackstyles/dist/tailwind/typography.css

text-title-h5--font-title--text-size-title-h5--text-size-title-h5--line-height--text-size-title-h5--letter-spacing--text-size-title-h5--font-weight--font-weight-blackstyles/dist/tailwind/typography.css

text-title-h6--font-title--text-size-title-h6--text-size-title-h6--line-height--text-size-title-h6--letter-spacing--text-size-title-h6--font-weight--font-weight-boldstyles/dist/tailwind/typography.css

text-title-action--font-title--text-size-title-action--text-size-title-action--line-height--text-size-title-action--font-weight--font-weight-mediumstyles/dist/tailwind/typography.css

text-info-paragraph--font-info--text-size-info-paragraph--text-size-info-paragraph--line-height--text-size-info-paragraph--font-weightstyles/dist/tailwind/typography.css

text-info-detail--font-info--text-size-info-detail--text-size-info-detail--line-height--text-size-info-detail--font-weightstyles/dist/tailwind/typography.css

text-info-caption--font-info--text-size-info-caption--text-size-info-caption--line-height--text-size-info-caption--font-weightstyles/dist/tailwind/typography.css

text-info-label--font-info--text-size-info-label--text-size-info-label--line-height--text-size-info-label--font-weight--font-weight-boldstyles/dist/tailwind/typography.css

text-info-option--font-info--text-size-info-option--text-size-info-option--line-height--text-size-info-option--letter-spacing--text-size-info-option--font-weight--font-weight-boldstyles/dist/tailwind/typography.css

text-info-tip--font-info--text-size-info-tip--text-size-info-tip--line-height--text-size-info-tip--font-weightstyles/dist/tailwind/typography.css

text-read-paragraph--font-read--text-size-read-paragraph--text-size-read-paragraph--line-height--text-size-read-paragraph--font-weight--font-weight-lightstyles/dist/tailwind/typography.css

text-read-detail--font-read--text-size-read-detail--text-size-read-detail--line-height--text-size-read-detail--font-weight--font-weight-lightstyles/dist/tailwind/typography.css

text-read-caption--font-read--text-size-read-caption--text-size-read-caption--line-height--text-size-read-caption--font-weightstyles/dist/tailwind/typography.css

text-code-snippet--font-code--text-size-code-snippet--text-size-code-snippet--line-height--text-size-code-snippet--font-weightstyles/dist/tailwind/typography.css

text-code-hack--font-code--text-size-code-hack--text-size-code-hack--line-height--text-size-code-hack--font-weightstyles/dist/tailwind/typography.css

transition-cosmetic--default-transition-timing-function--default-transition-durationdesign-tokens/dist/css/tailwind-theme-typography.css

transition-size--default-transition-timing-function--default-transition-durationdesign-tokens/dist/css/tailwind-theme-typography.css

grid-cols-fit-lg - design-tokens/dist/css/tailwind-theme-typography.css

grid-cols-fit-md - design-tokens/dist/css/tailwind-theme-typography.css

grid-cols-fit-sm - design-tokens/dist/css/tailwind-theme-typography.css

grid-cols-fit-xl - design-tokens/dist/css/tailwind-theme-typography.css

grid-cols-fit - design-tokens/dist/css/tailwind-theme-typography.css

grid-cols-full - design-tokens/dist/css/tailwind-theme-typography.css

focus-bounce--magma-outline-animation-duration--magma-outline-blur--magma-outline-blur-color--magma-outline-focus--ease-outstyles/dist/tailwind/utilities.css

focus-bounce--focused--magma-outline-focusstyles/dist/tailwind/utilities.css

text-box-uppercase - styles/dist/tailwind/utilities.css

text-box-vertical-margin - styles/dist/tailwind/utilities.css

text-box-vertical-align - styles/dist/tailwind/utilities.css

hide-scrollbar - styles/dist/tailwind/utilities.css

not-hydrated - styles/dist/tailwind/utilities.css

Tailwind 3

The package main of styles is a Tailwind 3 preset, with the layers in dist/tailwind3/. It does not work with Tailwind 4 and is legacy: this page and the consumption map cover Tailwind 4 only.