Typography: Target inline code elements only

[aarondfrancis]

I just wanted to leave this here in case anyone ever needs it.

If you're trying to target code elements that are not wrapped in pre blocks with Tailwind Typography, you can add this variant to your tailwind.config.js.

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

You can use prose-inline-code:{utility} to target inline blocks now.

I think the selector is right, but it definitely works. I tried to mirror the default prose ones.

You can read more here: https://aaronfrancis.com/2023/tailwind-typography-inline-code-only

[thiagomajesk]

Lost more time than I'm willing to admit looking for a solution. Was trying to do this today and it was such a lifesaver 💪 (this is what I call timing). I wish this would be part of core utilities, since you cannot style prose-code without hitting on pre > code (usually not what you want). Thanks @aarondfrancis 👏 .

[aarondfrancis]

So glad it was helpful! <3

[adamwathan]

I think the fact that it currently targets code elements in pre elements is honestly a bug, haha. Feel free to make an issue on the typography repo 💀

[aarondfrancis]

Woah

[aarondfrancis]

For posterity, here's the issue: tailwindlabs/tailwindcss-typography#329

[zenovak]

For those who copied the above snippet and having some tailwindcss intellisense issues or snippet not working

you need to also import the plugin

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

docs