TailwindCSS:使用ref使用任意值计算宽度

Question

我有一个div，它是绝对的，应该占据页面的整个宽度，直到md断点。div从md断点向上的宽度也应该是页面的全宽度减去左侧边栏导航菜单的宽度。

我的问题是，由于我在Tailwind类中使用ref而不是硬编码值，JIT编译器没有应用md:w-[calc(100%-${sidebarRef.current.clientWidth}px)]。

实现这一点的正确方法是什么？

<div
className={`absolute top-0 right-0 w-full h-full md:w-[calc(100%-${sidebarRef.current.clientWidth}px)]`}>
// Content
</div>

Answer 1

您可以计算类装饰之外的值。

render() {
let divWidth = this.myRef.current ? this.sideBarRef.current.clientWidth : 0;
return (
<div
className={`absolute top-0 right-0 w-full h-full md:w-[calc(100%-${divWidth}px)]`}>
</div>
)
}
}

Answer 2

Tailwind不处理动态类。一种解决方案可能是在类列表中使用CSS变量，然后使用JS设置值。类似于：

render() {
return (
<style>
:root {
--content-width: calc({`100%-${sidebarRef.current.clientWidth}px`});
}
</style>
<div class="absolute top-0 right-0 w-full h-full md:w-[var(--content-width)] bg-red-50">
Content
</div>
)
}

工作示例(纯HTML(：https://play.tailwindcss.com/xqiep4ObPt-通过移动分区来调整大小。