Custom colors are not working as expected, despite the CSS-first declaration

I just launched a new Nuxt.js project (not using Nuxt UI) and added TailwindCSS to it following this guide:

• https://tailwindcss.com/docs/installation/framework-guides/nuxt

That said tailwind works great, however I'm running into a issue adding custom colors.

I've tried adding them both in the tailwind config file and in the CSS and neither work.

Also ive tried:

• clearing the browser cache
• deleting the nuxt cache
• restarting the dev server

Here's my config files:

tailwind.config.js

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  // Very important: ensure all files containing Tailwind classes are listed here
  content: [
    './components/**/*.{vue,js,ts}',
    './layouts/**/*.{vue,js,ts}',
    './pages/**/*.{vue,js,ts}',
    './plugins/**/*.{js,ts}',
    './nuxt.config.{js,ts}', // Also necessary for some dynamic classes
    './app.vue',             // Important for Nuxt 3's root app file
  ],
  theme: {
    extend: {
      colors: {
        primary: '#10243f',   // Your primary blue
        secondary: '#1867a0', // Your secondary blue
      },
    },
  },
  plugins: [],
}

nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config

import tailwindcss from "@tailwindcss/vite";

export default defineNuxtConfig({
  css: [
    '~/assets/css/tailwind.css' // Add this line
  ],
  compatibilityDate: '2025-05-15',
  devtools: { enabled: true },
  modules: ['@nuxt/image', '@nuxt/fonts', '@nuxt/icon'],
  vite: {
    plugins: [
      tailwindcss(),
    ],
  },
})

./assets/css/tailwind.css

@import "tailwindcss";

@theme static {
    --color-primary: #10243f;
    --color-secondary: #1867a0;
}

Sample usage:

<button type="submit" class="bg-primary hover:bg-indigo-700 text-white font-bold py-3 px-6 rounded-lg shadow-lg transition duration-300">
  Send Message
</button>

If anyone could solve this issue you'd be a life saver!

Ahh I figured it out... my tailwindcss dependency itself got screwed up, depsite it having been working, once I removed the line from package.json, deleted the lockfile, removed node_modules and ran npm install tailwindcss again, its now working just fine. I do appreciate you trying to help and the very detailed responses!