How do I set up Figma/Anima Frontier for optimal tailwindcss typography class names?

Developer Topics
1

At the moment we have typography styles in Figma like:

image

When inspecting a component with text in Figma dev mode, the CSS looks like this:

color: #000;

/* XS/Medium */
font-family: "Open Sans";
font-size: 12px;
font-style: normal;
font-weight: 500;
line-height: 16px; /* 133.333% */

When generating a component based on this, we get classes like:

className="font-XS-medium font-[number:var(--XS-medium-font-weight)] text-black text-[length:var(--XS-medium-font-size)] tracking-[var(--XS-medium-letter-spacing)] leading-[var(--XS-medium-line-height)] [font-style:var(--XS-medium-font-style)]"

However I would like Frontier to use the default tailwind css classes in these cases, like so:

className="font-medium text-xs"

(also note the Frontier generated classes included tracking- and leading- classes. Tracking is not needed, and not defined in Figma CSS and leading defined as part of text-xs already; but these may be separate issues).

What do I need to do in Figma and/or Anima Frontier to make it output classes more like that last code example?

Thanks for the help!