CODEWITHSUNDEEP
cssreactjsnext.jstailwind-css
Holland Pleskac
Holland Pleskac

Reputation: 83

linear gradient background property not working when navigating screens with next js

I ran into something weird with next js. My background linear gradients are not loading when I switch pages.

My link is

import Link from 'next/link'

<Link href='/register'>
   <a> click me </a>
</Link>

and I have a div with

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

When I click the link the linear gradient is not loading and the background is plain white. When I refresh the page the linear gradient loads and it works.

*Also : I'm using tailwind. If I add

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

to my div instead of using the style background property I can see a linear gradient when navigating with the link.

Any help your be greatly appreciated! I want to be able to use the style background property.

Upvotes: 1

Views: 1300

Answers (1)

MagnusEffect
MagnusEffect

Reputation: 3915

You can use tailwind @layer utility for this like below.

  1. Just go to globals.css and add this

     @tailwind base;
 @tailwind components;
 @tailwind utilities;


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

And then use it like this

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

Upvotes: 3

Related Questions