installing nuxtjs/tailwindcss on nuxt 3 rc6 introduces warnings for nuxt/postcss8

[AliQ80]

Version

@nuxtjs/tailwindcss: 5.3.0 nuxt: 3.0.0-rc.6

Steps to reproduce

install nuxt 3

npx nuxi init nuxt-app yarn install yarn dev -o

at this step I get the warning => install nuxt/tailwind module

yarn add -D @nuxtjs/tailwind

What is Expected?

no warning messages

What is actually happening?

got these warning messages

warning "@nuxtjs/tailwindcss > @nuxt/postcss8 > [email protected]" has unmet peer dependency "webpack@^4.27.0 || ^5.0.0". warning "@nuxtjs/tailwindcss > @nuxt/postcss8 > [email protected]" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".

Thoughts

to my understanding @nuxt/postcss8 only supports nuxt 2, and nuxt 3 uses vite by default so that my be the issue but I'm not sure

is there a fix for this warning

thank you

[Atinux]

I think we can remove @nuxt/postcss8 from dependencies and ask the user to install it if using Nuxt 2, WDYT @pi0 ?

[kotx]

I also still have this issue. Is it possible for this to be fixed @pi0?

[Atinux]

Could you please upgrade to latest Nuxt 3 please?

[kotx]

That seems to have fixed the issue, thanks

[mschoeffmann]

pnpm still complains about missing webpack:

node version v16.19.0 pnpm version 7.27.0

"@nuxtjs/tailwindcss": "^6.6.5",
"nuxt": "^3.3.3",
"vite": "^4.2.1",

└─┬ @nuxtjs/tailwindcss 6.6.5
  └─┬ @nuxt/postcss8 1.1.3
    ├─┬ css-loader 5.2.7
    │ └── ✕ missing peer webpack@"^4.27.0 || ^5.0.0"
    └─┬ postcss-loader 4.3.0
      └── ✕ missing peer webpack@"^4.0.0 || ^5.0.0"
Peer dependencies that should be installed:
  webpack@">=4.27.0 <5.0.0 || >=5.0.0 <6.0.0"  

[ineshbose]

@mschoeffmann if you can give a reproduction, we can investigate!

[mschoeffmann]

@ineshbose you can save this package.json

{
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "lint:js": "eslint --ext \".js,.ts,.vue\" --ignore-path .gitignore .",
    "lint:prettier": "prettier --check .",
    "lint": "pnpm lint:js && pnpm lint:prettier",
    "lintfix": "prettier --write --list-different . && pnpm lint:js --fix"
  },
  "devDependencies": {
    "@babel/core": "^7.21.4",
    "@babel/eslint-parser": "^7.21.3",
    "@nuxt/content": "^2.5.2",
    "@nuxt/eslint-config": "^0.1.1",
    "@nuxtjs/eslint-config": "^12.0.0",
    "@nuxtjs/eslint-config-typescript": "^12.0.0",
    "@nuxtjs/plausible": "^0.2.0",
    "@nuxtjs/tailwindcss": "^6.6.5",
    "@typescript-eslint/parser": "^5.57.1",
    "@vite-pwa/nuxt": "^0.0.7",
    "@vueuse/components": "^9.13.0",
    "@vueuse/core": "^9.13.0",
    "@vueuse/nuxt": "^9.13.0",
    "consola": "^2.15.3",
    "eslint": "^8.37.0",
    "eslint-config-prettier": "^8.8.0",
    "eslint-plugin-nuxt": "^4.0.0",
    "eslint-plugin-prettier": "^4.2.1",
    "floating-vue": "2.0.0-beta.20",
    "fuse.js": "^6.6.2",
    "html-metadata-parser": "^2.0.4",
    "millify": "^6.1.0",
    "nuxt": "^3.3.3",
    "prettier": "^2.8.7",
    "sass": "^1.60.0",
    "typescript": "^5.0.3",
    "vite": "^4.2.1",
    "vue": "^3.2.47",
    "vue3-lazy-hydration": "^1.2.1",
    "yaml": "^2.2.1"
  }
}

and then install it with pnpm install

result:

 WARN  Issues with peer dependencies found
.
└─┬ @nuxtjs/tailwindcss 6.6.5
  └─┬ @nuxt/postcss8 1.1.3
    ├─┬ css-loader 5.2.7
    │ └── ✕ missing peer webpack@"^4.27.0 || ^5.0.0"
    └─┬ postcss-loader 4.3.0
      └── ✕ missing peer webpack@"^4.0.0 || ^5.0.0"
Peer dependencies that should be installed:
  webpack@">=4.27.0 <5.0.0 || >=5.0.0 <6.0.0"  

[ineshbose]

Thanks, I can confirm this issue. (link to @nuxt/postcss8 - https://github.com/nuxt/postcss8, https://www.npmjs.com/package/@nuxt/postcss8)

[NarHakobyan]

You closed this without fixing :/

[ineshbose]

Thanks. Will be removing @nuxt/postcss8 from dependencies.