How to turn off Tailwind Typography CSS styling for pre tags to use custom styling

December 24th, 2021

Tailwind Typography is a great plugin for Tailwind CSS that applies nearly all the styling you need for prose sections of your website such as blog posts - and it does so quite aesthetically with all the responsive considerations of screen sizes. In short if you are already using Tailwind - there is little reason not to add on the Typography plugin for your content sections.

One of the problems I had though when I was building my Markdown blogs was that Tailwind Typography applied its rather drab styling to html pre tags which I use to show code blocks in the blog posts. This meant all the syntax highlighting setup I had done with react-syntax-highlighter would get overwritten by Tailwind Typography.

What I needed was a way to turn off styling for a specific component of Typography - the pre tags - while keeping all the good styling benefits for the rest of my regular prose content. There are some plans afoot by the Tailwind Typography team about enabling an easier way to turn off styling where needed - but until that is made available in a stable release - this is how we can turn it off.

Editing the Tailwind config to remove styling for pre tags when using Typography

We need to make use of the Typography low level API to "extend" the styling to say No styling for pre tags for in the tailwindconfig.css.

However - we need to apply this for all responsive breakpoints.

So in order to scale - it is better to define a style for each breakpoint rather than generically apply a "pre:false" across.

In this example, I have also changed the font h1 tag styling for the "large" Tailwind breakpoint to demonstrate.

//tailwind.config.js
const defaultCss = {
  pre: false,
};

const smCss = {
  pre: false,
};

const lgCss = {
  pre: false,
  h1: {
    fontSize: '2.0em',
    fontWeight: '700',
  },
};

const xlCss = {
  pre: false,
};

const xl2Css = {
  pre: false,
};

module.exports = {
  mode: 'jit',
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  media: false,
  theme: {
    extend: {
      typography: {
        DEFAULT: { css: defaultCss },
        sm: { css: smCss },
        lg: { css: lgCss },
        xl: { css: xlCss },
        '2xl': { css: xl2Css },
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [require('@tailwindcss/typography'), require('@tailwindcss/forms')],
};

Note some older versions of tailwind css may have had different names used for some properties like media - check your build warnings to see recommendations about using newer property names - the file above does that.

Now if you were to reload your page, you will see there would no longer be any Typography styles for pre tags.

Conclusion

Now you are free to use your own styling in pre tags like I have done so here.

Ultimately, the Typography library is going to support this using some higher level prop - but until then - this reference is hopefully helpful.