Support "undoing" prose styles

[adamwathan]

Resolves #32.

This PR makes it possible to add markup within a prose block that ignores the styles that prose would normally add.

For example:

<div class="prose">
  <h1>My Title</h1>
  <p>Once upon a time there was a troll who lived inside my underpants and his name was Fred.</p>

  <div class="not-prose">
    <h1>This isn't styled like a prose h1</h1>
    <blockquote>This isn't styled like a prose blockquote</blockquote>
  </div>

  <p>One day Fred yelled up from my nether regions, "Hey, I need your help!"</p>
  <!-- ... -->
</div>

The not-prose class ignores all styles except styles set directly on the prose class, which are font-size, line-height, and color styles for the whole block.

We could reset these back to the same values they are in preflight, but it's easy enough to do with a couple extra classes:

  <div class="prose">
    <!-- ... -->
-   <div class="not-prose">
+   <div class="not-prose text-base text-black">
      <h1>This isn't styled like a prose h1</h1>
      <blockquote>This isn't styled like a prose blockquote</blockquote>
    </div>
    <!-- ... -->
  </div>

This means that by default, anything in a not-prose block will still be gray for example, and also match whatever the font size is set to for your prose block (which is different depending on whether you use just prose, or prose prose-xl, etc.)

I think this is the right trade-off overall since it's easy to "fix" with those two extra classes, and if we automatically did that for you but you did want to match the font-size of the rest of your prose stuff you wouldn't easily be able to do it.

This feature depends newer CSS features like :not({selector list}) and :where({selector list}) so it depends on the new target mode being set to modern (which is the default).

The whole plugin will be broken in older browsers because of this by default, so if you need to support Safari < 14 or Samsung Internet < 15, you should set target to legacy (which will remove this not-prose feature completely, since it's not possible without these features):

// tailwind.config.js
module.exports = {
  // ...
  plugins: [
    require('@tailwindcss/typography')({
      target: 'legacy',
    })
  ]
}

Will leave this open for a couple days in case anyone has important feedback but overall really impressed with how this works in practice 👍🏻

[mathieutu]

I can remember that we've tried some things equivalent in the past, without finding a proper way to do.

Could you explain why this time it should work work? (except that this time @reinink did it, so it will obviously be better 😛)

[adamwathan]

@mathieutu I can't remember for sure what our best effort was last time but I think the :where pseudo-selector (which is pretty new) was kinda the secret weapon this time.

[mathieutu]

Yep! Can see that. There is not much differences with #73, except this where thing. For those who would like to understand what it is : https://developer.mozilla.org/en-US/docs/Web/CSS/:where

[adamwathan]

@mathieutu Added you as a co-author on the PR for your original work on #73 🙏 Thanks man! 🍻

ddaf60c

[mathieutu]

Oh! Thx, actually it was not the purpose at all. I'm just glad you guys have found the magic piece that we missed back then 😅!

[phyrasaur]

Would it be easier if we use :where(.prose)? Something like this
https://play.tailwindcss.com/0J7ATcp2hq?file=css

[jakeprins]

Awesome, I really needed that not-prose class. When will it be published to npm?

[reinink]

@jakeprins It's available already via the 0.5.0-alpha.2 (next) version 👍

[phyrasaur]

If we use :where(.prose) instead of the current implementation of :not() and :where(), we're able to reduce the specificity of typography plugin, to just 0+0+0+1 instead of 0+0+1+1. I change only one line code (line 49 of index.js):

          [modifier === 'DEFAULT' ? `:where(.${className})` : `:where(.${className}-${modifier})`]: configToCss(

Using this method with all: unset property, we can properly reset any styling:

@layer base {
  :where(.prose) .unset {
    all: unset;
  }
  :where(.prose) .prose-unset * {
    all: unset;
  }
}

Plus, by doing this way, we can even add on utility classes with proper overrides without messing with !important specificity. Here's my demo repo:
weightless-typography

[reinink]

Hey @phyrasaur, interesting idea, but wouldn't that also unset any base styles that you my have? For example:

<style>
    h1 { color: green; }
    :where(.prose) .unset { all: unset; }
    :where(.prose) .unset * { all: unset; }
    :where(.prose) h1 { color: red; }
</style>

<div class="prose">
  <div class="unset">
    <h1>What color am I?</h1>
  </div>
</div>

In this situation, I would expect the <h1> to be green, because I'm "unsetting" the red which is defined using the .prose class, however, I don't get green text, but rather black (the browser default).

This means that this approach would undo the Tailwind reset (Preflight), which isn't what we want either.

[phyrasaur]

@reinink Yeah, it won't respect the green color since it has lower specificity. Unless we add a class as a selector. I was thinking about how we can override .prose class but didn't think of a non-class use case since tailwind is a utility-first framework.

[sjclark]

😉 this should probably be added to the docs somewhere

[adamwathan]

Yep we still haven't even written the release notes or upgrade guide for this, just didn't have time last week. Will be doing the docs this week.

[sjclark]

Yep we still haven't even written the release notes or upgrade guide for this, just didn't have time last week. Will be doing the docs this week.

Noooooooo worries, sure you've got a billion things on the go currently! Out of curiosity will the official plugins be documented on the main Tailwind site at some point - or are they designed/planned to be kept separate on Github?

[reinink]

Out of curiosity will the official plugins be documented on the main Tailwind site at some point - or are they designed/planned to be kept separate on Github?

@sjclark We hope to eventually have them all on the main website — starting with the typography docs, which were migrated last week: https://tailwindcss.com/docs/typography-plugin 🤟

[johanobergman]

Just a heads up - the target: 'legacy' option is not documented on the main site, and since :where-support isn't super good it would be great to inform about that option.

[AysunSachir]

Not sure if it's a bug or anyone else has the same issue, but using Hugo and I can't apply the "not-prose" or "max-w-none" classes, yet the prose class works without issues.