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:
@@ -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'),
|
||||
],
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user