search

aanckar / react-pdf-tailwind

Use Tailwind CSS to style PDFs created with react-pdf
315 stars 11 forks source link

Font size generates an invalid unit for react-pdf #1

Closed aaronduce closed 2 years ago

aaronduce commented 2 years ago

Hi there,

Great library!

One issue I have noticed is when using, for example, text-9xl, this generates 

<html><body><p style="font-family:IBMPlexSans;font-size:96px;line-height:1;font-weight:700">15855</p></body></html>

But this does not render in a 9xl size as px is not a supported unit for react-pdf.

aaronduce commented 2 years ago

This may be a more middle ground issue, I am using a few packages here:

react-pdf
react-pdf-html
react-pdf-tailwind

So I am wondering if react-pdf-html is not parsing the font size properly

aanckar commented 2 years ago

Hi,

It seems like this library isn't really compatible with the Html component from react-pdf-html (I'm assuming that's how you got the output above?), as react-pdf-html expects web units (like px) as input, while react-pdf-tailwind uses pt (react-pdf default).

Eg. tw("text-9xl") simply outputs { fontSize: 96, lineHeight: 1 }, which react-pdf parses as 96pt (equivalent of 8rem = 128px) and react-pdf-html parses as 96px.