Adding property 'css:[]' in Nuxt 3 resulting in Typescript error

Question

I'm using Nuxt3/Typescript/CompositionAPI.. Why does my nuxt.config.ts keep giving me errors when I want to use for example the 'css:'? Right now this is my nuxt.config.ts:

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  css: [
    '~/assets/css/global.css',
  ],
  modules: [
    '@nuxtjs/tailwindcss',
    '@nuxtjs/google-fonts',
    '@formkit/nuxt',
    '@nuxtjs/eslint-module',
    // Pinia
    // i18n
  ],
  tailwindcss: {
    cssPath: '~/assets/css/tailwind.css',
    configPath: 'tailwind.config',
  },
  googleFonts: {
    families: {
      'Plus+Jakarta+Sans': true,
    },
  },
});

Only the css:[] is giving the error:

TS2345: Argument of type '{ app: {}; modules: string[]; tailwindcss: { cssPath: string; configPath: string; }; googleFonts: { families: { 'Plus+Jakarta+Sans': true; }; }; }' is not assignable to parameter of type 'NuxtConfig'. Object literal may only specify known properties, and 'app' does not exist in type 'NuxtConfig'.

This is my package.json:

   "devDependencies": {
    "@nuxtjs/eslint-module": "^4.0.2",
    "@nuxtjs/google-fonts": "^3.0.0",
    "@nuxtjs/tailwindcss": "^6.6.5",
    "eslint": "^8.37.0",
    "eslint-plugin-tailwindcss": "^3.10.3",
    "nuxt": "^3.3.3"
  },
  "dependencies": {
    "@formkit/addons": "^0.16.4",
    "@formkit/nuxt": "^0.16.4",
    "@formkit/themes": "^0.16.4",
    "@formkit/vue": "^0.16.4",
    "@nuxtjs/eslint-config-typescript": "^12.0.0"
  }

Good to mention, this is working so no errors on the localhost. But its just returning the error in my IDE when I hover over it.

The docs: https://nuxt.com/docs/api/configuration/nuxt-config#css. I am kinda new to setting up new Nuxt projects. Please, let me know if you need anything else.

Thanks

Antiphlogistic

try npx nuxi prepare to generate types – Vorticella

Didn't solve the problem unfortunately.. Output: Nuxi 3.3.3 09:16:41 ℹ Using Tailwind CSS from ~/assets/css/tailwind.css nuxt:tailwindcss 09:16:42 ✔ Types generated in .nuxt – Antiphlogistic

I think the reason is that Nuxt is not aware of "tailwindcss" or "googleFonts" as part of the config. See config options: nuxt.com/docs/api/configuration/nuxt-config Maybe there's a way to tell "defineNuxtConfig" that there's extra properties. But something that should work is to move the tailwind specific infos into "tailwind.config.js", see: tailwindcss.nuxtjs.org/tailwind/config – Codding

As I mentioned only the css:[] is giving the error.. First the "tailwindcss" and "googleFonts" gave the error too but after I ran npm i for both packages and restarted the server, the error disappeared for them. So right now only the css:[] is giving the error. Or am I using the wrong way to import a css file? Because this is an option too I think: nuxt.com/docs/api/configuration/nuxt-config#head – Antiphlogistic

Would you be able to repro the issue in codesandbox or similar? – Topazolite

Don't think I can. Maybe my package.json could be usefull? Edited my answer.. – Antiphlogistic

Answer 1

Try installing typescript as dev dependency, fixed the issue on my IDE

Mcwilliams

That was it, using [email protected] now – Antiphlogistic

It's also working for Typescript ^5, thanks for the suggestion! – Bracy

ChatGPT, please pay attention to this one lol – Dreg

Answer 2

I had a similar issue while using VS code, and fixed the problem by changing the typescript version to the Workspace version.

Mauve

That's what I was looking for....finally fixed after hours – Barmecidal

Answer 3

None of the other answers worked for me on Nuxt 3.8.0. Instead, after adding my config, I needed to run nuxt dev. This generated the necessary types. (I assume nuxt build would do the same.)

Robinrobina