Text position different in generated PDF than in component

[siiddhantt]

As seen in the two images, the text has gone down in generated PDF, and this happens with all the texts.
I'm using React 18.2 (Vite).

Expected :

Generated PDF:

[ivmarcos]

I'd guess is due to some CSS and related to the html2canvas package that is used internally. Hard to say without looking at the code, but here's a similar issue in there: niklasvh/html2canvas#2775.

[bigyanse]

I am using TailwindCSS and restoring img display attribute to inline-block helped me. Check out this reference.

[siiddhantt]

Thanks @ivmarcos and @bigyanse it was indeed the issue with Tailwind. Restoring display attribute to inline-block didn't fix it entirely, so I went ahead with svg components and it fixed the issue throughout the document!

[charlietlamb]

Add this in your css file if you are using tailwind:

@layer base {
  img {
    @apply inline-block;
  }
}

It will fix the issue in html2canvas

[PeterCha90]

Add this in your css file if you are using tailwind:

@layer base {
  img {
    @apply inline-block;
  }
}

It will fix the issue in html2canvas

You saved my day!! AWESOME!!