Tailwind CSS

How it works

When you send HTML to the PDF API, Tailwind CSS is automatically available. Just use Tailwind classes:

<div class="p-8 max-w-md mx-auto bg-white rounded-xl shadow-lg">
  <h1 class="text-2xl font-bold text-gray-900">Invoice #2025</h1>
  <p class="text-gray-500 mt-2">January 4, 2026</p>

  <div class="mt-6 border-t pt-4">
    <div class="flex justify-between">
      <span class="text-gray-600">Subtotal</span>
      <span class="font-semibold">$19.00</span>
    </div>
  </div>
</div>

Example: Invoice

curl -X POST https://api.orim.io/pdf/convert \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "html": "<div class=\"p-8 bg-gradient-to-r from-indigo-500 to-purple-600 text-white rounded-xl\"><h1 class=\"text-3xl font-bold\">Invoice</h1><p class=\"text-indigo-200\">Thank you for your business</p></div>"
  }' \
  -o invoice.pdf

Example: Report header

<header class="flex items-center justify-between border-b pb-4 mb-8">
  <div>
    <h1 class="text-xl font-bold text-gray-900">Monthly Report</h1>
    <p class="text-sm text-gray-500">Generated on January 4, 2026</p>
  </div>
  <img src="https://yourcompany.com/logo.png" class="h-10" />
</header>

Supported features

Feature	Supported
All utility classes	✅
Flexbox & Grid	✅
Colors & gradients	✅
Typography	✅
Spacing & sizing	✅
Custom fonts (via URL)	✅
`@apply` directive	❌
Custom config	❌

Using custom fonts

Link Google Fonts or any web font:

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">

<div style="font-family: 'Inter', sans-serif" class="p-8">
  <h1 class="text-2xl font-bold">Custom Font</h1>
</div>

Print styles

Use print: variants for print-specific styles:

<div class="bg-gray-100 print:bg-white">
  <p class="text-blue-600 print:text-black">
    This text is blue on screen, black when printed.
  </p>
</div>