Styling Markdown with CSS Variables

CSS variables (custom properties) have changed the way we write styles. Instead of compiling Sass or Tailwind code repeatedly, we can declare design tokens directly in the stylesheet and inspect them in real-time.

When styling compiled Markdown (using libraries like CommonMark), you don't control the class list of every paragraph or heading. Using standard elements styled via CSS variables is the perfect solution:

.prose h2 {
    font-family: var(--font-family-headers);
    color: var(--color-secondary);
}

This keeps your theme separate from your code and extremely customizable.