Don't work in v5

[DouglasCalora]

Version

@nuxtjs/tailwindcss: v5.0.2 nuxt: 2.15.8

What is Expected?

What is actually happening?

I'm trying to use v5 of @nuxtjs/tailwindcss because it uses tailwind v3, but it does not working

 FATAL  Cannot find package '@nuxt/kit' imported from /home/douglas/Documents/pessoal/freela/weclix-institucional/node_modules/@nuxtjs/tailwindcss/dist/module.mjs

  at new NodeError (internal/errors.js:322:7)
  at packageResolve (internal/modules/esm/resolve.js:687:9)
  at moduleResolve (internal/modules/esm/resolve.js:728:18)
  at Loader.defaultResolve [as _resolve] (internal/modules/esm/resolve.js:842:11)
  at Loader.resolve (internal/modules/esm/loader.js:89:40)
  at Loader.getModuleJob (internal/modules/esm/loader.js:242:28)
  at ModuleWrap.<anonymous> (internal/modules/esm/module_job.js:76:40)
  at link (internal/modules/esm/module_job.js:75:36)


   ╭──────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
   │                                                                                                                  │
   │   ✖ Nuxt Fatal Error                                                                                             │
   │                                                                                                                  │
   │   Error [ERR_MODULE_NOT_FOUND]: Cannot find package '@nuxt/kit' imported from                                    │
   │   /home/douglas/Documents/pessoal/freela/weclix-institucional/node_modules/@nuxtjs/tailwindcss/dist/module.mjs   │
   │                                                                                                                  │
   ╰──────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: `nuxt`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/douglas/.npm/_logs/2022-03-18T02_46_06_559Z-debug.log

I've tried to remove package-lock, node_modules, nothing works! I installed v5.0.0, v5.0.1, v5.0.1. no one worked!

[sasial-dev]

v5 only supports nuxt bridge or nuxt 3.

[vencho-mdp]

Is now working?

[cannap]

v5 only supports nuxt bridge or nuxt 3.

this is not true v5 works fine for me in "nuxt": "^2.15.8",

[pascalgermain]

I could manage to use this module with Tailwind 3 on a Nuxt 2 project, without Bridge.

• First, installed package on the right commit: https://github.com/nuxt-community/tailwindcss-module/commit/c174adb01ebe046aa243b30d957faf613ec68844, with pnpm (same with npm):

$ pnpm uninstall @nuxtjs/tailwindcss
$ pnpm install -D github:nuxt-community/tailwindcss-module#c174adb0

• Then cloned the repo separately, built it, and copied the dist folder in the project's modules directory

$ cd <another_path>
$ git clone [email protected]:nuxt-community/tailwindcss-module.git
$ cd tailwindcss-module
$ git checkout c174adb0
$ yarn remove postcss-nesting # was complaining about my Node version
$ yarn add postcss-nesting
$ yarn build
$ cp -R dist <path_to_project>/modules/tailwindcss

• Renamed .mjs to .js files in modules/tailwindcss/runtime

• And finally replaced '@nuxtjs/tailwindcss' by resolve(__dirname, 'modules/tailwindcss') in Nuxt config's buildModules

Hope this helps!

Question: would it be possible to add a new version, maybe 4.3.0, on the commit https://github.com/nuxt-community/tailwindcss-module/commit/c174adb01ebe046aa243b30d957faf613ec68844? Would be neat :)

[vencho-mdp]

All that work just to get tailwind working 😒

[pascalgermain]

Yeah... That's why i asked if it's possible to create a 4.3.0 version :/

[cannap]

i installed it via yarn for "nuxt": "^2.15.8" it just worked

[pascalgermain]

v5 only supports nuxt bridge or nuxt 3.

Well it seems to work as long as I don't use content in function format in my Tailwind config (as shown here: https://tailwindcss.nuxtjs.org/tailwind/config#merging-strategy). I get warnings in console and all my config is broken if I do so. So maybe v5 doesn't only support Nuxt Bridge or Nuxt 3 after all.

[ErwinAI]

I'm having similar issues. It used to work, but somehow broke today. For me the problem was that the package "pathe" was not found for nuxt/kit. Running on nuxt 2.15.8 too.

Some information whether ^v5 of @nuxtjs/tailwindcss works for Nuxt 2 would be very welcome.

[rizalrenaldi]

Can confirm v5.0.0 is working with nuxt 2.15.8 "nuxt": "^2.15.8"

[pascalgermain]

It does, as long as you don't use content as a fonction ;)