Numbered font classes are better than Tailwind utilities for extracted PDF text

TLDR

Replacing CSS font registries (.f0, .f1) with Tailwind arbitrary utility classes (text-[10pt] font-['Times_New_Roman']) inflates HTML payload sizes by up to $345\text{ KB}$ across long documents while destroying font metric precision. Combining compact numbered font classes with a single stable semantic hook (.pdf-paragraph) delivers optimal payload compression, exact typographic fidelity, and easy framework overrides.

CSS Strategy	Class Attribute Size	50-Page Payload Overhead	Typographic Precision
Tailwind Arbitrary Classes	$\sim 55$ bytes / element	$+345\text{ KB}$ payload bloat	Coarse / Verbose arbitrary strings
Numbered Class Registry (.f0)	$\sim 32$ bytes / element	Baseline ($0\text{ KB}$ overhead)	Exact (Maps exact PDF metrics)

---

Technical comparison: payload & precision

<!-- DEFECTIVE UTILITY APPROACH: Verbose payload bloat across 15,000 document nodes -->
<p class="text-[10pt] font-['Times_New_Roman'] leading-[12pt] text-left">Extracted PDF copy...</p>
<!-- RECOMMENDED HYBRID APPROACH: Compact registry class + stable semantic hook --> <p class="f0 ta-l pdf-paragraph">Extracted PDF copy...</p>

Dynamic CSS registry style block

/ Single style block emitted once in document head /
.pdf-doc .f0 { 
  font-family: "Times New Roman", serif; 
  font-size: 10pt; 
  line-height: 12pt; 
}
.pdf-doc .pdf-paragraph {   margin: 0.5em 0; }

Rule of thumb: Use numbered CSS font registries (.f0, .f1) to preserve typographic precision and payload compression, adding a single semantic hook (.pdf-paragraph) for styling overrides.