如何使用顺风 css 类实现 32rem 边距

问题描述

https://tailwindcss.com/docs/margin,可以给的最大边距为 24 rem。

如果我想有 32 rem margin 怎么实现？

解决方法

尝试自定义 Tailwind 的默认间距/大小比例：https://tailwindcss.com/docs/customizing-spacing

您可以添加更大的尺寸，例如：

// tailwind.config.js
module.exports = {
  theme: {
    spacing: {
      '32': '32rem'
    }
  }
}

或者您可以尝试 tailwindCSS 的 JIT 功能：https://tailwindcss.com/docs/just-in-time-mode，您可以在其中实现：

<div class="m-[32rem]"></div>

,

您可以通过使用以下内容扩展当前配置来实现：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      spacing: {
        '128': '32rem',// following the standard of 128 / 4 = 32
      }
    }
  }
}

这样做的好处在于，它将保留您所有现有的价值观！
此处提供更多信息：https://tailwindcss.com/docs/customizing-spacing#extending-the-default-spacing-scale

---

否则，@wbsnail 提到 JIT 是个好主意，即使它应该只在极少数情况下使用。