Removing Tailwind Typography's backticks around inline code blocks
Tailwind Typography is a great way to style your transformed markdown into best practice typography. Except this one little detail. The backquotes around inline code blocks. Here's what it looks like out of the box:
Removing the inline code backticks
For some reason, Tailwind adds backticks, making the overall texture of the text noisy. Let's fix that.
Method 1: Using a class
<div class="prose-code:before:content-none prose-code:after:content-none">
`This` will not have backticks
</div>
This works great on a case by case basis. But if we just want to get rid of those backticks once and for all, let's grab a bigger hammer
Method 2: Changing tailwind.config.js
Here's how to overwrite those backticks.
module.exports = {
theme: {
extend: {
typography(theme) {
"code::before": {
content: '""',
},
"code::after": {
content: '""',
},
}
}
}
Now that we're here, it's easy to add more styling to those inline code blocks.
module.exports = {
theme: {
extend: {
typography(theme) {
code: {
fontFamily: "Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;",
backgroundColor: "rgba(255,255,255,0.1)",
opacity: 0.8,
},
"code::before": {
content: '""',
"padding-left": "0.25rem"
},
"code::after": {
content: '""',
"padding-right": "0.25rem"
},
}
}
}
{
And here's the final result.
And that's what we wanted. I really can't think of a good reason to artificially add the backticks other than "it's easier to see that it's code, and programmers are almost all familiar with Markdown, so they'll know what the ticks mean." Luckily, it's not Dhard to change that behavior. If you know how.