Override default tailwindcss incline <code> tag styling

By default, when using the default typography plugin from tailwindcss whatever you wrap in <code> tag will result in some backticks Around Inline Code as this is the default styling provided by the @tailwindcss/typography

 

 

To override the style of <code> tag styling so the content is highlighted using a background color we can extend the typography section of your tailwind.config.js file and providing your colors under the css key. E.g:

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      typography: ({ theme }) => ({
        DEFAULT: {
          css: [
            {
              code: {
                color: theme('colors.accent'),
                backgroundColor: theme('colors.gray.200'),
                borderRadius: theme('borderRadius.DEFAULT'),
                paddingLeft: theme('spacing[1.5]'),
                paddingRight: theme('spacing[1.5]'),
                paddingTop: theme('spacing.1'),
                paddingBottom: theme('spacing.1'),
              },
              'code::before': {
                content: 'none',
              },
              'code::after': {
                content: 'none',
              },
            }
          ]
        },
      }),
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
  ],
}

 

Here’s a preview of the changed Tailwind configuration: