在 Tailwind CSS Typography 中覆盖 65ch 最大宽度

Question

我正在使用带有 Tailwind 和 Typography 的 Jekyll 模板，并且我有兴趣覆盖每行默认的最大宽度 65ch 限制。

默认设置是

max-w-prose

，我尝试将

max-w-none

与

prose

一起设置为父元素，但它似乎不起作用（尽管它与对齐方式混淆）。我还尝试在每个元素中设置

max-w-none

和

prose

（警惕不需要的覆盖到 65ch），但这也没有削减它。

我认为这可以通过 tailwind.config.js 文件来完成，例如：

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

但我无法弄清楚。任何提示都非常受欢迎！

Answer 1

这是默认的

.prose

CSS 属性，所以版式配置应该是这样的

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

演示

Answer 2

很简单，Tailwind 将散文 max-width 作为默认宽度，所以你所要做的就是添加一个 !后面的 max-w-none 使其变得重要。 像这样：散文！max-w-none