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.
Like this post?
Why don't you let me know on Twitter:
@danawoodman