CSS Variables

Choose the CSS Variables export method to generate clean, standard CSS variable definitions that work with any framework or vanilla CSS project. This approach offers maximum flexibility and compatibility, perfect for projects that don’t use Tailwind CSS or need custom CSS integration.

Features

1. Simple and intuitive

Directly outputs standard CSS custom properties:

:root {
  --colors-primary: #c03939;
  --colors-primary-foreground: #ffffff;
  --font-size-heading-1: 2.5rem;
  --line-height-heading-1: 1.2;
}

2. Flexible usage

These variables can be used in any CSS rule:

.button {
  background-color: var(--colors-primary);
  color: var(--colors-primary-foreground);
  font-size: var(--font-size-heading-1);
  line-height: var(--line-height-heading-1);
}

3. Multi-mode support

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

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

Variable organization recommendations

Compared to Tailwind CSS, the CSS Variables export method has lower requirements for variable organization. However, it’s still recommended that you follow good organizational principles, which can:

• Improve variable maintainability
• Maintain design system consistency
• Facilitate team collaboration
• Prepare for potential future framework migrations

Basic principles

You can start by understanding the basic principles of variable organization, which can help you make better decisions in naming, grouping, and hierarchical structuring of variables.

Variable types

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