Tailwind CSS + html2canvas text shift down solution

22.10.2023

Using Tailwind CSS and html2canvas causes annoying bug which shifts all texts down when rendering the html to img.

Tailwind CSS + html2canvas text shift problem

This is cause by Tailwind CSS's preflight - you can fix this by restoring img tag's display attribute.

@tailwind base;
@layer base {
    img {
    	@apply inline-block;
    }
}
@tailwind components;
@tailwind utilities;

Now it works just as intended: Tailwind CSS + html2canvas text shift after solution

Solution from here.