如何自定义Tailwind Typography插件的max-width？配置无效求助

我尝试修改tailwind.config.cjs文件来自定义Tailwind Typography插件的max-width，设置为2000px，但配置并未生效。

我尝试的无效配置 #

// tailwind.config.cjs
extend: {
  typography: ({theme}) => ({
    DEFAULT: {
      CSS: {
        maxWidth: '2000px',
      },
    },
  }),
},

完整的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')],
};

解决方案 #

问题根源是大小写错误：你在DEFAULT配置里写的是大写的CSS，但Tailwind Typography插件要求这个键必须是小写的css。修改后配置即可生效。

修正后的配置片段：

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

另外要确保你的页面元素上已经添加了prose类（比如<div class="prose">...</div>），这样Typography插件的样式才会正确应用到目标元素上。

内容的提问来源于stack exchange，提问作者aitor