Tailwind CSS V3

When choosing the Tailwind CSS export method, Variables Xporter generates two files:

• tailwind.config.js - The configuration file for Tailwind CSS
• global.css - Contains all CSS variable definitions

Features and optimizations

1. Color value optimization

Automatically converts color values to RGB channel format, supporting Tailwind’s opacity modifiers:

// tailwind.config.js
colors: {
  primary: 'rgb(var(--colors-primary-default))'
}
 
// global.css
:root {
  --colors-primary-default: 192 57 57;  /* RGB channel format */
}

Usage example:

<div class="text-primary/80">
  <!-- 80% opacity -->
  Hello World
</div>

2. Font variable merging

Automatically merges related font variables, conforming to Tailwind’s conventions:

fontSize: {
  'heading-1': ['2.5rem', { lineHeight: '1.2' }]
}

3. Multi-mode support

With the help of variable tracing and single source of truth principle, Variables Xporter can achieve complex multi-mode variable export.

:root {
  --colors-primary: var(--colors-primary-light);
}
 
.dark {
  --colors-primary: var(--colors-primary-dark);
}

Learn more details about multi-mode support:

4. Powerful compatibility

Variables Xporter supports export methods for both Tailwind CSS V3 and Tailwind CSS V4. A single set of Figma Variables can be seamlessly switched between these two export methods without any modifications. Variables Xporter automatically adjusts the export internally based on the naming conventions of different versions.

Variable organization recommendations

To ensure perfect export of Figma Variables, variable naming needs to follow certain rules, as they need to correspond with Tailwind CSS configuration keys. Additionally, a good variable organization approach offers many benefits:

• Improves variable maintainability
• Maintains design system consistency
• Facilitates team collaboration

Basic principles

You can first understand the basic principles of variable organization, which can help you make better decisions in terms of variable naming, grouping, and hierarchy.

Variable types

Then, you can further organize your variables based on different variable types.