app.config "ui: primary" IGNORED?

[grester]

Description

I'm still quite new to Nuxt and I've tested in the online workbench I know this is working properly, however in my project ui's primary color is still green despite me changing it in app.config. I don't really understand where this could be overriden/ignored, I don't have it mentioned anywhere else so I'm guessing is a conflicting import. Nuxt Dev Tools confirm that is green, but even if I change it in the Dev Tools it doesn't change in the browser (which supposedly should). Browser console also complains a lot of "...css was not loaded because its MIME type, “text/javascript”, is not “text/css”." Re-running "npm run build --stub" and deleting ".nuxt/app.config.mjs" didn't change anything. Any tips to help debug what's happening?

• Operating System: Windows_NT
• Node Version: v20.17.0
• Nuxt Version: 3.13.2
• CLI Version: 3.14.0
• Nitro Version: 2.9.7
• Package Manager: npm@10.8.3

UI v2.18.6

css computed in browser

background-color: rgb(34, 197, 94);

inline:1946
Best Match .bg-primary-500
rgb(var(--color-primary-500) / var(--tw-bg-opacity))

tailwind.css:3
.bg-primary-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--color-primary-500) / var(--tw-bg-opacity));

nuxt.config.ts

export default defineNuxtConfig({
  future:{
    compatibilityVersion: 4,
  },
  compatibilityDate: '2024-04-03',  
  modules: ['@nuxt/ui',
    '@nuxt/icon',
    '@nuxt/image',
    '@nuxtjs/tailwindcss',
    '@nuxtjs/color-mode'
    ],
  devtools: { enabled: true },
  colorMode: {
    preference: 'color',
    storage: 'localStorage',
    storageKey: 'berndev-color-mode',
    dataValue: 'theme'
  },
  css: ['~/assets/css/tailwind.css'],
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },

app.config.ts

export default defineAppConfig({
    ui: {
      primary: 'rosewood',
      gray: 'neutral'
    }
  })

tailwind.config.ts

import type { Config } from 'tailwindcss'
//import defaultTheme from 'tailwindcss/defaultTheme'

export default {
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./app.vue",
    "./error.vue",
  ],
  theme: {
    extend: {
      colors: {
        rosewood: {
          50: '#fff0f2',
          100: '#ffdde1',
          200: '#ffc1c8',
          300: '#ff96a2',
          400: '#ff5a6d',
          500: '#ff2740',
          600: '#fb0724',
          700: '#d4011a',
          800: '#ae061a',
          900: '#900c1b',
          950: '#5e000b',
        },    
      },
    },
  },
  plugins: [],
  darkMode: ['class', '[data-theme="dark"]'],
} satisfies Config

tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

(dark styles no references of primary)

[benjamincanac]

You should not register the @nuxtjs/tailwindcss module as @nuxt/ui does it for you: https://ui.nuxt.com/getting-started/installation#modules

[grester]

Followed the guide again and did some general cleanup but to no avail. app.config.mjs still outputs wrong, pasting here but not sure if is of much use. Could it be a problem of Vite?

import { updateAppConfig } from '#app/config'
import { defuFn } from 'defu'

const inlineConfig = {
  "nuxt": {},
  "icon": {
    "provider": "server",
    "class": "",
    "aliases": {},
    "iconifyApiEndpoint": "https://api.iconify.design",
    "localApiEndpoint": "/api/_nuxt_icon",
    "fallbackToApi": true,
    "cssSelectorPrefix": "i-",
    "cssWherePseudo": true,
    "mode": "css",
    "attrs": {
      "aria-hidden": true
    },
    "collections": [
      (...)
  },
  "ui": {
    "primary": "green",
    "gray": "cool",
    "colors": [
      "red",
      "orange",
      "amber",
      "yellow",
      "lime",
      "green",
      "emerald",
      "teal",
      "cyan",
      "sky",
      "blue",
      "indigo",
      "violet",
      "purple",
      "fuchsia",
      "pink",
      "rose",
      "bkgc",
      "txtc",
      "rosewood",
      "primary"
    ],
    "strategy": "merge"
  }
}

// Vite - webpack is handled directly in #app/config
if (import.meta.hot) {
  import.meta.hot.accept((newModule) => {
    updateAppConfig(newModule.default)
  })
}

export default /*@__PURE__*/ defuFn(inlineConfig)

[benjamincanac]

Would you mind sharing a reproduction?

[grester]

Let me know if it was useful. https://youtu.be/A_as4EqFawc Also I forgot to show the default template but I'll post below.

<template>
    <div>
      <header class="bg-bkgc-2 shadow-md shadow-txtc-2 border-b-4">
        <nav class="container mx-auto p-4 flex justify-between">
          <ul class="flex gap-4">
            <li>
              <NuxtLink to="/" class="font-bold">                
                 <UButton icon="i-heroicons-magnifying-glass"/> Home 
              </NuxtLink>
            </li>
            <li>
              <NuxtLink to="/about">
                About
              </NuxtLink>
            </li>   
            <li>
              <NuxtLink to="/blog">
                Blog
              </NuxtLink>
            </li>
            <li>
              <NuxtLink to="/users">
                Users
              </NuxtLink>
            </li>
          </ul>
          <div class="flex items-center justify-end">
            <ColorModeBtn />
        </div>
        </nav>        
      </header>  
      <div class="body container mx-auto p-4">
        <slot />    
      </div>
      <footer class="bg-bkgc-2 border-t-4">
        <div class="container mx-auto p-4 flex justify-between ">          
          <p class="italic">Footer</p>
        </div>
      </footer>
    </div>    
</template>
<style scoped>
    .router-link-exact-active { @apply text-red-600 }
</style>

[benjamincanac]

Please provide a StackBlitz reproduction as mentioned in the Bug Report template.

[grester]

I've managed to reproduce it on StackBlitz so I really must be doing something wrong. https://stackblitz.com/edit/nuxt-ui-issue-2312?file=nuxt.config.ts

[benjamincanac]

Oh I see! Since you're using the future.compatibilityVersion: 4 option, you need to put your app.config.ts inside the app/ directory otherwise it won't be taken into account: https://nuxt.com/docs/getting-started/upgrade#new-directory-structure

[grester]

Truth be told I did not run the migration script as they suggested, and just did everything manually to get a better grip what changed, and I must have missed that detail. As it was a config.ts file, I just assumed it was supposed to be in root. I does make sense to be in app folder given the new philosophy of folder structure. Thank you very much! I knew it had to be something simple and obvious 😅