To add a gradient background to a div we can use the following in tailwindcss:
<div className='bg-white bg-gradient-to-b from-black'will add a gradient from black in the top to white in the bottom.
The question is how do we add this background to the entire page, without the content spilling over the div wit the background? At the top level of your app, add the following divs on the same level as the content:
<div className="fixed left-0 top-0 -z-10 h-full w-full">
<div className="absolute -z-10 h-full w-full bg-primary bg-gradient-to-t from-black"></div>
</div>The outer div is positioned in the top left of the browser window thanks to fixed left-0 right-0, and has a height and width as big as the window. Then the inner div