根据 Tailwind CSS 中其他主题间距计算得出的主题间距

Question

我的页面布局（带有相对页脚的固定导航栏，其间有不断增长的内容部分）要求我根据其他元素的高度进行一些高度计算。

为了更清楚地了解我的项目中发生的情况，我想对这些元素使用主题间距。

即我有导航栏本身、一个充当导航栏底部边框的波浪 SVG 和一个页脚。

spacing: {
    nav: '6rem',
    wave: '4rem',
    footer: '6rem'
}

如果我可以做类似

min-h-[calc(100dvh-nav-wave-footer]

的事情来设置内容包装器的高度，或者设置

mt-[calc(nav+wave)]

。

现在我看到了两种实现这一目标的方法，但它们似乎都有点不确定。 我可以在主题间距部分添加一个

navwave

，等于“神奇”数字

10rem

。显然，当您尝试更新这些元素之一的高度却忘记更改

navwave

元素时，这会很烦人。

或者，我可以这样做：

mt-[calc(theme('spacing.nav')+theme('spacing.wave'))]

，这是相当拗口的，不断增长的线条。它比我通常使用的任何其他指令都要长得多，因此使用起来相当分散注意力。

因此，我不想直接在 HTML 中进行此类计算，而是想在主题配置中添加自定义

navwave

间距来自动执行该计算。

spacing: {
   nav: '6rem',
   wave: '4rem',
   navwave: "calc(theme('spacing.nav')+theme('spacing.wave'))"
}

...就在那时我偶然发现了我写这篇文章的问题。由于某种原因，如果我这样做，则只有一个主题指令会被转换，并且它会导致浏览器说它是无效的属性。请参阅这些屏幕截图以了解更多信息：

我做错了什么吗？或者我正在做的事情还不受 Tailwind 支持吗？

Answer 1

您可以将间距作为配置中的变量：

const mySpacings = {
   nav: '6rem',
   wave: '4rem',
};

// …

spacing: 
   ...mySpacings,
   navwave: `calc(${mySpacings.nav} + ${mySpacings.wave})`,
}

这会停止幻数，因为我们现在正在使用命名引用。