Some Tailwind classes not loaded

dualklip commented 3 years ago

Hi there!

I'm trying to use some Tailwind classes to customize background colors or text colors, but doesn't been reflected in the PDF. Others classes like text-2xl or font-extrabold are ok, but if you try to use bg-purple-300 nothing happen.

<!doctype html>
<html>
<head>
    <title>Laravel Nova Pdf Template</title>
    <meta charset="UTF-8"/>
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    @foreach ($stylesContents as $stylesContent)
        <style>
            {{ $stylesContent }}
        </style>
    @endforeach
    <style>
        html, body {
            height: 100%;
        }
    </style>
</head>
<body class="tailwind-container">
<section>
    @foreach ($models as $model)
        <div class="grid grid-cols-4 gap-4">
            <div class="bg-purple-300 h-12 rounded-md flex justify-center items-center text-white text-2xl font-extrabold">{{ $model->getKey() }}</div>
            <div class="bg-purple-300 h-12 rounded-md flex justify-center items-center text-white text-2xl font-extrabold">{{ $model->batch->name }}</div>
            <div class="bg-purple-300 h-12 rounded-md flex justify-center items-center text-white text-2xl font-extrabold">{{ $model->telephone->telephone }}</div>
            <div class="bg-purple-300 h-12 rounded-md flex justify-center items-center text-white text-2xl font-extrabold">{{ $model->status->name }} ({{ $model->status->code }})</div>
        </div>
    @endforeach
</section>
</body>
</html>

As you can see the template has been simplifies as max as possible in order to don't have any conflictive CSS class

This is the result that I can see in my PDF Captura de pantalla 2021-05-09 a las 12 08 05

wcdev1288 commented 3 years ago

Were you able to figure this out? I'm running into the same issue. It might be puppeteer related:

wcdev1288 commented 3 years ago

UPDATE: Looks like by default Browsershot has $showBackground = false; Set it to true and your background should render.

`namespace Spatie\Browsershot;
...
/** @mixin \Spatie\Image\Manipulations */
class Browsershot
{
...
    protected $showBackground = false;
    protected $showScreenshotBackground = true;`

The issue I have now is that the handleBrowsershotOptions() is not passing the options.

protected function handleBrowsershotOptions()
{
    $this->browsershot->$showBackground();

    return $this;
}

Padocia commented 3 years ago

handleBrowsershotOptions() issue is #Fixed in latest release

Change your code to :

protected function handleBrowsershotOptions()
{
     $this->browsershot = $this->browsershot->showBackground();

     return $this;
 }

Padocia / Laravel-Nova-Pdf

Some Tailwind classes not loaded #9