Tailwind CSS v4如何覆盖Typography插件的65ch最大宽度？

方法1：引入插件时直接传入配置 #

在你的主CSS文件（比如main.css）中，引入@tailwindcss/typography插件的同时，通过with()语法传递自定义配置：

@tailwind base;
@tailwind components;
@tailwind utilities;

@plugin '@tailwindcss/typography' with (
  DEFAULT: {
    css: {
      maxWidth: '100%',
    }
  }
);

这种方式和v3中在配置文件的extend.typography里的逻辑完全对应，直接针对插件的默认变体修改样式。

方法2：通过@layer覆盖样式 #

如果更习惯直接操作类样式，可以在CSS文件的@layer utilities区块中重写.prose类的属性：

@tailwind base;
@tailwind components;
@tailwind utilities;

@plugin '@tailwindcss/typography';

@layer utilities {
  .prose {
    max-width: 100%;
  }
}

要是需要针对特定变体（比如prose-lg）调整，也可以精准指定：

@layer utilities {
  .prose-lg {
    max-width: 100%;
  }
}

两种方法都能实现移除默认65ch最大宽度、设置为100%的效果，按需选择即可。

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