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:

1
// Modify your tailwind.config.js
2
const disabledCss = {
3
  'code::before': false,
4
  'code::after': false,
5
  'blockquote p:first-of-type::before': false,
6
  'blockquote p:last-of-type::after': false,
7
  pre: false,
8
  code: false,
9
  'pre code': false,
10
  'code::before': false,
11
  'code::after': false,
12
}
13

14
module.exports = {
15
  theme: {
16
    extend: {
17
      typography: {
18
        DEFAULT: { css: disabledCss },
19
        sm: { css: disabledCss },
20
        lg: { css: disabledCss },
21
        xl: { css: disabledCss },
22
        '2xl': { css: disabledCss },
23
      },
24
    },
25
  },

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 @getFeatureOS

References

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

tailwindlabs/tailwindcss-typography ↗

tailwindlabs/tailwindcss-typography ↗

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