Error text is cut off when generated to PDF in nuxt.js + @nuxtjs/tailwindcss

Question

Error text is cut off when generated from HTML to PDF with Vue-html2pdf in Nuxt.js when use @nuxtjs/tailwindcss although when show layout then everything is normal.

View when generated pdf

The cause is @nuxtjs/tailwindcss, when @nuxtjs/tailwindcss is removed, everything is normal. How can I use @nuxtjs/tailwindcss and vue-html2pdf at the same time?

My Code

<template>
  <div>
    <button @click="$refs.html2Pdf.generatePdf()">Click</button>
    <vue-html2pdf
      ref="html2Pdf"
      :show-layout="false"
      :float-layout="true"
      :enable-download="true"
      :preview-modal="true"
      :paginate-elements-by-height="1400"
      filename="hee hee"
      :pdf-quality="2"
      :manual-pagination="false"
      pdf-format="a4"
      pdf-orientation="landscape"
      pdf-content-width="800px"
    >
      <section slot="pdf-content">
        <div style="background-color: red">
          Hello World
        </div>
      </section>
    </vue-html2pdf>
  </div>
</template>

Answer 1

We had the same problem here.

Here below follow the step necessarys to solve it.

Visiting https://tailwindcss.com/docs/preflight on Images are block-level, you will see on CSS file the line < display: block; >

We just changed from block to inline.

Appears that Tailwild goes up of Canva whem you are using HTML2PDF.

The solution is that, hope to help, tks, our gretings.