tailwindcss-typography icon indicating copy to clipboard operation
tailwindcss-typography copied to clipboard

`prose-code` targets both inline and block code

Open aarondfrancis opened this issue 1 year ago • 10 comments

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

aarondfrancis avatar Dec 04 '23 03:12 aarondfrancis