tailwind css not working in header and footer. #102

laltu-das · 2024-03-11T05:37:55Z

laltu-das
Mar 11, 2024

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 Header

<!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 Footer

<!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>

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

ArielMejiaDev · 2024-03-12T02:27:41Z

ArielMejiaDev
Mar 12, 2024

@laltu-das Hi it is produced by the way, Puppeteer built the PDF behind the scenes, take in mind that this package is a friendly wrapper of Spatie Browsershot package that use npm puppeteer package to create the pdf.

As this is a limitation of Puppeteer I would strongly recommend to use custom css for headers and footers

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

tailwind css not working in header and footer. #102

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment

{{title}}

Select a reply

tailwind css not working in header and footer. #102

laltu-das Mar 11, 2024

Controller

Invoice

PDF Header

PDF Footer

Replies: 1 comment

ArielMejiaDev Mar 12, 2024

laltu-das
Mar 11, 2024

ArielMejiaDev
Mar 12, 2024