It looks like TailwindCSS v4's @theme isn't being recognized properly in your setup. Here are some possible reasons and fixes:

Possible Issues & Fixes

1. Ensure You Are Using TailwindCSS v4.0+

Run this command to check your version:

npx tailwindcss -v

If it’s not v4, update it:

npm install tailwindcss@latest

2. Use @tailwind Theme Instead of @theme

Tailwind v4 replaces @theme with @tailwind theme. Instead of:

@theme {
  
--color-mint-500: oklch(0.72 0.11 178);

}

Try:

@tailwind theme;

Then, inside tailwind.config.js:

export default {
  theme: {
    extend: {
      colors: {
        mint: {
          500: 'oklch(0.72 0.11 178)',
        },
      },
    },
  },
  plugins: [],
};

After restarting the dev server (npm run dev), you should be able to use:

<div class="bg-mint-500 text-white p-4">Mint Background</div>

3. Enable Tailwind's JIT Mode

Ensure your tailwind.config.js includes:

export default {
  mode: 'jit',
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
};

JIT mode is required to generate utility classes dynamically.

4. Ensure Vite is Processing Tailwind Properly

Since you're using Vite, your vite.config.js should look like this:

import { defineConfig } from 'vite';
import tailwindcss from 'tailwindcss';

export default defineConfig({
  css: {
    postcss: {
      plugins: [tailwindcss()],
    },
  },
});

--> Conclusion

Use @tailwind theme instead of @theme.

Define colors inside tailwind.config.js.

Restart the dev server after changes (npm run dev).

Check out Pisqre