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

Joh*_*kas 2 css typography extend prose tailwind-css

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

默认设置是max-w-prose,我尝试将 和max-w-none一起设置为父元素prose,但它似乎不起作用(尽管它与对齐方式混淆)。我也尝试过在每个元素中设置max-w-nonewith prose(警惕不必要的覆盖到 65ch),但这也没有削减它。

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

  theme: {
    extend: {
      typography: {
        DEFAULT: {
          css: {
            'prose': {
              'max-width': '100ch'
            },
            'max-w-prose': {
              'max-width': '100ch'
            },
        ...
Run Code Online (Sandbox Code Playgroud)

但我不明白。任何提示都非常受欢迎!

Iha*_*nka 11

这是默认的.proseCSS 属性,所以排版配置应该是这样的

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

演示版

  • Tailwind 有更新最大宽度的文档,这是推荐的解决方案:https://tailwindcss.com/docs/typography-plugin#overriding-max-width (8认同)
  • 在 Tailwind 配置中设置它会更容易在每次使用 `prose` 时覆盖它。 (2认同)