Tailwind CSS V4

Tailwind CSS has released version 4, introducing many new features and improved performance. When choosing the Tailwind CSS V4 export method, Variables Xporter will generate a file:

• app.css - contains all Tailwind CSS configurations and CSS variables

Features and optimizations

1. Color value optimization

Automatically converts color values to oklch format, supporting opacity modifiers:

@theme {
  --color-primary: oklch(0.94 0.024 17.6);
}

Usage example:

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

2. Merged typography styles

Automatically merges related typography style variables, conforming to Tailwind CSS V4 conventions:

@theme {
--text-lg: 1.125rem;
--text-lg--line-height: 1.75rem;
}

3. Multi-mode support

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

@theme {
  --color-primary: var(--color-red-500);
}
 
.dark {
  --color-primary: var(--color-red-400);
}
 

Learn more details about multi-mode support:

4. Powerful compatibility

Variables Xporter supports both Tailwind CSS V3 and Tailwind CSS V4 export methods, and a set of Figma Variables can be seamlessly switched between the two export methods without any changes. Variables Xporter automatically adjusts the export internally according to the naming conventions of different versions.

Variable organization recommendations

To ensure perfect export of Figma Variables, variable naming needs to follow certain rules, as it needs to correspond to Tailwind CSS configuration keys. Moreover, a good variable organization method can bring many benefits:

• Improve variable maintainability
• Maintain design system consistency
• Facilitate 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.