I’ve a Next JS project using tailwind css and shadcn/ui.

I’ve set up the theme provider using the docs and everything is working as expected, apart from…

The border colour is not changing to it’s respective “dark” class colour. It seems to be stuck on light colour, with everything else working such as; background, button etc. What am I doing wrong here?

globals.css

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

body {
  font-family: Arial, Helvetica, sans-serif;
}

@layer base {
  :root {
    --border: 0 0% 89.8%;
    etc...
  }

  .dark {
    --border: 0 0% 14.9%;
    etc...
  }
}

component

<header className="sticky backdrop-blur-md top-0 flex w-full border-b">

theme provider

"use client";

import { ThemeProvider as NextThemesProvider } from "next-themes";

export function ThemeProvider({ children, ...props }) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
}