csstailwind-cssextendtypographyprose

Override 65ch max-width in Tailwind CSS Typography


I am using a Jekyll template with Tailwind and Typography, and I am interested in overriding the default max-width 65ch limit on each line.

The default setting was max-w-prose, and I have tried setting max-w-none to the parent element, along with prose, but it doesn't seem to work (although it messes with the alignment). I have also tried setting the max-w-none with prose in every element (wary of unwanted overrides to 65ch) but this also isn't cutting it.

I am thinking this could be done via the tailwind.config.js file, like:

  theme: {
    extend: {
      typography: {
        DEFAULT: {
          css: {
            'prose': {
              'max-width': '100ch'
            },
            'max-w-prose': {
              'max-width': '100ch'
            },
        ...

but I can't figure it out. Any tips are super welcome!


Solution

  • This is default .prose CSS properties so typography config should be like this

    module.exports = {
      theme: {
        extend: {
          typography: {
            DEFAULT: {
              css: {
                maxWidth: '100ch', // add required value here
              }
            }
          }
        },
      },
      plugins: [
        require('@tailwindcss/typography'),
      ],
    }
    

    DEMO