fix(cms): enable the Tailwind typography plugin so prose classes work (#1288)

tailwind.config.js had plugins: [] and @tailwindcss/typography was never
installed, so every prose / prose-neutral / dark:prose-invert class in the
app resolved to nothing. Preflight, which IS active, resets h1-h6 to
inherit size and weight and strips list-style from ul/ol — so an applied
<h2> rendered pixel-identical to the <p> it replaced.

The editor was never broken. The toolbar highlighted because
editor.isActive('heading') correctly returned true; only the CSS to show
it was missing. That also explains why pasting rendered rich text worked:
it carries inline styles.

Ten surfaces rely on these classes, including the PUBLIC CMS pages — so
impressum/datenschutz were serving unstyled headings to visitors too.

Review follow-ups: prose colours are mapped to the theme tokens wherever
.text-theme marks theme-owned text (a dark gallery preset sets
--color-text but no .dark class, so dark:prose-invert never engages and
headings would have gone near-black on dark); code blocks inherit rather
than being scaled twice; and H5/H6 get explicit rules, since the plugin
only styles h1-h4.

Closes #1288
This commit is contained in:
Paul Nothaft
2026-09-04 14:26:51 +02:00
committed by GitHub
parent 4afe7a6f08
commit de3a7f70bf
8 changed files with 215 additions and 11 deletions
+13 -1
View File
@@ -104,6 +104,18 @@ export default {
...Array.from({ length: 12 }, (_, i) => `lg:grid-cols-${i + 1}`),
...Array.from({ length: 12 }, (_, i) => `xl:grid-cols-${i + 1}`),
],
plugins: [],
plugins: [
// Tailwind's Preflight resets h1-h6 to inherit their size and weight, and
// strips list-style and padding from ul/ol. Ten places in this app render
// rich text inside a `prose` container and rely on this plugin to put that
// typography back — the CMS editor and its preview, the public CMS page,
// release notes, and the gallery welcome message among them.
//
// Without it every `prose*` class is a no-op, so applying a heading or a
// list in the CMS editor changed the document and changed NOTHING on
// screen: the toolbar button lit up (the editor state was correct) while
// the text stayed visually a paragraph. That is issue #1288.
require('@tailwindcss/typography'),
],
}