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.

---

Like this post?
Why don't you let me know on Twitter: @danawoodman