Removing backticks from Tailwind Typography
Out-of-the-box inline code is wrapped in backticks, much like the Markdown that probably produced it.
I’ll forego the subjectivity and get straight down to how one prevents the addition of these characters. There are a few techniques one can apply of varying levels of beauty.
The first, is to override things at the point you introduce the prose
class:
<article class="prose prose-code:before:hidden prose-code:after:hidden">
<!-- snip -->
</article>
The CSS generated by Tailwind Typography will still feature the content:
declarations before and after your inline <code>
tags, but the classes will
override in situ. If you don’t have access to your tailwind.config.js
this
might be the best option.
If you do have access to tailwind.config.js
, you can use a couple of carefully
placed false
singletons to elide the styles from your build entirely.
/** @type {import('tailwindcss').Config} */
module.exports = {
// [...]
theme: {
extend: {
typography: (_theme) => ({
DEFAULT: {
css: {
"code::before": {
content: false,
},
"code::after": {
content: false,
},
},
},
}),
},
},
plugins: [
require("@tailwindcss/typography"),
],
};
This approach will remove the backticks entirely from your CSS, which is more efficient and arguably simpler.