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.