title: NextJS React Tailwind CSS Navbar Active Styling
body: <p>It's been a while since I've fiddled with React and just started learning Next.Js. I'm curious how I would change the background of my Navbar in Tailwind CSS based on the current boolean value &quot;current&quot; true/false on which page the user is on with Next Router.</p>
  <p>It seems pretty simple, but it's gotten a little complicated for me to understand. The code is originally from one of the Tailwind CSS examples and there's an array of links with href and the current value with true/false which populates the background when set to true. When you change any of the &quot;true,&quot; the background gradient that I want appears, but I have been trying to get it to update on the corresponding page link that's visited.</p>
  <p>If anyone can guide me in the correct direction, I'd be very grateful.</p>
  <p>Here's my header code:</p>
  <p><a href="https://wtools.io/paste-code/b8qW" rel="nofollow noreferrer">/components/header.js</a></p>
  <p>I've also made a layout component component and wrapped it in my _app.js.</p>
  <p>Here's the rest of the code for other components:</p>
  <p><a href="https://wtools.io/paste-code/b8qY" rel="nofollow noreferrer">_app.js</a></p>
  <p><a href="https://wtools.io/paste-code/b8qZ" rel="nofollow noreferrer">/components/layout/main.js</a></p>
  <p>My Navbar currently looks like this:
  <a href="https://i.stack.imgur.com/fu2U8.png" rel="nofollow noreferrer">Navbar Image</a></p>
  <p>If you need my other code, I am happy to provide. </p>