prose-code targets both inline and block code

[aarondfrancis]

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

tailwindlabs/tailwindcss#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]

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

[jillesca]

Hit the same issue with prose-code. Workaround didn't work, got an strange error [ERROR] [postcss] Cannot access 'default' before initialization.

This is what my plugin looks like, which I copied, pasted the workaround above.

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

Using:
"@tailwindcss/typography": "^0.5.13",
"tailwindcss": "^3.4.4",

[elalemanyo]

@jillesca This is a small play example, maybe helps you.

[kaiwen-wang]

Hit the same issue with prose-code. Workaround didn't work, got an strange error [ERROR] [postcss] Cannot access 'default' before initialization.

This is what my plugin looks like, which I copied, pasted the workaround above.

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

Using: "@tailwindcss/typography": "^0.5.13", "tailwindcss": "^3.4.4",

Maybe it has to do with wrapping the thing with plugin? This is mine and it works:

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./src/**/*.{html,js,svelte,ts}'],
  theme: {
    extend: {
      fontFamily: {
        'serif': ['Iowan Old Style', "serif"],
        'headings': ["Charter", 'Bitstream Charter', 'Sitka Text', "Cambria", "ui-serif", "serif"]
      },
    }
  },
  plugins: [
    require("tailwindcss-animate"),
    require('@tailwindcss/typography'),
    require('tailwindcss-opentype'),
    require("tailwind-extended-shadows"),
    function ({ addVariant }) {
      addVariant(
        'prose-inline-code',
        '&.prose :where(:not(pre)>code):not(:where([class~="not-prose"] *))'
      );
    },
  ],
}

[jillesca]

thanks @elalemanyo for the play and @kaiwen-wang for the sample. is working now, the issue was the plugin wrapper around the function.

[nakorndev]

Hit the same issue with prose-code. Workaround didn't work, got an strange error [ERROR] [postcss] Cannot access 'default' before initialization.
This is what my plugin looks like, which I copied, pasted the workaround above.

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

Using: "@tailwindcss/typography": "^0.5.13", "tailwindcss": "^3.4.4",

Maybe it has to do with wrapping the thing with plugin? This is mine and it works:

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./src/**/*.{html,js,svelte,ts}'],
  theme: {
    extend: {
      fontFamily: {
        'serif': ['Iowan Old Style', "serif"],
        'headings': ["Charter", 'Bitstream Charter', 'Sitka Text', "Cambria", "ui-serif", "serif"]
      },
    }
  },
  plugins: [
    require("tailwindcss-animate"),
    require('@tailwindcss/typography'),
    require('tailwindcss-opentype'),
    require("tailwind-extended-shadows"),
    function ({ addVariant }) {
      addVariant(
        'prose-inline-code',
        '&.prose :where(:not(pre)>code):not(:where([class~="not-prose"] *))'
      );
    },
  ],
}

Work for me. This variant should be added to the main repository.