Linear gradient background issue not functioning properly when transitioning between screens using Next.js

Question

Linear gradient background issue not functioning properly when transitioning between screens using Next.js

Encountered an unusual issue with Next.js. My background linear gradients are not loading properly when navigating between pages.

The link in question is:

import Link from 'next/link'

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

In my code, I have a div with the following style:

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

Strangely, when clicking the link, the linear gradient fails to load and the background appears as plain white. However, upon refreshing the page, the linear gradient works as intended.

*Additionally, I am using Tailwind CSS. When I apply the following class:

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

instead of directly styling the background property, the linear gradient displays correctly while navigating with the link.

Any assistance on how to make the style background property work would be highly appreciated!

css reactjs next.js tailwind-css

Answer 1

Answer №1

To achieve this effect, you can utilize the tailwind @layer utility as demonstrated below.

Firstly, navigate to globals.css and include the following code:

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


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

You can then apply it like so:

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

Answer 2

To achieve this effect, you can utilize the tailwind @layer utility as demonstrated below.

Firstly, navigate to globals.css and include the following code:

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


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

You can then apply it like so:

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

Linear gradient background issue not functioning properly when transitioning between screens using Next.js

Answer №1

Similar questions

Adjust the size and orientation of an image according to the dimensions of the window and the image

A guide on automatically aligning coordinates and adjusting the zoom level for multiple markers in react-google-maps/api

Issue observed: React Map layer is not loading until mouseEnter event happens

Developing a system mode called "night mode"

I'm looking to customize the background color and font size for an accordion in Bootstrap 4 with Vue.js. Can anyone provide guidance

I am experiencing a CSS display issue on the mobile version of my map leaflet where only the header and footer are visible

Using custom woff2 fonts in Android applications created with Visual Studio Community and Cordova seems to be causing compatibility issues

Can we tap into the algorithm of curveMonotoneX in d3-shape?

What is the best way to represent a state with two possible fields in React using TypeScript?

What is the process for setting up a subrouter using React Router v6?

Utilizing Mantine dropzone in conjunction with React Hook Form within a Javascript environment

An error occurred when attempting to set state within a nested fetch

Display an element that has been tucked away, and then bring it to life

What is the best way to modify and execute js and css (less) files dynamically using ajax and jQuery?

The browser is only showing particular changes made to the CSS file

Error: ReferenceError: window is not defined in webpack and ReactJS environments

How to properly align TableHeader and TableBody contents in a Material-UI table

Reducer in Redux not receiving Action from React

Tips for reactivating getStaticProps following an update:

The function cannot be called on params.getValue()