Dominik Geimer
Tailwind CSS

Remove back quotes around inline code in Tailwind CSS Typography

The design of my site is done with Tailwind CSS framework and the text you are reading here is formatted using the Typography plugin. If you look at the live demo of the Typography plugin, you will see that the inline code is displayed with additional back quotes.

I personally don't like the additional back quotes and for that reason I removed them. If you feel the same way, then there are two ways to remove them.

Tailwind config

To remove the back quotes globally, you can adjust your tailwind.config.js.

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

Tailwind class

Starting with version 3 of Tailwind CSS, you can also add these additional classes directly to avoid the back quotes on specific inline code blocks.

class="... prose-code:before:content-none prose-code:after:content-none"

Conclusion

As you can see, you have two different options to remove the back quotes, but I personally prefer the first one, because this applies to all inline code blocks without having to add classes manually.

Previous Article

Change the icon of a published RemoteApp in Windows Server

Next Article

Publish an RDS RemoteApp from a network share