No way to unset .not-prose without using Tailwind config

[IHIutch]

What version of @tailwindcss/typography are you using?

v0.5.16

What version of Node.js are you using?

v20.15.1

What browser are you using?

Brave Version 1.76.73 Chromium: 134.0.6998.45 (Official Build) (arm64)

What operating system are you using?

macOS 15.1.1 (24B91)

Reproduction repository

https://play.tailwindcss.com/B72CiZiVnw?file=css

Describe your issue

Looking through past issues, it seems like this is a potentially viable solution for customizing the prose plugin; however using .not-prose in this case won't unset styles defined in @utility prose.

It's mentioned a few times in various places, but just to make it clear: as of writing, in order to customize the typography plugin, you must use the Tailwind config.

Hopefully, this issue can help track the state of supporting customizing the prose plugin in a "v4 way".

[philipp-spiess]

Hey! Something we've been tinkering with (while looking at building a CSS-only version of the Typography plugin) was to do this instead:

@utility prose { 
  :not(:where([class~='not-prose'], [class~='not-prose'] *)) {
    h1 {
      color: red;
    }
  }
}

The :not(:where([class~='not-prose'], [class~='not-prose'] *)) will ensures rules nested underneath it won't match inside .not-prose anymore. Here's how this would look like in your example: https://play.tailwindcss.com/OjxphORR9U?file=css

[IHIutch]

That still doesn't look right to me. Here's what I'd expect using the v3 config https://play.tailwindcss.com/krKYNAX0AV

[philipp-spiess]

My bad, the h1 selector needs to be a &:where(h1):

@utility wysiwyg {
  :not(:where([class~='not-wysiwyg'], [class~='not-wysiwyg'] *)) {
    &:where(h1) {
      color: red;
    }
  }
}

https://play.tailwindcss.com/ADGo1nkQNt?file=css

Looks like I copied it wrongly from the CSS-only exploration that I mentioned earlier 🙈

[IHIutch]

Ah, yes, this looks great. Looking forward to it!