Merge typography styles

Merge typography styles is a feature specifically designed for Tailwind CSS that intelligently combines font-related variables into a configuration format that adheres to Tailwind conventions.

How it works

When you define font-related variables in Figma (such as font size, line height, etc.), Variables Xporter will:

1. Identify relevant variables
2. Combine variables according to naming rules
3. Generate Tailwind CSS configuration

Example conversion

Figma Variables:

• font-size/heading-1/DEFAULT
• font-size/heading-1/line-height
• font-size/heading-1/font-weight

Converted Tailwind CSS configuration or CSS variables:

@theme {
--text-heading-1: 2.5rem;
--text-heading-1--line-height: 1.2;
--text-heading-1--font-weight: 600;
}

module.exports = {
theme: {
  fontSize: {
    'heading-1': ['2.5rem', {
      lineHeight: '1.2',
      fontWeight: '600'
    }]
  }
}
}

:root {
--font-size-heading-1: 2.5rem;
--font-size-heading-1-line-height: 1.2;
--font-size-heading-1-font-weight: 600;
}

Naming conventions

To ensure Variables Xporter correctly identifies and merges variables, please follow these naming rules:

1. Basic naming format

font-size/{variable}/{property}

2. Supported properties

   • font-size
   • line-height
   • font-weight
   • letter-spacing

3. Example naming

• font-size/sm/DEFAULT
• font-size/sm/line-height
• font-size/sm/font-weight
• font-size/sm/letter-spacing

Learn more about organizing typography and font variables in Figma: