Skip to content

Create release post for design tokens

We've extended design token definitions to include properties and values used in Tailwind configuration.

What design tokens were added?

What benefit does this have?

Using design tokens to power Tailwind utilities means that there's a single source of truth for properties and values the design system supports, these are defined as JSON in GitLab UI following the Design Token Format Module. Design tokens are generated into Tailwind utilities, CSS custom properties, SCSS variables, and JS constants all from the same source value.

Additions and modifications to values are made in a single location in design token JSON definitions and automatically propagated to all formats.

Consumers wishing to use Tailwind v4 CSS-first configuration with CSS custom properties now have spacing-scale, opacity, zindex, shadow, border-radius, and font properties available at the global :root scope.

Do I need to do anything?

You don't! Consumers can keep using Tailwind utilities as they were, but now they're powered by design tokens.

Edited by Scott de Jonge