tailwindlabs / tailwindcss-typography

Beautiful typographic defaults for HTML you don't control.
https://tailwindcss-typography.vercel.app/
MIT License
4.09k stars 255 forks source link

`prose-code` targets both inline and block code #329

Open aarondfrancis opened 7 months ago

aarondfrancis commented 7 months ago

What version of @tailwindcss/typography are you using?

0.5.9

What version of Node.js are you using?

18.18.0

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction repository

https://github.com/tailwindlabs/tailwindcss/discussions/12496

Describe your issue

With Adam's permission, opening an issue here!

The prose-code:{utility} modifiers affect both inline code elements and code elements wrapped in pre as well.

I don't know what the right API design is, but here's the variant I added:

    plugins: [
        require('@tailwindcss/typography'),
        plugin(function ({addVariant}) {
          addVariant('prose-inline-code', '&.prose :where(:not(pre)>code):not(:where([class~="not-prose"] *))');
        })
    ],

I kinda think prose-code should hit inline code blocks only, but that seems like a breaking change? I dunno, up to y'all!

Godspeed

kaiwen-wang commented 6 days ago

bump, ran into this issue and writing for attention, will try the wordaround though