Add .not-prose class to opt out of .prose typography styles.#42095
Open
julien-deramond wants to merge 1 commit intov6-devfrom
Open
Add .not-prose class to opt out of .prose typography styles.#42095julien-deramond wants to merge 1 commit intov6-devfrom
.not-prose class to opt out of .prose typography styles.#42095julien-deramond wants to merge 1 commit intov6-devfrom
Conversation
.not-prose class to revert .prose behavior.not-prose class to opt out of .prose typography styles.
julien-deramond
commented
Feb 22, 2026
| } | ||
|
|
||
| h1 { | ||
| :where(h1):not(:where(.not-prose, .not-prose *)) { |
Member
Author
There was a problem hiding this comment.
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.
This comment was marked as off-topic.
Sorry, something went wrong.
This comment was marked as off-topic.
This comment was marked as off-topic.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
This PR introduces a
.not-proseutility class to opt out of.prosetypography 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
.proseto apply consistent typography styling. However, this also affects embedded code examples, which should render exactly as they would in real usage.Because
.prosemodifies 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:By introducing
.not-prose, we allow specific sections (such as live examples) to opt out of typography styles and render accurately.For the review
.not-proseat https://deploy-preview-42095--twbs-bootstrap.netlify.app/docs/6.0/content/prose/