Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
IHIutch opened this issue Apr 23, 2025 · 2 comments
Open

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

IHIutch opened this issue Apr 23, 2025 · 2 comments

Comments

@IHIutch
Copy link

IHIutch commented Apr 23, 2025

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".

@IHIutch IHIutch changed the title No way to unset .not-prose plugin customizations for v4 No way to unset .not-prose plugin without using Tailwind config Apr 23, 2025
@IHIutch IHIutch changed the title No way to unset .not-prose plugin without using Tailwind config No way to unset .not-prose without using Tailwind config Apr 23, 2025
@philipp-spiess
Copy link
Member

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
Copy link
Author

IHIutch commented May 7, 2025

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants