How to set custom custom primary and gray colors in Nuxt TailwindCSS module?

I'm trying to set a custom primary and gray colors for my site that uses Nuxt with the TailwindCSS module. The documentation says to make your own tailwind.config.ts file, however even though I have a different primary color set there, I still end up getting the default green primary color.

Here's my tailwind.config.ts:

import type { Config } from 'tailwindcss';
import defaultTheme from 'tailwindcss/defaultTheme';
import tailwindTypography from '@tailwindcss/typography';

export const screens = {
  xs: '320px',
  xsm: '400px',
  sm: '640px',
  md: '768px',
  lg: '1024px',
  xl: '1280px',
  '2xl': '1536px',
};
export type ScreenType = keyof typeof screens | 'all';

export default <Partial<Config>>{
  darkMode: 'class',
  theme: {
    screens,
    extend: {
      colors: {
        white: '#ffffff',
        black: `#000000`,
        primary: defaultTheme.colors.yellow,
      },
      height: {
        '128': '32rem',
        '192': '48rem',
      },
      letterSpacing: {
        wide: '0.1em',
        wider: '0.25em',
        widest: '0.5em',
      },
      fontSize: {
        '9xl': '9rem',
        '10xl': '10rem',
      },
    },
  },
  plugins: [tailwindTypography],
};

And here's the relevant parts of my nuxt.config.ts:

export default defineNuxtConfig({
  ...
  tailwindcss: {
    configPath: '@/tailwind.config.ts',
  },
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
});

Solution

I was using NuxtLabsUI as my UI framework, which has it's own theming built ontop of TailwindCSS.

I had to set add some settings to app.config.ts to set custom colors.

Here are my final working configs:

// app.config.ts
export default defineAppConfig({
  ui: {
    primary: 'customPrimary',
    gray: 'customGray',
  },
});

// tailwind.config.ts
export default {
  theme: {
    extend: {
      colors: {
        customPrimary: {
          50: '#F8F4EB',
          100: '#F3EBDB',
          200: '#E9DABD',
          300: '#DFC99E',
          400: '#D1B274',
          500: '#C39A4A',
          600: '#A07C35',
          700: '#765B27',
          800: '#4C3A19',
          900: '#211A0B',
          950: '#0C0A04',
        },
        customGray: {
          50: '#FFFFFF',
          100: '#F5F7F9',
          200: '#DCE2E9',
          300: '#C3CED9',
          400: '#AABAC9',
          500: '#91A6B9',
          600: '#7891A9',
          700: '#617D98',
          800: '#51697F',
          900: '#415466',
          950: '#364655',
        },
      }
    }
  }
}

I also used https://www.tailwindshades.com/ to automatically generate my gray and primary palettes based off of some base colors.