在 nuxt.js + @nuxtjs/tailwindcss 中生成 PDF 时，错误文本被截断

Question

当使用 @nuxtjs/tailwindcss 时，在 Nuxt.js 中使用 Vue-html2pdf 从 HTML 生成 PDF 时，错误文本被截断，但在显示布局时一切正常。

生成pdf后查看

原因是@nuxtjs/tailwindcss，去掉@nuxtjs/tailwindcss后一切正常。如何同时使用@nuxtjs/tailwindcss和vue-html2pdf？

我的代码

<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

我们这里也遇到同样的问题。

下面请按照解决该问题所需的步骤进行操作。

访问 https://tailwindcss.com/docs/preflight 图像是块级的，您将在 CSS 文件上看到行 < display: block; >

我们刚刚从块更改为内联。

当您使用 HTML2PDF 时，Tailwild 会出现在 Canva 上。

解决方案是，希望能有所帮助，谢谢，我们的问候。

Answer 2

将此代码添加到 tailwind.css 文件或 global.css 中

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

用这个替换它

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

这对我有用，@Ana Frozza 的解决方案已经完成了解释