Il tema Tailwind di Magma sostituisce i valori predefiniti di Tailwind con i token di Magma. Importalo nel punto di ingresso di Tailwind dopo il tema e le utility di Tailwind, senza il suo preflight (Magma ha il suo 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';

La configurazione completa, compresi i cascade layer, è in Installazione. Tutto quello che c’è in questa pagina è generato da styles/dist/tailwind/consumption.json, che Magma costruisce dal design system di Tailwind stesso.

Come un token diventa una classe

Il tema pubblica ogni token come variabile di un namespace di Tailwind: --magma-text-muted è --color-fg-muted, quindi le utility di --color lo prendono con la chiave fg-muted: text-fg-muted, bg-fg-muted, border-fg-muted. I passi numerici vengono da --spacing: 0.0025rem: gap-400 è 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-*e altre 39

--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-*e altre 111

--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-*e altre 3

--shadow-*39

shadow-*

Classi che leggono un altro token

Dove due namespace hanno la stessa chiave, alcune classi leggono l’altro. Le utility di larghezza leggono prima la spaziatura: max-w-xs è --spacing-xs, non --container-xs. Per il token dell’ultima colonna scrivi il suo valore arbitrario: 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

Token che nessuna utility legge

Tailwind 4 non ha un namespace per gli spessori dei bordi: border-xs non esiste, usa il valore arbitrario. Le durate le legge da --transition-duration-*, che styles non pubblica: duration-200 scrive 200ms, il valore di --duration-200, senza leggere la variabile. --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)

Utility di Magma

Le classi @utility di styles e design-tokens, con i token e le variabili di Tailwind che leggono. 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

Il main del pacchetto styles è un preset per Tailwind 3, con i layer in dist/tailwind3/. Non funziona con Tailwind 4 ed è legacy: questa pagina e la mappa di consumo riguardano solo Tailwind 4.