Styling posts with plain HTML

A post published from Notion does not have to look like Notion. notion-rsc outputs the HTML you would write by hand, and leaves the look to your site.

Typography first

Because paragraphs are p and headings are h2 to h4, any typography stylesheet covers most of a post. With Tailwind, that is one class:

<article className="prose dark:prose-invert">
  <NotionBlocks blocks={blocks} />
</article>

The Notion-specific parts

Callouts, bookmarks, embeds and columns have no plain-HTML equivalent, so they get notion-* classes and an optional stylesheet that styles just those. It also includes KaTeX's styles, so equations need no separate import.

import "@yokinist/notion-rsc/styles.css";

Every class is a plain selector, easy to override in your own CSS.

Dark mode

The stylesheet follows a .dark class on an ancestor, the way most sites switch themes. Without one, it follows the reader's system setting. If your site switches themes with a class and ignores the system setting, put .light on the html element in light mode too, so readers whose system is dark still get light cards on your light theme.

The goal is that nobody can tell a post was written in Notion, unless you tell them.