Ideas for Typography options

[MichaelAllenWarner]

With the proliferation of "page builders" in content management systems (like the Block Editor in WordPress), where users have (and expect!) the ability to drop "rich text" elements like paragraphs right at the top level of a page, there's sometimes a need for rich-text styles to be enabled at the top level. Of course, the Tailwind Typography plugin takes the opposite (and IMO superior) approach: it scopes the rich-text styles to the .prose class, and lets you "turn them off" in a .not-prose region. If you can get away with training CMS users to always first create a rich-text "block" that creates a div.prose wrapper, then the Typography plugin is fine, but recent experience has shown me that this can be too big of an ask of clients.

An alternative I've come up with for these kinds of projects looks something like this, where you'd have to "opt in" to turning off the rich-text styles (basically by throwing a .not-prose wrapper on every component you make):

p:where(:not(.not-prose *)),
p:where(.prose *) {
  color: blue;
}

I imagine there's a growing number of developers out there who would find something like this helpful. It may be worth considering having this "reverse" approach available as an option for the Typography plugin.

One could add some additional "layers," too, to have the ability to switch back and forth a bit. One more layer is like:

p:where(:not(.not-prose *)),
p:where(.prose *):where(:not(.prose .not-prose *)) {
  color: blue;
}

And yet another:

p:where(:not(.not-prose *)),
p:where(.prose *):where(:not(.prose .not-prose *)),
p:where(.prose .not-prose .prose *) {
  color: blue;
}

Food for thought.