How to customize max-width of Tailwind Typography plugin

Question

I tried this, but it doesn't work:

// tailwind.config.cjs

extend: {
  typography: ({theme}) => ({
    DEFAULT: {
      CSS: {
        maxWidth: '2000px',
      },
    },
  }),
},

This is the complete tailwind.config.cjs

// https://tailwindcss.com/docs/configuration

const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
  content: ['./index.php', './app/**/*.php', './resources/**/*.{php,vue,js}'],
  theme: {
    colors: {
      morado1: '#EBE6ED',
      morado2: '#B29CB8',
      morado3: '#5C2E68',
      morado4: '#371C3E',
      morado5: '#150B17',
      gris1: '#E6E6E6',
      gris2: '#9A9A9A',
      gris3: '#535353',
      gris4: '#353535',
      gris5: '#101010',
      negro: '#000000',
      blanco: '#ffffff',
      transparent: '#ffffff00',
    },
    fontFamily: {
      serif: ['CrimsonPro', ...defaultTheme.fontFamily.serif],
      sans: ['Asap', ...defaultTheme.fontFamily.sans],
    },
    extend: {
      colors: {}, // Extend Tailwind's default colors
      typography: ({theme}) => ({
        DEFAULT: {
          CSS: {
            maxWidth: '2000px',
          },
        },
        sutil: {
          css: {
            '--tw-prose-body': theme('colors.blanco'),
            '--tw-prose-headings': theme('colors.blanco'),
            '--tw-prose-lead': theme('colors.blanco'),
            '--tw-prose-links': theme('colors.blanco'),
            '--tw-prose-bold': theme('colors.blanco'),
            '--tw-prose-counters': theme('colors.blanco'),
            '--tw-prose-bullets': theme('colors.blanco'),
            '--tw-prose-hr': theme('colors.blanco'),
            '--tw-prose-quotes': theme('colors.blanco'),
            '--tw-prose-quote-borders': theme('colors.blanco'),
            '--tw-prose-captions': theme('colors.blanco'),
            '--tw-prose-code': theme('colors.blanco'),
            '--tw-prose-pre-code': theme('colors.blanco'),
            '--tw-prose-pre-bg': theme('colors.blanco'),
            '--tw-prose-th-borders': theme('colors.blanco'),
            '--tw-prose-td-borders': theme('colors.blanco'),
            '--tw-prose-invert-body': theme('colors.blanco'),
            '--tw-prose-invert-headings': theme('colors.blanco'),
            '--tw-prose-invert-lead': theme('colors.blanco'),
            '--tw-prose-invert-links': theme('colors.blanco'),
            '--tw-prose-invert-bold': theme('colors.blanco'),
            '--tw-prose-invert-counters': theme('colors.blanco'),
            '--tw-prose-invert-bullets': theme('colors.blanco'),
            '--tw-prose-invert-hr': theme('colors.blanco'),
            '--tw-prose-invert-quotes': theme('colors.blanco'),
            '--tw-prose-invert-quote-borders': theme('colors.blanco'),
            '--tw-prose-invert-captions': theme('colors.blanco'),
            '--tw-prose-invert-code': theme('colors.blanco'),
            '--tw-prose-invert-pre-code': theme('colors.blanco'),
            '--tw-prose-invert-pre-bg': theme('colors.blanco'),
            '--tw-prose-invert-th-borders': theme('colors.blanco'),
            '--tw-prose-invert-td-borders': theme('colors.blanco'),
          },
        },
      }),
    },
  },
  plugins: [require('@tailwindcss/typography'), require('@tailwindcss/forms')],
};

Here is a similar [question](https://stackoverflow.com/questions/65903737/configure-container-max-width-at-specific-breakpoints-tailwindcss). — Alen Vlahovljak, Apr 08 '23 at 09:10

score 1 · Accepted Answer · answered Apr 08 '23 at 19:54

1

The object keys are case sensitive. Use lowercase css:

module.exports = {
  theme: {
    extend: {
      typography: ({theme}) => ({
        DEFAULT: {
          css: {
            maxWidth: '2000px',
          },
        },
      }),
    },
  },
};

answered Apr 08 '23 at 19:54

Wongjn

8,544
2
8
24

score 1 · Answer 2 · answered Apr 10 '23 at 17:59

1

As the official tailwind docs point out, adding the classname max-w-... to the element directly controls the proses max width. So you could technically do max-w-[2000px] to override the default max-width.

answered Apr 10 '23 at 17:59

Sadra M.

1,304
1
17
28

How to customize max-width of Tailwind Typography plugin

2 Answers2