CODEWITHSUNDEEP
javascriptvue.jsnuxt.js
Stone0409
Stone0409

Reputation: 33

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

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 enter image description here

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>

Upvotes: 1

Views: 2196

Answers (2)

ubi sage
ubi sage

Reputation: 93

Add this code in your tailwind.css file or global.css

//wherever u are using this
//@tailwind base;
//@tailwind components;
//@tailwind utilities;

Replace it with This

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

This is what it worked for me and explanation is already done by @Ana Frozza 's Solution

Upvotes: 0

Ana Frozza
Ana Frozza

Reputation: 21

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.

Upvotes: 2

Related Questions