Modern Tailwind v4 CSS not fully supported in WeasyPrint 68.1

[dhinesh-kumar-m]

We are generating invoice PDFs using WeasyPrint 68.1.

The PDF renders successfully (no runtime errors), but layout and styling differ significantly from browser rendering when using CSS compiled from Tailwind CSS v4.1.18.

Tailwind v4 output includes modern CSS such as:

@layer theme {
  :root {
    --spacing: .25rem;
    --color-stone-800: oklch(26.8% .007 34.298);
  }
}

@layer utilities {
  .size-3 {
    width: calc(var(--spacing) * 3);
    height: calc(var(--spacing) * 3);
  }

  .fill-stone-800 {
    fill: var(--color-stone-800);
  }
}

When rendered with WeasyPrint 68.1, we see warnings such as:

• Invalid or unsupported selector ':root,:host'
• Unknown rule @supports
• Ignored padding-inline-start
• Invalid media type '(min-width:40rem)'
• Invalid media type '(prefers-color-scheme:dark)'
• Ignored fill:var(--color-stone-800)

As a result:

• Logical properties (margin-inline, etc.) are ignored
• Modern media queries are ignored
• @supports rules are ignored
• oklch() colors may not apply
• Some CSS variables used inside calc() do not behave as in browsers

The PDF renders, but styling is incomplete or incorrect compared to browser output.

---

Environment

• WeasyPrint: 68.1
• Python: 3.12.3
• OS: Linux (WSL2)
• Tailwind CSS: 4.1.18

---

Question

Does WeasyPrint 68.1 officially support:

• @layer
• CSS custom properties (var())
• Logical properties (margin-inline, etc.)
• oklch() color functions
• Modern media queries (min-width, prefers-color-scheme)
• @supports at-rules

If not, is preprocessing required before rendering CSS from modern frameworks like Tailwind v4?

[liZe]

Hi!

• Invalid or unsupported selector ':root,:host'

That’s already fixed in cssselect2, but we need to release a new version.

• Unknown rule @supports

That shouldn’t change anything to the rendering, but you can share an example if it does in a real example using Tailwind.

• Logical properties (margin-inline, etc.) are ignored
• Ignored padding-inline-start

That’s #2357.

• Invalid media type '(min-width:40rem)'
• Invalid media type '(prefers-color-scheme:dark)'

That’s #494.

• Ignored fill:var(--color-stone-800)
• oklch() colors may not apply

It should work. Could you please share a CSS example that doesn’t work? (May just be a problem because your variables are defined in :root, host.)

[dhinesh-kumar-m]

Hi @liZe ,

Thanks for the clarification.

We are using Tailwind v4 with:

@import "tailwindcss";
@config "../tailwind.pdf.config.js";

The compiled CSS output includes a theme layer with CSS variables and OKLCH colors. For example:

@layer theme {
  :root,
  :host {
    --color-red-500: oklch(63.7% .237 25.331);
  }
}

@layer utilities {
  .text-red-500 {
    color: var(--color-red-500);
  }
}

When rendered in the browser, this works correctly.

However, when generating PDFs with WeasyPrint:

• The :host selector is reported as invalid.
• CSS variables defined in :root, :host are not consistently applied.
• Colors defined using oklch() do not render.
• As a result, .text-red-500 falls back to the default text color (black).

From testing:

• color: #ef4444 → works
• color: rgb(...) → works
• color: oklch(...) → ignored
• color: var(--color-*) where the variable contains oklch() → ignored

If any additional details from our setup would help clarify this further, please let us know, and we’ll share them here.

Thanks.

[liZe]

• color: oklch(...) → ignored

oklch() works. If you remove :host from your example, it gives the correct rendering:

<style>
@layer theme {
  :root {
    --color-red-500: oklch(63.7% .237 25.331);
  }
}

@layer utilities {
  .text-red-500 {
    color: var(--color-red-500);
  }
}
</style>
<div class="text-red-500">abc

So the problems we have are:

• :host (in a cssselect2 release coming soon),
• Logical properties (Support CSS logical properties #2357)
• Media queries (Support media queries #494)

Is that OK for you?

[dhinesh-kumar-m]

We tried your exact example (removing :host), but it still does not render correctly on our side during PDF generation.

However, when we remove both :host and the @layer wrappers, it works correctly. For example:

:root {
  --color-red-500: oklch(63.7% .237 25.331);
}

.text-red-500 {
  color: var(--color-red-500);
}

This renders properly in the generated PDF.

But when the same rules are wrapped inside @layer:

@layer theme {
  :root {
    --color-red-500: oklch(63.7% .237 25.331);
  }
}

@layer utilities {
  .text-red-500 {
    color: var(--color-red-500);
  }
}

The styles are ignored.

So at this point, the remaining issue appears to be that @layer (CSS Cascade Layers) is not supported or is ignored by WeasyPrint.

Since Tailwind v4 emits its output inside @layer blocks by default, this prevents the generated CSS from being applied in PDFs.

Could you please confirm whether @layer is currently supported?

Thanks.

[liZe]

The styles are ignored.

Could you please try the exact example I gave you above? It does work for me.

[dhinesh-kumar-m]

I retried using your exact example, and it still does not render correctly on my side.

Here is the exact code we are using to generate the PDF:

Python

html_string = render_to_string(
    "bill_copy/index.html",
)

pdf_stream = BytesIO()

css = CSS(filename="app/static/dist/pdf.css")

HTML(string=html_string).write_pdf(
    pdf_stream,
    stylesheets=[css],
)

HTML

<!DOCTYPE HTML>
<html>
<head>
  <link rel="stylesheet" href="{% static 'dist/pdf.css' %}" />
</head>
<body>
  <h2 class="text-red-500 text-2xl md:text-3xl font-semibold">
    Tax Receipt #
  </h2>
</body>
</html>

dist/pdf.css

@layer theme {
  :root {
    --color-red-500: oklch(63.7% .237 25.331);
  }
}

@layer utilities {
  .text-red-500 {
    color: var(--color-red-500);
  }
}

The styles are ignored during PDF generation.

Could you please let me know if there is anything incorrect in how we are invoking HTML(...).write_pdf() or loading the stylesheet? Is there any specific configuration needed for @layer support?

[liZe]

Please, follow these steps:

• create a doc.html file with this code:

<style>
@layer theme {
  :root {
    --color-red-500: oklch(63.7% .237 25.331);
  }
}

@layer utilities {
  .text-red-500 {
    color: var(--color-red-500);
  }
}
</style>
<div class="text-red-500">abc

• launch weasyprint doc.html doc.pdf

And please answer these two questions:

• Is the text red in the PDF?
• Do you have warnings or errors in the console?

[liZe]

@dhinesh-kumar-m Hi! Did you find the time to check the example above?

[liZe]

A new version of tinyhtml5 has been released, the other issues should already be tracked. Don’t hesitate to add a comment if there’s another issue that’s not covered.