Editor, preview and published page now show the same thing
The visual editor showed smaller headings and different colours from the published page. The cause was the editor's own interface styles leaking into the content.
Someone editing a page saw a 24 px heading where the visitor saw 72 px. The editor, the preview and the public page were three environments with three results.
The two causes
The editor interface uses Fomantic UI, and its stylesheet entered the same document as the content:
- Unlayered rules beat layered rules. Fomantic's rules won over Tailwind's utilities: heading from 72 to 24 px, weight from 900 to 700.
- The base font size changed. Fomantic sets 14 px on the root; Tailwind measures everything in
rem. The whole page shrank by a 14/16 ratio.
The stylesheet could not simply be removed: the editor's modals depend on it.
The fix
The editor interface styles moved to their own layer, which loses to utilities, and the base size went back to 16 px. Editor and preview declare the same layer order. Measured at fifteen points, the difference between the three environments dropped to zero.
The CSS provenance signature now includes the compiler version: CSS generated by an earlier Tailwind version no longer passes as current.
Source: Core · req-158 · BATCH-158