Is it possible to override Tailwind CSS theme variables per route or component?

[NafisMahmudAyon]

Hi Tailwind CSS community 👋

I'm working on a Next.js App Router project and trying to achieve per-route or per-component theme overrides using CSS custom properties.

📁 File Structure:

app/globals.css
In this global file, I’ve defined my primary color palette like this:

@theme {
  --color-primary-50: #edf6f7;
  --color-primary-100: #cbe2e2;
  --color-primary-200: #a9cdcf;
  --color-primary-300: #87b8bc;
  --color-primary-400: #65a3a9;
  --color-primary-500: #438e96;
  --color-primary-600: #38757a;
  --color-primary-700: #2c5c60;
  --color-primary-800: #204346;
  --color-primary-900: #142a2c;
  --color-primary-950: #081112;
}

Now, I want to override these colors on a specific route or for a specific component.

🧩 Example Component:

component/AnyComponent.tsx

import "./style.css";

export const Component = () => {
  return <div className="text-primary-500">Custom Theme</div>;
};

component/style.css

@theme {
  --color-primary-50: #f8f6fc;
  --color-primary-100: #f2edfa;
  --color-primary-200: #e6def6;
  --color-primary-300: #d2c4ee;
  --color-primary-400: #bba3e2;
  --color-primary-500: #a37dd5;
  --color-primary-600: #9360c7;
  --color-primary-700: #824eb3;
  --color-primary-800: #6d4196;
  --color-primary-900: #5b367c;
  --color-primary-950: #42275f;
}

❓ The Question:

Can I override the Tailwind CSS theme colors like this on a per-component or per-route basis?
If not, what would be the best practice or workaround to achieve route-specific theming with Tailwind?

Any suggestions or examples would be greatly appreciated! 🙏

Thanks in advance!