The `not-prose` class let's some CSS properties through

What version of @tailwindcss/typography are you using?

0.5.16

What version of Node.js are you using?

23.6

What browser are you using?

N/A

What operating system are you using?

Mixed

Reproduction repository

https://play.tailwindcss.com/LcEFGWUZX3

Describe your issue

When using the class not-prose some css settings are getting through.

app.css

@import 'tailwindcss';
@plugin "@tailwindcss/typography" {
    className: 'prose-name'
}

.prose-name {
     /** **/
    --tw-prose-invert-th-borders: oklch(44.6% 0.03 256.802);
    --tw-prose-invert-td-borders: oklch(37.3% 0.034 259.733);
    font-size: 1rem;
    line-height: 1.75;
}
.prose-name {
    color: var(--tw-prose-body);
    max-width: 65ch;
}

The line-height and font-size are defined in

tailwindcss-typography/src/styles.js

Line 24 in 25051fb

lineHeight: round(24 / 14),

I understand that all the generate selectors looks like :where(h2):not(:where([class~="not-prose-name"],[class~="not-prose-name"] *)) {

But this isn't the case for the properties color font-size and line-height defined on the main css class.

This is because these properties are inherited in CSS. If not set on an element they get their value from the closest ancestor that does have that value set.

Using not-prose will prevent elements from getting additional styles by preventing selectors from matching. For example, the rule that explicitly targets the a tag (:where(a):not(:where([class~="not-prose"],[class~="not-prose"] *))) won't target those tags inside a not-prose. But any inherited property will still get styles inherited from parent elements.