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

[Tuscan-blue]

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

@jillesca Thank u! This demo is helpful to me. It reminds me that I need to not only configure the tailwindcss.config.ts file but also manually specify the styling for inline code by using the prose-inline-code class. There are two steps, and just doing the first step will not take effect.

[davidchalifoux]

Just ran into this myself.

This is how I'm fixing it with v4:

.prose p > code {
	@apply bg-neutral-950 before:content-none after:content-none px-2 py-1 rounded-sm whitespace-break-spaces
}

Edit: Here's an even better version because it targets all code blocks that aren't children of pre:

code:not(pre > code) {
	@apply bg-neutral-800 before:content-none after:content-none px-1.5 py-1 rounded-sm whitespace-break-spaces text-[85%]
}

[adamhl8]

Here's a variant for tailwind v4:

@custom-variant prose-inline-code {
  & :is(:where(code:not(pre > code)):not(:where([class~="not-prose"], [class~="not-prose"] *))) {
    @slot;
  }
}

[20jasper]

@adamhl8 note that you don't need the @slot directive. This works as well

@custom-variant prose-inline-code (&.prose :where(:not(pre)>code):not(:where([class~="not-prose"] *)));

[kaiwen-wang]

@adamhl8 note that you don't need the @slot directive. This works as well

@custom-variant prose-inline-code (&.prose :where(:not(pre)>code):not(:where([class~="not-prose"] *)));

Note, you can just put this in app.css and use it as a class in your components. I tried @davidchalifoux 's solution which you can also put in app.css which seems to style the inline code everywhere rather than expose a class.