Tailwind 中多个容器中的单个渐变

【问题标题】：Single Gradient in Multiple Container In TailwindTailwind 中多个容器中的单个渐变
【发布时间】：2022-06-12 09:59:31
【问题描述】：

我正在使用带有 Tailwind 的 React
我需要将相同的渐变应用到导航栏和侧边栏
但是在两者上应用梯度会产生不同的流量。请给我解决方案！


 <navbar className="flex h-16 w-full bg-gradient-to-r from-gray-800 to-blue-800 justify-center"></navbar>

 <sidebar className='flex absolute h-full w-1/4 bg-gradient-to-r from-gray-800 to-blue-800'></sidebar>

【问题讨论】：

可能让侧边栏中的渐变与导航栏的长度相同（100vw 或 100%），然后将该渐变剪裁到侧边的大小，以便只显示您需要的渐变部分查看。可能您需要将其定位为绝对不是很方便，但不确定，可能值得尝试

标签： reactjs tailwind-css

【解决方案1】：

如果您可以确保您的导航栏是 100vw，那么您可以在侧边栏添加伪元素并为其添加渐变背景。如果有垂直滚动条，它可能会稍微改变渐变。您可以对导航栏应用相同的技巧来避免这种行为，但overflow:hidden 可能会影响一些溢出元素，例如菜单下拉菜单。在这种情况下，您可以嵌套另一个全宽、全高、absolute div，然后在导航栏中添加伪元素。

<div className="flex h-16 w-full justify-center bg-gradient-to-r from-gray-800 to-blue-800 overflow-y-scroll"></div>

<div className="relative flex h-full w-1/4 overflow-hidden from-gray-800 to-blue-800 before:h-full before:absolute before:w-screen before:bg-gradient-to-r before:content-[''] before:-z-10"></div>

代码可以找到here

【讨论】：