enti Posts - Answer Overflow

enti

•Created by enti on 4/28/2025 in #❓・help

Turning off dark mode in Nuxt 3.16 with Nuxt 4 compatibility mode + Nuxt ui 3

I'm trying to force the light mode to Nuxt UI 3 in a Nuxt 4 compatible project (3.16). I put this in my nuxt.config.ts:

colorMode: {
  preference: 'light',
},

colorMode: {
  preference: 'light',
},

But it doesn't work. All my Nuxt ui 3 elements stay in dark mode (system choice). How cn I force the light mode from a Nuxt 4 compatible set up?

13 replies

NNuxt

•Created by enti on 4/23/2025 in #❓・help

Installing tailwindcss on Nuxt4

Context : fresh Nuxt 3.16 install with Nuxt4 compatibility I installed tailwindcss with npx nuxi module add tailwindcss This is my nuxt.config.js:

export default defineNuxtConfig({
  devtools: { enabled: true },
  css: ['@/assets/css/main.css'],

  future: {
    compatibilityVersion: 4,
  },

  compatibilityDate: '2025-04-11',
  modules: ['@nuxt/image', '@nuxtjs/tailwindcss'],

  tailwindcss: {
    exposeConfig: true,
    viewer: true,
  },
})

export default defineNuxtConfig({
  devtools: { enabled: true },
  css: ['@/assets/css/main.css'],

  future: {
    compatibilityVersion: 4,
  },

  compatibilityDate: '2025-04-11',
  modules: ['@nuxt/image', '@nuxtjs/tailwindcss'],

  tailwindcss: {
    exposeConfig: true,
    viewer: true,
  },
})

I also installed postcss with pnpm install -D @tailwindcss/postcss and this postcss.config.js file in the project root directory:

module.exports = {
  plugins: {
    '@tailwindcss/postcss': {},
    'autoprefixer': {},
  },
}

module.exports = {
  plugins: {
    '@tailwindcss/postcss': {},
    'autoprefixer': {},
  },
}

I still get this error when running:

[nuxi]  ERROR  Cannot start nuxt:  It looks like you're trying to use tailwindcss directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install @tailwindcss/postcss and update your PostCSS configuration.

I'm going crazy here...

31 replies

NNuxt

•Created by enti on 4/22/2025 in #❓・help

Nuxt4 and global css import

Context : fresh Nuxt 3.16 install with Nuxt 4 compatibility When I add a global css import in my nuxt.config.ts file :

export default defineNuxtConfig({
  css: ['~/assets/css/main.css'],
  // yes, file exists from the app/ directory
  // i.e. app/assets/css/main.css from project's root (nuxt4 structure)

  future: {
    compatibilityVersion: 4,
  },

  compatibilityDate: '2025-04-11',
})

export default defineNuxtConfig({
  css: ['~/assets/css/main.css'],
  // yes, file exists from the app/ directory
  // i.e. app/assets/css/main.css from project's root (nuxt4 structure)

  future: {
    compatibilityVersion: 4,
  },

  compatibilityDate: '2025-04-11',
})

I end up with an error 500: Cannot find module '~/assets/css/main.css' imported from 'virtual:nuxt:C:\Code\project\.nuxt\css.mjs' Is there a new strategy for global CSS imports with Nuxt4? I didn't find any info about it

15 replies

Gaming

Programming