Removing backticks from Tailwind Typography

Out-of-the-box inline code is wrapped in backticks, much like the Markdown that probably produced it.

I’ll forego the subjectivity and get straight down to how one prevents the addition of these characters. There are a few techniques one can apply of varying levels of beauty.

The first, is to override things at the point you introduce the prose class:

<article class="prose prose-code:before:hidden prose-code:after:hidden">
  <!-- snip -->
</article>

The CSS generated by Tailwind Typography will still feature the content: declarations before and after your inline <code> tags, but the classes will override in situ. If you don’t have access to your tailwind.config.js this might be the best option.

If you do have access to tailwind.config.js, you can use a couple of carefully placed false singletons to elide the styles from your build entirely.

/** @type {import('tailwindcss').Config} */
module.exports = {
  // [...]
  theme: {
    extend: {
      typography: (_theme) => ({
        DEFAULT: {
          css: {
            "code::before": {
              content: false,
            },
            "code::after": {
              content: false,
            },
          },
        },
      }),
    },
  },
  plugins: [
    require("@tailwindcss/typography"),
  ],
};

This approach will remove the backticks entirely from your CSS, which is more efficient and arguably simpler.