Tailwindcss-module: [email protected] is installed but ^7.0.32 is expected

[othy54]

Version

@nuxtjs/tailwindcss: 4.0.0
nuxt: 2.15.3

Juste updated Nuxtjs to 2.15.3 and update Postcss but it makes this error

=> [email protected] is installed but ^7.0.32 is expected

even with npm install --save-dev @nuxtjs/tailwindcss postcss@latest it doesn't work

Don't know how to resolve it 😕

[akashvibhute]

I think it is coming from @nuxtjs/webpack. It has dependency on 7.0.32
https://github.com/nuxt/nuxt.js/blob/0a98866894f018019d26926f1846396c4be71c0d/packages/webpack/package.json#L33

[w3bdesign]

@othy54

Can you share your package.json content?

Also, can you try installing https://www.npmjs.com/package/@nuxt/postcss8 and see if that fixes the issue?

Add @nuxt/postcss8 to buildModules in nuxt.config:

// nuxt.config

export default {
  buildModules: [
    '@nuxt/postcss8'
  ]
}

[areindl]

Hi @w3bdesign,

I have a freshly installed Nuxt-Installation with Tailwind. Adding @nuxt/postcss8 did not help.

Here is the package json:

{
  "name": "mynuxt-spa",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
    "lint:style": "stylelint \"**/*.{vue,cs t:style",
    "test:e2e": "nightwatch"
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.12.5",
    "core-js": "^3.8.3",
    "nuxt": "^2.14.12"
  },
  "devDependencies": {
    "@nuxt/postcss8": "^1.1.3",
    "@nuxtjs/eslint-config": "^5.0.0",
    "@nuxtjs/eslint-module": "^3.0.2",
    "@nuxtjs/stylelint-module": "^4.0.0",
    "@nuxtjs/tailwindcss": "^4.0.1",
    "@tailwindcss/jit": "^0.1.2",
    "babel-eslint": "^10.1.0",
    "chromedriver": "^88.0.0",
    "eslint": "^7.18.0",
    "eslint-config-prettier": "^7.2.0",
    "eslint-plugin-nuxt": "^2.0.0",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-vue": "^7.5.0",
    "nightwatch": "^1.5.1",
    "postcss": "^8.2.8",
    "prettier": "^2.2.1",
    "stylelint": "^13.9.0",
    "stylelint-config-prettier": "^8.0.2",
    "stylelint-config-standard": "^20.0.0"
  }
}

[othy54]

Well I finally resolve it, just uninstall @nuxt/tailwindcss and reinstall it, your will still have the error [email protected] is installed but ^7.0.32 is expected but you have to ignore it for the moment, it still works

Thanks all !

[w3bdesign]

Hi @w3bdesign,

I have a freshly installed Nuxt-Installation with Tailwind. Adding @nuxt/postcss8 did not help.

Here is the package json:

{
  "name": "mynuxt-spa",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
    "lint:style": "stylelint \"**/*.{vue,cs t:style",
    "test:e2e": "nightwatch"
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.12.5",
    "core-js": "^3.8.3",
    "nuxt": "^2.14.12"
  },
  "devDependencies": {
    "@nuxt/postcss8": "^1.1.3",
    "@nuxtjs/eslint-config": "^5.0.0",
    "@nuxtjs/eslint-module": "^3.0.2",
    "@nuxtjs/stylelint-module": "^4.0.0",
    "@nuxtjs/tailwindcss": "^4.0.1",
    "@tailwindcss/jit": "^0.1.2",
    "babel-eslint": "^10.1.0",
    "chromedriver": "^88.0.0",
    "eslint": "^7.18.0",
    "eslint-config-prettier": "^7.2.0",
    "eslint-plugin-nuxt": "^2.0.0",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-vue": "^7.5.0",
    "nightwatch": "^1.5.1",
    "postcss": "^8.2.8",
    "prettier": "^2.2.1",
    "stylelint": "^13.9.0",
    "stylelint-config-prettier": "^8.0.2",
    "stylelint-config-standard": "^20.0.0"
  }
}

Just a protip that I learned yesterday, you can move all of your dependencies into devDependencies and if you deploy with Vercel it will still work.

It will reduce lambda size, so you don't get an error about the lambda being too big.

[Atinux]

Nothing to worry about, this is simply a warning that will soon disappear once all postcss dependencies will be upgraded to PostCSS8.