PDF Generation Styling Breaking with Serverless Nextjs

[sammyhajomar]

Summary

Context: I'm using pages directory on nextjs 13 on vercel. I have a feature that allows users to download a PDF report. I send stringified html to a standalone api endpoint hosted on a continuously running server on aws and it returns a buffer which I then convert into a PDF & trigger a download for the user.

Issue: When I ping the pdf generation api endpoint locally, I end up with my desired output which is a PDF that includes all the styling (Tailwind). However, when I ping that same api endpoint from prod on my Vercel serverless function I end up with a PDF that has all the same info, but is stripped of all the styling.

What I've tried: At first, my PDF generation was in my app under the pages/api route and I thought it was causing the problem because the library I was using (Puppeteer) has issues with a serverless env, so I decoupled that from my app and spun up an ec2 instance for it, but that didn't fix the issue. I also made sure it wasn't a CORS issue either by setting origin to *.

Here is my code that fetches and triggers PDF download

            try {
                    const result = await fetch('[PDF GENERATION API ENDPOINT', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({ html: html?.outerHTML })
                    });
                    if (result.body && result.ok) {                       
                        const blob = await result.blob();
                        const downloadUrl = URL.createObjectURL(blob);
                        const link = document.createElement('a');
                        link.href = downloadUrl;
                        link.download = `${projectName ?? ""}_${whichPreview.current ?? ""}.pdf`
                        document.body.appendChild(link);
                        link.click();
                        link.remove();
                    } else {
                        console.error('Error generating PDF:');
                    }
                } catch (error) {
                    console.error('Error:', error);
                }

Additional information

No response

Example

No response

[vieiralucas]

The CSS stripping is likely happening because the headless Chrome instance on EC2 can't resolve your Tailwind classes — if you're linking to an external stylesheet or using a build step that's not running on the EC2 instance, the styles won't be available at render time.

Two approaches to fix this:

1. Inline your CSS — pass fully inlined HTML (styles in <style> tags, not linked stylesheets) to your PDF generation endpoint. This guarantees the renderer has all the styles regardless of environment.

2. Use a PDF API — instead of managing your own EC2 instance, you can send the inlined HTML to a hosted service. A few options: Gotenberg (open source, self-hosted), PDFShift, or Presa (I built this one, free tier). All accept HTML with inline styles and return a PDF.

The key is making sure the HTML you send is self-contained — all CSS inlined, all images as base64 or absolute URLs.