We’re currently working on a new design for Future Studio. The next version uses Tailwind CSS with the Tailwind typography plugin. The default typography styling in Tailwind CSS uses backticks around inline code. We wanted the inline code not to use backticks and instead a light background.

This tutorial shows you how to remove the backticks around inline code added by the Tailwind CSS typography plugin.

Tailwind CSS Series Overview

Remove Backticks Around Code When Using the Tailwind CSS Typography Plugin

The default typography styling in Tailwind CSS uses backticks around inline code. Here’s what the default styling looks like:

We don’t want to use the backtick styling and instead highlight inline code using a background color. Here’s a basic Tailwind configuration removing the backticks:

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {  
  theme: {
    extend: {
      typography (theme) {
        return {
          DEFAULT: {
            css: {
              'code::before': {
                content: 'none', // don’t generate the pseudo-element
//                content: '""', // this is an alternative: generate pseudo element using an empty string
              },
              'code::after': {
                content: 'none'
              },
              code: {
                color: theme('colors.slate.500'),
                backgroundColor: theme('colors.stone.100'),
                borderRadius: theme('borderRadius.DEFAULT'),
                paddingLeft: theme('spacing[1.5]'),
                paddingRight: theme('spacing[1.5]'),
                paddingTop: theme('spacing.1'),
                paddingBottom: theme('spacing.1'),
              },
            }
          }
        }
      }
    }
  },
  plugins: [
    require('@tailwindcss/typography'),
  ]
}

Here’s a preview of the changed Tailwind configuration:

That’s it!