How to remove backquote around inline code?

[dpyzo0o]

The default style of inline code has backquotes which I do not want. I tried to override it with the following configuration but it does not work.

// tailwind.config.js
module.exports = {
  theme: {
    typography: {
      default: {
        css: {
          code: {
            '&::before': {
              content: '""',
            },
            '&::after': {
              content: '""',
            },
          }
          // ...
        },
      },
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
    // ...
  ],
}

[adamwathan]

Can you create a GitHub repo that reproduces this? I just tried it on our blog and was able to override it no problem with your exact code.

[vincentdoerig]

Hi @dpyzo0o, if you add !important it should work. So like this:

typography: {
  default: {
    css: {
      code: {
        '&::before': {
          content: '"" !important',
        },
        '&::after': {
          content: '"" !important',
        },
      }
      // ...
    },
  },
},

I was able to reproduce your issue though, I think the problem is that the new class gets added before the typography plugin class and thus overwriting it.

I imagine this is something that could be fixed?

[dpyzo0o]

@vincentdoerig Yes, adding !important can solve the issue but I'm trying to avoid using !important if possible. Indeed I'm able to remove the backquotes by setting display: none

// tailwind.config.js
module.exports = {
  theme: {
    typography: {
      default: {
        css: {
          code: {
            '&::before': {
              display: 'none',
            },
            '&::after': {
              display: 'none',
            },
          }
          // ...
        },
      },
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
    // ...
  ],
}

@adamwathan I'm sure this issue is reproducible, here is a minimal repo that reproduces the issue, https://github.com/dpyzo0o/tailwindcss-bug-reproduce

[dpyzo0o]

@adamwathan some findings... Writing in this way will correctly overwrite the original style. Seems like using &::before, &::after will cause the styles to be applied before the original styles.

// tailwind.config.js
module.exports = {
  theme: {
    typography: {
      default: {
        css: {
          'code::before': {
            content: '""',
          },
          'code::after': {
            content: '""',
          }
          // ...
        },
      },
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
    // ...
  ],
}

[adamwathan]

Ah yeah you know what I think I wrote it that way when I was testing things out, so I was wrong when I said I used your code exactly 🤦

It looks like this is due to a particular detail of how deep merging works in lodash, which causes object properties to be merged in a different order than I'd expect (overrides are added as earlier keys in the object being merged to, not later).

For now I would recommend mimicking the exact selector we use in the styles.js reference whenever you need to make an override, and we will see about making the merging behavior more intuitive.

EDIT: Actually doesn't seem like a lodash issue, not sure where this order issue pops up, might be in postcss-js. Will explore.

[adamwathan]

Actually I know exactly what is happening now, sorry.

Your changes are being merged with our existing code key, which comes before our code::before and code::after keys.

Here's our code:

code: {
  color: defaultTheme.colors.gray[900],
  fontWeight: '600',
},
'code::before': {
  content: '"`"',
},
'code::after': {
  content: '"`"',
},

When you're code is merged in, it creates this object:

code: {
  color: defaultTheme.colors.gray[900],
  fontWeight: '600',
  '&::before': {
    content: '""',
  },
  '&::after': {
    content: '""',
  },
},
'code::before': {
  content: '"`"',
},
'code::after': {
  content: '"`"',
},

So when it's all flattened out, our existing code::before and code::after selectors win. This is sort of a tough one to figure out how to "fix" because the current behavior is actually really useful for lots of situations, so we might just want to figure out a way to let the user control this more finely.

Going to close this for now since there's a solution (use our keys) and I can't say for sure we are going to take action on it.

[nad-au]

Hello, we have the same problem in that all our inline code is showing backticks, which we don't want. You mentioned that you have a solution: use our keys. Please can you explain this? I've gone through all the above and we still see backticks everywhere.

[nad-au]

Apologies, I made a mistake in the tailwind.config.js. This is working for me now:

// tailwind.config.js
module.exports = {
  theme: {
    typography: {
      default: {
        css: {
          'code::before': {
            content: '""',
          },
          'code::after': {
            content: '""',
          },
        },
      },
    },
  },
  plugins: [require("@tailwindcss/typography")],
};

[alexellis]

@Waterdrips ☝️ this should do the trick?

[MoSattler]

This did not work for me (TW2.0) - when I was adding this to my tailwind config, it completely broke all styles.
I had to add a small change, and it worked

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      typography: {
        DEFAULT: {
          css: {
            'code::before': {
              content: '""'
            },
            'code::after': {
              content: '""'
            }
          }
        }
      },
    },
  },
  plugins: [require("@tailwindcss/typography")],
};

[Panda-Program-Web]

For v3, this works for me.

#135 (comment)

[almai]

I know, I'm a little bit late to the party. But in case someone is interested in this. You can suppress the backticks with prose-code:before:hidden prose-code:after:hidden

[peterhijma]

I know, I'm a little bit late to the party. But in case someone is interested in this. You can suppress the backticks with prose-code:before:hidden prose-code:after:hidden

But not too late! Thanks!

[steven-tey]

I know, I'm a little bit late to the party. But in case someone is interested in this. You can suppress the backticks with prose-code:before:hidden prose-code:after:hidden

This did the trick! Thank you!

[JosiahParry]

prose-code:before:hidden prose-code:after:hidden

This worked! Thank you so much!!!!

[LamNguyenz]

I know, I'm a little bit late to the party. But in case someone is interested in this. You can suppress the backticks with prose-code:before:hidden prose-code:after:hidden

Thanks, you save my life

[kerryj89]

These classes didn't work for me in v4. Here is what I used instead to kill it from the root:

@utility prose {
  code {
    &::before,
    &::after {
      content: none;
    }
  }
}

[sergiodantasz]

Perfect, @kerryj89. I'm using v4 too, it worked well.