[Bug]: tailwind css not working in header footer
laltu-das opened this issue · comments
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