如何在Tailwind CSS Typography中覆盖默认65ch最大宽度？

方法一：全局修改默认prose样式（推荐） #

你之前的tailwind.config.js写法有误，正确的做法是直接在Typography的DEFAULT配置里覆盖max-width属性——prose类的默认宽度是插件内置的，需要在插件配置层级里修改，而非嵌套选择器。

修改tailwind.config.js如下：

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      typography: ({ theme }) => ({
        DEFAULT: {
          css: {
            maxWidth: '100ch', // 替换成你需要的宽度，比如100ch
          },
        },
      }),
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
    // 其他插件...
  ],
};

修改后，原有的prose类会直接生效新的宽度，无需额外添加max-w-none，也不会打乱对齐。

方法二：自定义Typography变体（按需使用） #

如果不想全局修改，只想给特定内容应用宽版样式，可以自定义一个变体：

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      typography: ({ theme }) => ({
        wide: {
          css: {
            maxWidth: '100ch',
          },
        },
      }),
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
  ],
};

使用时给目标元素添加prose prose-wide类即可，不会影响其他使用默认prose的内容。

关于max-w-none无效的说明 #

如果之前添加max-w-none没生效，大概率是因为元素外层还有其他带max-width的容器（比如Jekyll模板自带的容器类），或者prose类的样式优先级被其他规则覆盖。可以用浏览器开发者工具检查元素的计算样式，定位限制宽度的规则后针对性调整。

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