Styling & Tailwind

Templates are styled with CSS. The document is printed by a current headless Chrome, so modern CSS works: flexbox, grid, custom properties, @page rules and the print-specific properties covered in Page setup.

CSS files

Put CSS in one or more .css files in the template. In the editor, the Styles tab edits the template’s CSS. Doquill injects the stylesheets into the document for you; don’t add <link> or <style> tags to your HTML.

CSS files run through the template engine too, so they can use your data and functions:

styles.css

:root {
  --brand: {{ or .brand_color "#24406b" }};
}
.cover {
  background-image: url({{ asset "cover" }});
}

Values inserted into CSS are escaped for CSS, so data can’t break out of a property value. A value that isn’t valid in its position is replaced with ZgotmplZ, which browsers ignore.

Built-in Tailwind

Every workspace has a built-in Tailwind CSS v4 stylesheet you can switch on for a template. Doquill compiles it from the classes your template’s HTML files use, so the document only carries the CSS it needs.

main.html

<header class="mb-8 flex items-start justify-between">
  <h1 class="text-2xl font-bold">Invoice {{ .number }}</h1>
  <p class="text-neutral-600">Due {{ dateFormat "Jan 2, 2006" .due_at }}</p>
</header>

To switch it on, open the template’s Styles tab and, in the Stylesheets list, turn on tailwind (marked Built-in). The premade templates have it on already. Through the API, use PUT /v1/templates/{id}/css/{assetId} with {"enabled": true}; the Tailwind stylesheet is the asset with alias tailwind in GET /v1/templates/{id}/css.

The compiler scans your .html files only, not your data or CSS files, so class names must appear there literally. class="text-{{ .color }}-600" won’t work; write the full class names and pick between them: class="{{ if .overdue }}text-red-600{{ else }}text-neutral-600{{ end }}".

Only the default theme is available. There is no tailwind.config or @theme customisation, so use arbitrary values (text-[#24406b]) or your own CSS file for anything beyond it. Preflight is included, so headings, lists and margins start unstyled, as in any Tailwind project.

Tailwind is injected before the template’s own CSS files, so your CSS wins. Publishing compiles the stylesheet and pins it to the version, and later Tailwind updates don’t change published documents.

DOCX output is converted by a word processor that can’t read Tailwind’s CSS, so DOCX renders skip it. See Output formats.

Tip

Print utilities work as expected: break-inside-avoid keeps a table row on one page, and break-before-page starts a section on a new page.

Shared stylesheets

To reuse CSS across templates, upload it as a CSS asset. It then appears in each template’s Styles → Stylesheets list, where you can turn it on for that template. To turn a stylesheet on for every template by default, enable Apply to all templates for it on the Templates → Assets page; the editor marks it Global.

Like Tailwind, shared stylesheets are pinned at publish time and injected before the template’s own CSS.

Print-friendly CSS

• Size things in print units (mm, pt) where they relate to the paper, and set the page size and margins in page settings.
• Backgrounds and background colours only print when Print backgrounds is on in the page settings.
• Flexbox and tables paginate more predictably than absolutely positioned elements.