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
+1
View File
@@ -66,6 +66,7 @@
},
"devDependencies": {
"@eslint/js": "^9.29.0",
"@tailwindcss/typography": "^0.5.20",
"@testing-library/jest-dom": "^6.6.3",
"@testing-library/react": "^16.1.0",
"@testing-library/user-event": "^14.6.1",