线性渐变背景属性在使用next js导航屏幕时不起作用

Question

我在next js中遇到了一些奇怪的事情。当我切换页面时，我的背景线性渐变没有加载。

链接是

import Link from 'next/link'
<Link href='/register'>
<a> click me </a>
</Link>

还有一个div

style={{
background: 'linear-gradient(153.68deg, #17191D 0%, #0C152C 45.82%);',
}}

当我点击链接时，线性渐变没有加载，背景是纯白色。当我刷新页面的线性梯度加载，它的工作。

*还有:我在用顺风。如果我加上

className='bg-gradient-to-r from-cyan-500 to-blue-500'

到我的div，而不是使用style background属性，我可以看到一个线性梯度导航时的链接。

你的任何帮助都是非常感激的!我希望能够使用style background属性。

Answer 1

您可以像下面这样使用tailwind @layer utility。

1. 进入global。css并添加

   @tailwind base;
   @tailwind components;
   @tailwind utilities;
   
   @layer{
   .backy  {
   background-image: linear-gradient(153.68deg, #17191D 0%, #0C152C
   45.82%);
   }
   }
   

然后像这样使用

<div class="h-screen w-screen p-10 text-white backy" >Hello</div>