DEV Community: Shamsad Anam

How to generate PDF that supports modern CSS such as Tailwind

Shamsad Anam — Sun, 07 Sep 2025 10:05:12 +0000

Creating PDFs in Laravel with modern CSS like Tailwind used to be tricky. Traditional PDF generators often fail with Flexbox, Grid, or Tailwind classes. Spatie Browsershot uses headless Chrome to render HTML, so you can fully utilize modern CSS and JavaScript.

1. Install Browsershot and Dependencies

Install via Composer:

composer require spatie/browsershot

Browsershot needs Node.js and npm (for Puppeteer). Install Node.js with nvm:

nvm install node
nvm use node

Install Puppeteer globally:

npm install -g puppeteer

Chromium will be downloaded automatically if Puppeteer is installed.

2. Create a Blade Template with Tailwind

Create resources/views/pdf/template.blade.php:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PDF Example</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 p-10">
    <div class="max-w-2xl mx-auto bg-white p-8 rounded shadow">
        <h1 class="text-4xl font-bold text-center text-blue-600">Hello, PDF!</h1>
        <p class="mt-4 text-gray-700">This PDF is fully styled with Tailwind CSS and modern CSS features.</p>
    </div>
</body>
</html>

3. Generate PDF from Blade Template

Use Browsershot in a route or controller:

use Spatie\Browsershot\Browsershot;

Route::get('/pdf', function () {
    $pdfPath = storage_path('app/public/example.pdf');

    Browsershot::html(view('pdf.template')->render())
        ->format('A4')
        ->landscape()
        ->showBackground()
        ->save($pdfPath);

    return response()->download($pdfPath);
});

Tips:

showBackground() renders backgrounds.
format('A4') sets page size.
.pdf() outputs directly to the browser.

4. Tailwind Tips with Browsershot

Use CDN for Tailwind in Blade.
For custom fonts, use web fonts or inline @font-face.
Use absolute URLs for images.

5. Advanced: Compiled Tailwind

If using Laravel Mix or Vite:

Browsershot::html(view('pdf.template')->render())
    ->setNodeBinary('/usr/bin/node')
    ->setNpmBinary('/usr/bin/npm')
    ->save($pdfPath);

Conclusion

Browsershot allows Laravel to generate PDFs with full support for modern CSS, Tailwind, Flexbox, Grid, and JavaScript. Ideal for invoices, reports, certificates, or any styled PDF content.

What is Expo?

Shamsad Anam — Mon, 02 Oct 2023 09:03:55 +0000

Recently, one of my clients asked me to set up an Expo project. Although I had no prior experience with Expo, I agreed when I learned that it utilizes JavaScript.

After conducting some research, I discovered the following:

Expo is an open-source framework that leverages React Native to develop native applications for Android, iOS, and the web. Essentially, it serves as an alternative to Flutter and employs JavaScript syntax.

I experimented with several methods for setting up the project. If you're interested in quickly installing and exploring the framework, I recommend using the tab navigation template with the following command:

npx create-expo-app@latest --template tabs@49

To initiate the development server, simply execute:

npx expo start

For learning Expo, I strongly suggest perusing their excellent documentation, which contains a wealth of examples. You can find it at the following link:

Link to official documentation.

Happy Coding.

How to add local fonts to my website?

Shamsad Anam — Thu, 15 Oct 2020 20:18:16 +0000

Sometimes client might ask you to add a font to his/her website that he found or purchased online. Now you have to use this on the website.

Those who like me are used to using Google Fonts or the default fonts on the Computer, this might seem like tricky. But it actually is not.

So, How do we achieve this? By using the @font-face rule of CSS.

First you have to download the font file and put it inside your project folder. The most supported font files are - TTF/OTF, WOFF, and WOFF2.
Now all you have to do is to add this to your CSS and give it a name. This name is what you will use to use the font.
For example,

@font-face {
  font-family: myFirstFont; /*The name you choose goes here*/
  src: url(sansation_light.woff);
}

Thanks for reading.

My Twitter Profile