tailwindlabs
No way to unset .not-prose without using Tailwind config
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".
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
That still doesn't look right to me. Here's what I'd expect using the v3 config https://play.tailwindcss.com/krKYNAX0AV
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 🙈
Gonna close this since there's a workaround like @philipp-spiess mentioned (basically replicating the :not(:where(…)) code that the JS plugin wraps things in.
Has been implemented? Or this is closed as "not planned"? Last response was that updating the Typography plugin to work like v3 was a work in progress.