Tailwind Configuration Key in `nuxt.config.ts` not Being Applied

[maclong9]

Environment

---

• Operating System: Darwin
• Node Version: v20.15.1
• Nuxt Version: 3.12.4
• CLI Version: 3.12.0
• Nitro Version: -
• Package Manager: pnpm@9.6.0
• Builder: -
• User Config: compatibilityDate, future, devtools, modules, eslint, tailwindcss, studio
• Runtime Modules: @nuxt/eslint@0.3.13, @nuxt/test-utils@3.13.1, @nuxt/fonts@0.7.1, @nuxt/image@1.7.0, @nuxt/ui@2.18.0, @nuxt/content@2.13.2, @nuxthub/core@0.7.1, @nuxthq/studio@2.0.3

• Build Modules: -

Reproduction

No response

Describe the bug

I have the following nuxt.config.ts:

export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
  future: {
    compatibilityVersion: 4,
  },
  devtools: { enabled: true },
  modules: [
    '@nuxt/eslint',
    '@nuxt/test-utils',
    '@nuxt/fonts',
    '@nuxt/image',
    '@nuxt/ui',
    '@nuxt/content',
    '@nuxthub/core',
    '@nuxthq/studio',
  ],
  eslint: {
    config: {
      stylistic: true,
    },
  },
  tailwindcss: {
    editorSupport: true,
    config: {
      extends: {
        theme: {
          colors: {
            brand: {
              50: '#edfcff',
              100: '#d6f7ff',
              200: '#b5f3ff',
              300: '#83eeff',
              400: '#48e1ff',
              500: '#1ec7ff',
              600: '#06acff',
              700: '#0099ff',
              800: '#0874c5',
              900: '#0d629b',
              950: '#0e3b5d',
            },
          },
        },
      },
    },
  },
  studio: {
    enabled: true,
  },
})

Everything else seems to be working fine but the extension of the tailwind config, there is no bg-brand-500 for example or anything similar in the tailwind viewer or usable in the application.

Additional context

No response

Logs

No response

[ineshbose]

Sorry, are you sure you have the right configuration?

There seems to be a mistake in the properties; you want to put the colors in theme.extend (not extends.theme):

export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
  future: {
    compatibilityVersion: 4,
  },
  devtools: { enabled: true },
  modules: [
    '@nuxt/eslint',
    '@nuxt/test-utils',
    '@nuxt/fonts',
    '@nuxt/image',
    '@nuxt/ui',
    '@nuxt/content',
    '@nuxthub/core',
    '@nuxthq/studio',
  ],
  eslint: {
    config: {
      stylistic: true,
    },
  },
  tailwindcss: {
    editorSupport: true,
    config: {
-      extends: {
+      theme: {
-        theme: {
+        extend: {
          colors: {
            brand: {
              50: '#edfcff',
              100: '#d6f7ff',
              200: '#b5f3ff',
              300: '#83eeff',
              400: '#48e1ff',
              500: '#1ec7ff',
              600: '#06acff',
              700: '#0099ff',
              800: '#0874c5',
              900: '#0d629b',
              950: '#0e3b5d',
            },
          },
        },
      },
    },
  },
  studio: {
    enabled: true,
  },
})

[maclong9]

Thank you