Using external libraries
Paid account only (mostly)
Including stylesheets based on their URL is only possible on a paid account. Documents including external stylesheets will fail on a free account.
That said, an exception is made for CSS hosted on our own servers.
Writing your own CSS can be fun but it's usually not the fastest way to create and maintain Templates.
Usually you will want to use external CSS libraries that will make your work easier and allow for a simpler maintenance of your Templates.
Choosing a CSS library
While usually choosing a CSS library is a matter of habits and interests, some may have caveats when it comes to the context of printing/PDF-generation.
Frameworks like Bootstrap for instance have enforced opinions when it comes to print styles and that could end up messing with your whole design.
We recommending using libraries with a lighter touch.
Libraries accessible on a Free account
Since PDFMonkey provides what we call Master Templates, we also made hosted versions of resources we used to build them.
You can use the same resources to build your own templates:
Tailwind CSS v2.0.3
We provide a light version of Tailwind CSS v2.0.3, stripped of any style that doesn't make sense in a printing contexte, like animations or responsive utilities. It weights 165 KB.
You can import it from your CSS tab using:
CSS
1
@import url("https://pdfmonkey-resources.s3.eu-west-3.amazonaws.com/css/tailwind-light.min.css");
Copied!
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 supercharge Tailwind's classes.
Tailwind CSS v3.0.23
We also provide a more recent version of Tailwind CSS that provides just-in-time (JIT) class definitions.
You can learn how to set it up in Tailwind's documentation, simply replacing their CDN link with ours:
HTML
1
<script src="https://pdfmonkey-resources.s3-eu-west-3.amazonaws.com/js/tailwindcss-3.0.23.js"></script>
2
<script>
3
tailwind.config = {
4
theme: {
5
extend: {
6
colors: {
7
clifford: '#da373d',
8
}
9
}
10
}
11
}
12
</script>
13
<style type="text/tailwindcss">
14
@layer utilities {
15
.content-auto {
16
content-visibility: auto;
17
}
18
}
19
</style>
Copied!
Last modified 3mo ago