Unit conversion

Variables Xporter provides unit conversion functionality, automatically converting px units in Figma to the default rem units in Tailwind CSS.

How to use

1. Check the “Use Rem units” option when exporting
2. Variables Xporter will automatically convert px to rem (based on 16px = 1rem)

For example:

:root {
/* Values in Figma */
--spacing-lg: 24px;
--font-size-base: 16px;
 
/* Values after export (with rem conversion enabled) */
--spacing-lg: 1.5rem;    /* 24/16 = 1.5 */
--font-size-base: 1rem;  /* 16/16 = 1 */
}

Variables that won’t be converted

Not all variable values will be converted to rem. The following are exceptions:

• Variables that are not of type Number
• When the variable name contains px, e.g., spacing/px, it won’t be converted to rem
• When the variable’s value is a number but typically doesn’t include units, it won’t include any units in the generated CSS, e.g., opacity, scale, etc.

Apart from the above conditions, all numeric type variables will be converted when the “Use Rem units” option is checked

rem or px?

This is quite a controversial topic. While Tailwind CSS is gradually becoming the standard for web development and uses rem units by default, both rem and px have their own advantages and disadvantages. I recommend reading Josh Comeau’s article  and making a decision based on your project’s circumstances and your development team’s recommendations.