FigmaToCode icon indicating copy to clipboard operation
FigmaToCode copied to clipboard

Incorrect tailwind line-height classes generated

Open liampcollins opened this issue 1 year ago • 3 comments

Hi,

It looks like there is an issue with the outputted tailwind line-height classes. We have a text layer in Figma with font-size 14px and line-height 24px. The outputted tailwind classes are text-sm which is correct, and leading-normal which is (1.5 x font-size) so gives us 21px which is incorrect.

Screenshot 2024-10-21 at 16 33 35 Screenshot 2024-10-21 at 16 35 04

liampcollins avatar Oct 21 '24 15:10 liampcollins

I believe the tailwind named classes (like leading-normal) are relative to the font size rather than being rems so I think the font size may need to be passed through to here perhaps?

image

liampcollins avatar Oct 21 '24 16:10 liampcollins

AFAIK text-sm overrides leading (but maybe it is order dependent) but maybe I'm wrong. If you can find the exact issue I surely can fix :)

bernaferrari avatar Oct 21 '24 16:10 bernaferrari

Thanks for the response. Perhaps the order can make a difference but in the example I have it is using the leading class. I think the bug originates from an assumption in the code that leading-normal represents 1.5rem when in fact it is 1.5 x font-size

liampcollins avatar Oct 22 '24 10:10 liampcollins