[Bug]: tailwind css not working in header footer #104

laltu-das · 2024-03-11T10:51:55Z

laltu-das
Mar 11, 2024

What happened?

tailwind css not working in header footer , but when i use custom css its work fine, but i want to use tailwind css

How to reproduce the bug

Controller

namespace App\Http\Controllers;

use Spatie\LaravelPdf\Facades\Pdf;

class DownloadInvoiceController
{
    public function __invoke()
    {
        return Pdf::view('pdf.invoice', [
                'invoiceNumber' => '1234',
                'customerName' => 'Grumpy Cat',
            ])
                ->headerView('pdf.invoice.header')
                ->footerView('pdf.invoice.footer')
                ->inline();
    }
}

Invoice

<html lang="en">
<head>
    <title>Invoice</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>

<div class="px-2 py-8 max-w-xl mx-auto">
    <div class="flex items-center justify-between mb-8">
        <div class="flex items-center">
            <div class="text-gray-700 font-semibold text-lg">Your Company Name</div>
        </div>
        <div class="text-gray-700">
            <div class="font-bold text-xl mb-2 uppercase">Invoice</div>
            <div class="text-sm">Date: 01/05/2023</div>
            <div class="text-sm">Invoice #: {{ $invoiceNumber }}</div>
        </div>
    </div>
    <div class="border-b-2 border-gray-300 pb-8 mb-8">
        <h2 class="text-2xl font-bold mb-4">Bill To:</h2>
        <div class="text-gray-700 mb-2">{{ $customerName }}</div>
        <div class="text-gray-700 mb-2">123 Main St.</div>
        <div class="text-gray-700 mb-2">Anytown, USA 12345</div>
        <div class="text-gray-700">johndoe@example.com</div>
    </div>
    <table class="w-full text-left mb-8">
        <thead>
        <tr>
            <th class="text-gray-700 font-bold uppercase py-2">Description</th>
            <th class="text-gray-700 font-bold uppercase py-2">Quantity</th>
            <th class="text-gray-700 font-bold uppercase py-2">Price</th>
            <th class="text-gray-700 font-bold uppercase py-2">Total</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td class="py-4 text-gray-700">Product 1</td>
            <td class="py-4 text-gray-700">1</td>
            <td class="py-4 text-gray-700">$100.00</td>
            <td class="py-4 text-gray-700">$100.00</td>
        </tr>
        <tr>
            <td class="py-4 text-gray-700">Product 2</td>
            <td class="py-4 text-gray-700">2</td>
            <td class="py-4 text-gray-700">$50.00</td>
            <td class="py-4 text-gray-700">$100.00</td>
        </tr>
        <tr>
            <td class="py-4 text-gray-700">Product 3</td>
            <td class="py-4 text-gray-700">3</td>
            <td class="py-4 text-gray-700">$75.00</td>
            <td class="py-4 text-gray-700">$225.00</td>
        </tr>
        </tbody>
    </table>
    <div class="flex justify-end mb-8">
        <div class="text-gray-700 mr-2">Subtotal:</div>
        <div class="text-gray-700">$425.00</div>
    </div>
    <div class="text-right mb-8">
        <div class="text-gray-700 mr-2">Tax:</div>
        <div class="text-gray-700">$25.50</div>

    </div>
    <div class="flex justify-end mb-8">
        <div class="text-gray-700 mr-2">Total:</div>
        <div class="text-gray-700 font-bold text-xl">$450.50</div>
    </div>
    <div class="border-t-2 border-gray-300 pt-8 mb-8">
        <div class="text-gray-700 mb-2">Payment is due within 30 days. Late payments are subject to fees.</div>
        <div class="text-gray-700 mb-2">Please make checks payable to Your Company Name and mail to:</div>
        <div class="text-gray-700">123 Main St., Anytown, USA 12345</div>
    </div>
</div>

</body>
</html>

PDF Footer

<!DOCTYPE html>
<html>
<head>
    <title>PDF Footer</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="text-3xl p-4 border-t border-gray-200 text-center">
    <div>
        <p><strong>Company Address:</strong> 123 Main St, City, State, Zip</p>
        <p><strong>Phone:</strong> (123) 456-7890</p>
        <p><strong>Email:</strong> example@example.com</p>
    </div>
    <p class="text-sm">Page @pageNumber of @totalPages</p>
</div>
</body>
</html>

PDF Header

<!DOCTYPE html>
<html>
<head>
    <title>PDF Header</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="p-4 border-b border-gray-200">
    <div class="flex justify-between items-center">
        <div class="text-xl font-bold">Invoice</div>
    </div>
</div>
</body>
</html>

Package Version

1.4

PHP Version

8.1

Laravel Version

10.10

Which operating systems does with happen with?

Linux

Notes

No response

vadimwe · 2024-03-13T10:24:38Z

vadimwe
Mar 13, 2024

Same problem, with header/footer and tailwind (vite)

0 replies

ArielMejiaDev · 2024-03-13T20:38:08Z

ArielMejiaDev
Mar 13, 2024

@laltu-das and @vadimwe Spatie PDF package is a friendly proxy of Spatie Browsershot package, it uses Puppeteer to generate PDF, the way puppeteer handles headers and footers is different than it works for html body.

My recomendation is to use custom css in headers and footers, if you already have tailwindcss styles you can transform it to custom css using an online converter.

1 reply

vadimwe Mar 14, 2024

@ArielMejiaDev thank you, sure there is no problem to write styles on plain css, but I think this moment should be noticed in documentation (https://spatie.be/docs/laravel-pdf/v1/basic-usage/formatting-pdfs)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Bug]: tailwind css not working in header footer #104

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 2 comments 1 reply

{{title}}

{{title}}

{{title}}

Select a reply

[Bug]: tailwind css not working in header footer #104

laltu-das Mar 11, 2024

What happened?

How to reproduce the bug

Controller

Invoice

PDF Footer

PDF Header

Package Version

PHP Version

Laravel Version

Which operating systems does with happen with?

Notes

Replies: 2 comments · 1 reply

vadimwe Mar 13, 2024

ArielMejiaDev Mar 13, 2024

vadimwe Mar 14, 2024

laltu-das
Mar 11, 2024

Replies: 2 comments 1 reply

vadimwe
Mar 13, 2024

ArielMejiaDev
Mar 13, 2024