Skip to content

Add .not-prose class to opt out of .prose typography styles.#42095

Open
julien-deramond wants to merge 1 commit intov6-devfrom
v6-dev-jd-add-not-prose-class
Open

Add .not-prose class to opt out of .prose typography styles.#42095
julien-deramond wants to merge 1 commit intov6-devfrom
v6-dev-jd-add-not-prose-class

Conversation

@julien-deramond
Copy link
Member

@julien-deramond julien-deramond commented Feb 22, 2026

Description

This PR introduces a .not-prose utility class to opt out of .prose typography styles.

The naming follows the official Tailwind Typography convention:
https://github.com/tailwindlabs/tailwindcss-typography?tab=readme-ov-file#undoing-typography-styles

Motivation & Context

Our Markdown documentation pages are wrapped in .prose to apply consistent typography styling. However, this also affects embedded code examples, which should render exactly as they would in real usage.

Because .prose modifies elements such as headings, spacing, and typography, it can unintentionally alter the appearance of these examples. This breaks visual consistency and, in some cases, layout behavior.

A concrete example can be seen in the Scrollspy documentation, where heading styles were incorrectly overridden by .prose, resulting in broken rendering:

Screenshot 2026-02-22 at 22 14 51

By introducing .not-prose, we allow specific sections (such as live examples) to opt out of typography styles and render accurately.

For the review

@julien-deramond julien-deramond requested a review from mdo February 22, 2026 21:20
@julien-deramond julien-deramond requested a review from a team as a code owner February 22, 2026 21:20
@github-project-automation github-project-automation bot moved this to Inbox in v6.0.0 Feb 22, 2026
@julien-deramond julien-deramond changed the title Add .not-prose class to revert .prose behavior Add .not-prose class to opt out of .prose typography styles. Feb 22, 2026
}

h1 {
:where(h1):not(:where(.not-prose, .not-prose *)) {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a first approach to handle .not-prose in this entire file. Maybe there's a smarter way to do so.

This comment was marked as off-topic.

@asd585140-glitch

This comment was marked as off-topic.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

Status: Inbox

Development

Successfully merging this pull request may close these issues.

2 participants