How to override Tailwind Typography? #9001

mattbal · 2022-07-31T21:49:07Z

mattbal
Jul 31, 2022

I'm not a fan of the spacing in Tailwind Typography, so I want to override the base modifier in styles.js, which almost the entire file.

I've created a new defaultModifiers with the code I want, like so:

let defaultModifiers = {
  base: {
    css: [
      {
        fontSize: '1rem',
        lineHeight: '1.75rem',
        p: {
          marginTop: '1.25rem',
          marginBottom: '1.25rem',
        },
        '[class~="lead"]': {
          fontSize: '1.25rem',
          lineHeight: '1.6rem',
          marginTop: '1.2rem',
          marginBottom: '1.2rem',
        },
        ... // rest of my code
       }
     ]
  }
}

But when I tried overriding the Typography plugin in tailwind.config.js, I got a bunch of errors. It doesn't work if I put my override code under theme: nor if I put it under extends:.

module.exports = {
  content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  theme: {
    typography: (theme) => ({
      DEFAULT: {
        css: [
          {
            color: 'var(--tw-prose-body)',
            maxWidth: '65ch',
            '[class~="lead"]': {
              color: 'var(--tw-prose-lead)',
            },
            a: {
              color: 'var(--tw-prose-links)',
              textDecoration: 'underline',
              fontWeight: '500',
            },
            strong: {
              color: 'var(--tw-prose-bold)',
              fontWeight: '600',
            },
            'a strong': {
              color: 'inherit',
            },
            'blockquote strong': {
              color: 'inherit',
            },
            'thead th strong': {
              color: 'inherit',
            },
            ol: {
              listStyleType: 'decimal',
            },
            'ol[type="A"]': {
              listStyleType: 'upper-alpha',
            },
            'ol[type="a"]': {
              listStyleType: 'lower-alpha',
            },
            'ol[type="A" s]': {
              listStyleType: 'upper-alpha',
            },
            'ol[type="a" s]': {
              listStyleType: 'lower-alpha',
            },
            'ol[type="I"]': {
              listStyleType: 'upper-roman',
            },
            'ol[type="i"]': {
              listStyleType: 'lower-roman',
            },
            'ol[type="I" s]': {
              listStyleType: 'upper-roman',
            },
            'ol[type="i" s]': {
              listStyleType: 'lower-roman',
            },
            'ol[type="1"]': {
              listStyleType: 'decimal',
            },
            ul: {
              listStyleType: 'disc',
            },
            'ol > li::marker': {
              fontWeight: '400',
              color: 'var(--tw-prose-counters)',
            },
            'ul > li::marker': {
              color: 'var(--tw-prose-bullets)',
            },
            hr: {
              borderColor: 'var(--tw-prose-hr)',
              borderTopWidth: 1,
            },
            blockquote: {
              fontWeight: '500',
              fontStyle: 'italic',
              color: 'var(--tw-prose-quotes)',
              borderLeftWidth: '0.25rem',
              borderLeftColor: 'var(--tw-prose-quote-borders)',
              quotes: '"\\201C""\\201D""\\2018""\\2019"',
            },
            'blockquote p:first-of-type::before': {
              content: 'open-quote',
            },
            'blockquote p:last-of-type::after': {
              content: 'close-quote',
            },
            h1: {
              color: 'var(--tw-prose-headings)',
              fontWeight: '800',
            },
            'h1 strong': {
              fontWeight: '900',
              color: 'inherit',
            },
            h2: {
              color: 'var(--tw-prose-headings)',
              fontWeight: '700',
            },
            'h2 strong': {
              fontWeight: '800',
              color: 'inherit',
            },
            h3: {
              color: 'var(--tw-prose-headings)',
              fontWeight: '600',
            },
            'h3 strong': {
              fontWeight: '700',
              color: 'inherit',
            },
            h4: {
              color: 'var(--tw-prose-headings)',
              fontWeight: '600',
            },
            'h4 strong': {
              fontWeight: '700',
              color: 'inherit',
            },
            // TODO: Figure out how to not need these, it's a merging issue
            img: {},
            'figure > *': {},
            figcaption: {
              color: 'var(--tw-prose-captions)',
            },
            code: {
              color: 'var(--tw-prose-code)',
              fontWeight: '600',
            },
            'code::before': {
              content: '"`"',
            },
            'code::after': {
              content: '"`"',
            },
            'a code': {
              color: 'inherit',
            },
            'h1 code': {
              color: 'inherit',
            },
            'h2 code': {
              color: 'inherit',
            },
            'h3 code': {
              color: 'inherit',
            },
            'h4 code': {
              color: 'inherit',
            },
            'blockquote code': {
              color: 'inherit',
            },
            'thead th code': {
              color: 'inherit',
            },
            pre: {
              color: 'var(--tw-prose-pre-code)',
              backgroundColor: 'var(--tw-prose-pre-bg)',
              overflowX: 'auto',
              fontWeight: '400',
            },
            'pre code': {
              backgroundColor: 'transparent',
              borderWidth: '0',
              borderRadius: '0',
              padding: '0',
              fontWeight: 'inherit',
              color: 'inherit',
              fontSize: 'inherit',
              fontFamily: 'inherit',
              lineHeight: 'inherit',
            },
            'pre code::before': {
              content: 'none',
            },
            'pre code::after': {
              content: 'none',
            },
            table: {
              width: '100%',
              tableLayout: 'auto',
              textAlign: 'left',
              marginTop: '2rem',
              marginBottom: '2rem',
            },
            thead: {
              borderBottomWidth: '1px',
              borderBottomColor: 'var(--tw-prose-th-borders)',
            },
            'thead th': {
              color: 'var(--tw-prose-headings)',
              fontWeight: '600',
              verticalAlign: 'bottom',
            },
            'tbody tr': {
              borderBottomWidth: '1px',
              borderBottomColor: 'var(--tw-prose-td-borders)',
            },
            'tbody tr:last-child': {
              borderBottomWidth: '0',
            },
            'tbody td': {
              verticalAlign: 'baseline',
            },
            tfoot: {
              borderTopWidth: '1px',
              borderTopColor: 'var(--tw-prose-th-borders)',
            },
            'tfoot td': {
              verticalAlign: 'top',
            },
          },
          defaultModifiers.gray.css,
          ...defaultModifiers.base.css,
        ],
      },
      ...defaultModifiers,
    }),
    extend: {}
};

Am I doing something wrong? Or does Tailwind Typography not support overriding?

If I can't override Tailwind Typography, could I just modify the one styles.js file, compile it as my own custom plugin, and then include it in Tailwind?

Answered by wongjn

Jul 31, 2022

As per the documentation for @tailwindcss/typography, you can customize the styles by putting it under theme.extend.typography like so:

module.exports = {
  // …
  theme: {
    extend: {
      typography: {
        DEFAULT: {
          // Custom CSS here ↓
          css: {
            fontSize: '1rem',
            lineHeight: '1.75rem',
            // More custom CSS…
          },
        },
      },
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
  ],
},

View full answer

wongjn · 2022-07-31T21:59:02Z

wongjn
Jul 31, 2022

As per the documentation for @tailwindcss/typography, you can customize the styles by putting it under theme.extend.typography like so:

module.exports = {
  // …
  theme: {
    extend: {
      typography: {
        DEFAULT: {
          // Custom CSS here ↓
          css: {
            fontSize: '1rem',
            lineHeight: '1.75rem',
            // More custom CSS…
          },
        },
      },
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
  ],
},

1 reply

mattbal Jul 31, 2022
Author

Thanks! Your response made me realize I was accidentally including square brackets before the css part

css: [
  {
      fontSize: '1rem',
      ...
  } 
]

jackblackCH · 2023-10-06T10:04:31Z

jackblackCH
Oct 6, 2023

I came here to mention that the <b> tag is unexpectedly not included in the list of default modifiers. Is this intentional? It should ideally complement the <strong> tag, which is already included.

0 replies

artemis-prime · 2024-02-04T17:56:55Z

artemis-prime
Feb 4, 2024

FWIW, I found the tw typography plugin very hard to customize. So I ended up creating my own version by grabbing the code from the tw repo. I now just customize it's values directly. It made it much easier to use. (I just have to it --and not the default tw one, in the plugins section of the tailwind config.

1 reply

heikopaiko Feb 16, 2024

Mind sharing it? :)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to override Tailwind Typography? #9001

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 3 comments 2 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

How to override Tailwind Typography? #9001

mattbal Jul 31, 2022

Replies: 3 comments · 2 replies

wongjn Jul 31, 2022

mattbal Jul 31, 2022 Author

jackblackCH Oct 6, 2023

artemis-prime Feb 4, 2024

heikopaiko Feb 16, 2024

mattbal
Jul 31, 2022

Replies: 3 comments 2 replies

wongjn
Jul 31, 2022

mattbal Jul 31, 2022
Author

jackblackCH
Oct 6, 2023

artemis-prime
Feb 4, 2024