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

Learn how to disable Tailwind CSS Prose typography class for pre and code blocks when using Rehype.

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

Karthik Kamalakannan

Founder and CEO

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: February 28th, 2024 at 10:08:54 AM GMT+0

Subscribe

Get notified about new updates on Product Management, Building SaaS, and more.

Get things started. Now.

You have a business problem that you want to get off your mind? Need a trusted company to get it done for you and just show up with the solution? Talk to Skcript.