Engineering | 19 May, 2022

How to disable Tailwind CSS Prose class for code and pre tags

We spend a lot of time obsessing over how things are designed, and rendered on our website. This year, we wanted to go all-in with writing the most optimized and beautiful code for our website and blog to make it easy for our readers to read the content. To do this, we moved from the default Tailwind Typography's prose class to showcase our code blocks to Rehype.

Rehype is amazing to render code blocks. It allows us to be able to customize almost every aspect of the code block on our blog. But as soon as we implemented Rehype, we hit a roadblock. That was that the Prose class from Tailwind Typography was interfering with the Rehype styles code blocks. Making it look worse.

While we are well-aware of Tailwind and its plugins, one thing we couldn't figure out was a way to disable prose for certain blocks of content. After hours of trial and error, here's what worked for us:

Disable prose for code and pre tags on TailwindCSS

The best way to disable prose class for certain code blocks for your blog is to disable it under the tailwind.config.js. In the config file, extend the following code:

tailwind.config.js
// Modify your tailwind.config.js
const disabledCss = {
	'code::before': false,
	'code::after': false,
	'blockquote p:first-of-type::before': false,
	'blockquote p:last-of-type::after': false,
	pre: false,
	code: false,
	'pre code': false,
	'code::before': false,
	'code::after': false,
}
 
module.exports = {
	theme: {
		extend: {
			typography: {
				DEFAULT: { css: disabledCss },
				sm: { css: disabledCss },
				lg: { css: disabledCss },
				xl: { css: disabledCss },
				'2xl': { css: disabledCss },
			},
		},
	},

This did the trick for us. Now, what you see above is the codeblock using rehype rather than getting overridden by Tailwind CSS prose class. Have something to say? Hit us up on Twitter @hellonexthq

References

Of course, we couldn't have done this without the help of the community. Here are some reference links:

Disable Prose Class

tailwindlabs/tailwindcss-typography ↗

Disable Prose Class

tailwindlabs/tailwindcss-typography ↗

Disable Prose Class

https://tailwindcss.com/docs/typography-plugin#customizing-the-css

Last updated: August 3rd, 2022 at 3:55:27 AM GMT+0

Hellonext Blogpost Author Profile

Karthik Kamalakannan

Karthik is the Founder of Hellonext. He has helped prioritize customer feedback to build great products since 2006. Today, he helps product companies build data-informed products with Hellonext.

Ready to try Hellonext?

Superpower your customer feedback loop by creating your free account on Hellonext.

Create my account now

No credit card required • Free for 14 days • Setup in <2 mins