Custom CSS

The template editor provides a dedicated CSS tab where you can write any standard CSS you need. Your styles apply to the HTML elements you insert in the HTML tab during rendering.

If you want to know whether a specific CSS feature is available, you can check this compatibility list for Chrome 133, the version used by our current engine (v5). Chrome 133 supports virtually all modern CSS features, including Flexbox, CSS Grid, Custom properties, Container queries, and the :has() pseudo-class.

External CSS Libraries

Writing your own CSS is always an option, but a utility-first CSS library can speed up template development significantly. Frameworks like Bootstrap tend to enforce strong opinions about print styles and can interfere with your layout. We recommend lighter-touch tools like Tailwind CSS or Tachyons instead.

Hosted Tailwind CSS Versions

PDFMonkey provides Master Templates, and we made hosted versions of the resources used to build them available to everyone. Because these files are hosted on our servers, they work on both Free and paid accounts — no external resource restriction applies.

Tailwind CSS v4.x and v3.x (JIT)

These versions work just like the one available using the Tailwind CSS CDN. Include the script in your HTML tab, replacing the official CDN link with ours:

<script src="https://pdfmonkey-resources.s3-eu-west-3.amazonaws.com/js/tailwindcss-4.js"></script>

Available versions:

• tailwindcss-4.js (latest, currently 4.1.17)
• tailwindcss-4.1.17.js
• tailwindcss-4.0.1.js
• tailwindcss-3.4.3.js
• tailwindcss-3.3.3.js
• tailwindcss-3.2.6.js
• tailwindcss-3.2.0.js
• tailwindcss-3.0.23.js

For v3.x versions, you can customize the configuration just like you would with the official CDN:

<script src="https://pdfmonkey-resources.s3-eu-west-3.amazonaws.com/js/tailwindcss-3.0.23.js"></script>
<script>
  tailwind.config = {
    theme: {
      extend: {
        colors: {
          clifford: '#da373d',
        }
      }
    }
  }
</script>
<style type="text/tailwindcss">
  @layer utilities {
    .content-auto {
      content-visibility: auto;
    }
  }
</style>

Tailwind CSS v2.0.3 (Legacy)

We provide a light version of Tailwind CSS v2.0.3, stripped of any style that does not make sense in a printing context, like animations or responsive utilities. It weighs 165 KB.

You can import it from your CSS tab using:

@import url("https://pdfmonkey-resources.s3.eu-west-3.amazonaws.com/css/tailwind-light.min.css");

You can also import it from the HTML tab but know that your styles will be defined before, and it can make it harder to override Tailwind’s classes.

Per-Document Styles

Code you write in the CSS tab cannot call variables provided in the Document payload. That said, you can use CSS custom properties (a.k.a CSS variables) to pass dynamic values to your CSS on a per-document basis.

For example, if you want to pass a color in your data:

{
  "color": "#db2777"
}

You can create a custom property that takes its value and makes it available to your CSS:

<style>
  :root {
    --color: "{{color}}";
  }
</style>

h1 {
  color: var(--color);
}

This technique works for any CSS value: colors, font sizes, spacing, or even font families.

Frequently asked questions

Can I use Tailwind CSS in PDFMonkey templates?

Yes. PDFMonkey hosts several Tailwind CSS versions (v2 through v4) on its own servers, so they work on both free and paid plans. Include the script tag in your HTML tab pointing to the hosted version.

How do I pass dynamic CSS values in PDFMonkey?

Use CSS custom properties. Define a variable in a <style> tag in your HTML using Liquid syntax (e.g., --color: "{{color}}"), then reference it in your CSS tab with var(--color). This lets you change colors, fonts, or spacing per document.

What CSS features does PDFMonkey support?

PDFMonkey’s current engine (v5) is based on Chrome 133, which supports virtually all modern CSS features including Flexbox, CSS Grid, custom properties, container queries, and the :has() pseudo-class.