How do I remove backticks (`) from inline code blocks with TailwindCSS?

Published

TailwindCSS inexplicably adds back ticks (`) to inline <code> blocks. For some people, this stylistic decision isn’t ideal. So how do you fix it?

To remove backticks from your code blocks, you’ll need to override the default styles for the code::before and code::after styles of the Typography plugin:

const config = {
  // ...other config stuff here
  theme: {
    extend: {
      typography: {
        DEFAULT: {
          css: {
            "code::before": { content: '""' },
            "code::after": { content: '""' },
          },
        },
      },
    },
  },
  plugins: [require("@tailwindcss/typography")],
};

This solution was discovered via this comment in the TailwindCSS typography plugin Github issue found here.