New module v6.13 isn't working on freshly started project #939

laspinacristian · 2025-01-13T16:48:28Z

Environment

------------------------------
- Operating System: Linux
- Node Version:     v22.12.0
- Nuxt Version:     3.15.1
- CLI Version:      3.20.0
- Nitro Version:    2.10.4
- Package Manager:  [email protected]
- Builder:          -
- User Config:      compatibilityDate, devtools, modules
- Runtime Modules:  @nuxtjs/[email protected]
- Build Modules:    -
------------------------------

Reproduction

Create a new nuxt project with nuxi 3.20.0
npx nuxi@latest init my-nuxt-project

Install Nuxt tailwindcss module
npx nuxi module add tailwindcss

Run dev and it will fail
npm run dev

With the following error:

Describe the bug

Nuxt 3.15.1 with Nitro 2.10.4                                                                                                                                                                       nuxi 17:39:55
                                                                                                                                                                                                         17:39:55
  ➜ Local:    http://localhost:3000/
  ➜ Network:  use --host to expose

ℹ Using default Tailwind CSS file                                                                                                                                                      nuxt:tailwindcss 17:39:57
  ➜ DevTools: press Shift + Alt + D in the browser (v1.7.0)                                                                                                                                              17:39:58

✔ Vite client built in 44ms                                                                                                                                                                             17:39:59
✔ Vite server built in 547ms                                                                                                                                                                            17:40:00

 ERROR  Pre-transform error: [postcss] Cannot find module './../../tailwind.config'                                                                                                                      17:40:00
Require stack:
- /home/cristian/workspace/nuxt-horsing/.nuxt/tailwind/postcss.mjs
  Plugin: vite:css
  File: /home/cristian/workspace/nuxt-horsing/node_modules/tailwindcss/tailwind.css:undefined:NaN


 ERROR  Pre-transform error: [postcss] Cannot find module './../../tailwind.config'                                                                                                                      17:40:00
Require stack:
- /home/cristian/workspace/nuxt-horsing/.nuxt/tailwind/postcss.mjs
  Plugin: vite:css
  File: /home/cristian/workspace/nuxt-horsing/node_modules/vite-plugin-vue-inspector/src/Overlay.vue?vue&type=style&index=0&scoped=31d1379f&lang.css:undefined:NaN

Additional context

No response

Logs

The text was updated successfully, but these errors were encountered:

xusimr97 · 2025-01-13T20:03:18Z

I had the same problem with layers. I have forced the version to "@nuxtjs/tailwindcss": "^6.12.1" until they
fix it

dargmuesli · 2025-01-13T23:50:54Z

6.13.0 expects a tailwind.config.(js|ts) to exist, while previously a default configuration was loaded when there was no such file, it appears.

Previous .nuxt/tailwind.config.cjs:

// generated by the @nuxtjs/tailwindcss <project-path>node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@nuxtjs/tailwindcss/dist/runtime/merger.js");

const inlineConfig = {"content":[],"theme":{"extend":{}},"plugins":[]};

const config = [
require("<package-path>/tailwind.config.ts")
].reduce((prev, curr) => configMerger(curr, prev), configMerger(inlineConfig, { content: { files: [...] } }));

module.exports = config

New .nuxt/tailwind/postcss.mjs:

// generated by the @nuxtjs/tailwindcss <https://github.com/nuxt-modules/tailwindcss> module at 1/14/2025, 12:47:04 AM
import configMerger from "@nuxtjs/tailwindcss/merger";

import cfg2 from "./../../tailwind.config";
import cfg4 from "<package-path>/tailwind.config.ts";
const config = [
{"content":{"files":[...]}},
{},
cfg2,
{...},
cfg4
].reduce((acc, curr) => configMerger(acc, curr), {});

const resolvedConfig = config;

export default resolvedConfig;

... where import cfg2 from "./../../tailwind.config"; should not be there if the project has no such file, I'd say.

MarioPeperoni · 2025-01-14T01:00:12Z

I fixed the error by manually initialising tailwind config using the npx tailwindcss init command. It places tailwind.config in root.

ineshbose · 2025-01-14T06:28:09Z

Apologies about this bug! Seems like a check is missing here: https://github.com/nuxt-modules/tailwindcss/blob/main/src/internal-context/load.ts#L110 (I thought that c12 returned undefined for non-resolved paths, but that's not the case - https://github.com/unjs/c12/blob/main/src/loader.ts#L376)

Will release a fix in an hour.

ineshbose · 2025-01-14T08:39:45Z

v6.13.1 released. Let me know if it persists.

dargmuesli · 2025-01-14T09:17:57Z

Looks good at first glance, thanks! ❤️

Luca-Sett · 2025-01-15T15:29:21Z

Hi @ineshbose, I have v6.13.1 of the @nuxtjs/tailwindcss module installed in a Nuxt Layer. The module works correctly in the layer when testing with the .playground folder, but I can't get a separate Nuxt project which extends the layer to work:

 ERROR  Pre-transform error: [postcss] Cannot find module '@nuxtjs/tailwindcss/merger'                                                                            15:21:11  
Require stack:
- D:\dominate-kitchen\.nuxt\tailwind\postcss.mjs
  Plugin: vite:css
  File: D:/dominate-kitchen/node_modules/vite-plugin-vue-inspector/src/Overlay.vue?vue&type=style&index=0&scoped=31d1379f&lang.css:undefined:NaN

mrleblanc101 · 2025-01-15T16:25:20Z

I still have error inside my app that extend a Layer.

ERROR  [uncaughtException] Cannot find module '/Users/sleblanc/www/app_name/.nuxt/tailwind.config.cjs'   11:18:15 AM
Require stack:
- /Users/sleblanc/www/app_name/node_modules/tailwindcss/lib/lib/load-config.js
Occurred while linting /Users/sleblanc/www/app_name/app/app.config.ts:1
Rule: "prettier/prettier"

    Require stack:
    - node_modules/tailwindcss/lib/lib/load-config.js
    at Function._resolveFilename (node:internal/modules/cjs/loader:1225:15)
    at Function.resolve (node:internal/modules/helpers:190:19)
    at _resolve (node_modules/tailwindcss/node_modules/jiti/dist/jiti.js:1:246378)
    at jiti (node_modules/tailwindcss/node_modules/jiti/dist/jiti.js:1:249092)
    at node_modules/tailwindcss/lib/lib/load-config.js:52:26
    at loadConfig (node_modules/tailwindcss/lib/lib/load-config.js:62:6)
    at Zne (node_modules/prettier-plugin-tailwindcss/dist/index.mjs:2487:17944)
    at async WL (node_modules/prettier-plugin-tailwindcss/dist/index.mjs:2487:17120)
    at async Object.parse (node_modules/prettier-plugin-tailwindcss/dist/index.mjs:2487:26688)
    at async parse5 (node_modules/prettier/index.mjs:19838:11)

ineshbose · 2025-01-15T16:29:09Z

I still have error inside my app that extend a Layer.

ERROR  [uncaughtException] Cannot find module '/Users/sleblanc/www/app_name/.nuxt/tailwind.config.cjs'   11:18:15 AM
Require stack:
- /Users/sleblanc/www/app_name/node_modules/tailwindcss/lib/lib/load-config.js
Occurred while linting /Users/sleblanc/www/app_name/app/app.config.ts:1
Rule: "prettier/prettier"

    Require stack:
    - node_modules/tailwindcss/lib/lib/load-config.js
    at Function._resolveFilename (node:internal/modules/cjs/loader:1225:15)
    at Function.resolve (node:internal/modules/helpers:190:19)
    at _resolve (node_modules/tailwindcss/node_modules/jiti/dist/jiti.js:1:246378)
    at jiti (node_modules/tailwindcss/node_modules/jiti/dist/jiti.js:1:249092)
    at node_modules/tailwindcss/lib/lib/load-config.js:52:26
    at loadConfig (node_modules/tailwindcss/lib/lib/load-config.js:62:6)
    at Zne (node_modules/prettier-plugin-tailwindcss/dist/index.mjs:2487:17944)
    at async WL (node_modules/prettier-plugin-tailwindcss/dist/index.mjs:2487:17120)
    at async Object.parse (node_modules/prettier-plugin-tailwindcss/dist/index.mjs:2487:26688)
    at async parse5 (node_modules/prettier/index.mjs:19838:11)

I might need more context here because we've done away with tailwind.config.cjs file in the buildDir - are you able to DM me after looking me up on the Nuxt discord please?

Luca-Sett · 2025-01-16T09:32:38Z

@ineshbose, did you see my comment above with a different error message?

Hi @ineshbose, I have v6.13.1 of the @nuxtjs/tailwindcss module installed in a Nuxt Layer. The module works correctly in the layer when testing with the .playground folder, but I can't get a separate Nuxt project which extends the layer to work:
 ERROR  Pre-transform error: [postcss] Cannot find module '@nuxtjs/tailwindcss/merger'                                                                            15:21:11  
Require stack:
- D:\dominate-kitchen\.nuxt\tailwind\postcss.mjs
  Plugin: vite:css
  File: D:/dominate-kitchen/node_modules/vite-plugin-vue-inspector/src/Overlay.vue?vue&type=style&index=0&scoped=31d1379f&lang.css:undefined:NaN

ineshbose · 2025-01-16T09:34:49Z

@ineshbose, did you see my comment above with a different error message?
Hi @ineshbose, I have v6.13.1 of the @nuxtjs/tailwindcss module installed in a Nuxt Layer. The module works correctly in the layer when testing with the .playground folder, but I can't get a separate Nuxt project which extends the layer to work:
 ERROR  Pre-transform error: [postcss] Cannot find module '@nuxtjs/tailwindcss/merger'                                                                            15:21:11  
Require stack:
- D:\dominate-kitchen\.nuxt\tailwind\postcss.mjs
  Plugin: vite:css
  File: D:/dominate-kitchen/node_modules/vite-plugin-vue-inspector/src/Overlay.vue?vue&type=style&index=0&scoped=31d1379f&lang.css:undefined:NaN

Apologies! Could you open a new issue please? 🙏

Luca-Sett · 2025-01-16T11:23:26Z

No worries at all! Of course 👍

mrleblanc101 · 2025-01-16T15:08:47Z

My issue here was with tailwindcss class sorting.
I run prettier via @nuxtjs/eslint with prettier-plugin-tailwindcss.
But to do this, you need to pass the tailwind config path to the plugin.
Since my tailwind config is inside my Layer, and not inside my individual Apsp, I was linking to the build-time config inside the .nuxt folder.
v6.13 of @nuxtjs/tailwindcss changed how this file is generated, so I needed to update the path.

{
    "printWidth": 120,
    "tabWidth": 4,
    "semi": true,
    "singleQuote": true,
    "trailingComma": "all",
    "quoteProps": "consistent",
    "bracketSameLine": false,
    "plugins": ["prettier-plugin-tailwindcss"],
-    "tailwindConfig": "./.nuxt/tailwind.config.cjs"
+    "tailwindConfig": "./.nuxt/tailwind/postcss.mjs"
}

nethriis · 2025-01-19T15:34:19Z

So we don't have intellisense for tailwind classes now

laspinacristian added the bug Something isn't working label Jan 13, 2025

ineshbose closed this as completed Jan 14, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

New module v6.13 isn't working on freshly started project #939

New module v6.13 isn't working on freshly started project #939

laspinacristian commented Jan 13, 2025

xusimr97 commented Jan 13, 2025

dargmuesli commented Jan 13, 2025

MarioPeperoni commented Jan 14, 2025

ineshbose commented Jan 14, 2025

ineshbose commented Jan 14, 2025

dargmuesli commented Jan 14, 2025

Luca-Sett commented Jan 15, 2025 •

edited

Loading

mrleblanc101 commented Jan 15, 2025 •

edited

Loading

ineshbose commented Jan 15, 2025

Luca-Sett commented Jan 16, 2025

ineshbose commented Jan 16, 2025

Luca-Sett commented Jan 16, 2025

mrleblanc101 commented Jan 16, 2025

nethriis commented Jan 19, 2025

New module v6.13 isn't working on freshly started project #939

New module v6.13 isn't working on freshly started project #939

Comments

laspinacristian commented Jan 13, 2025

Environment

Reproduction

Describe the bug

Additional context

Logs

xusimr97 commented Jan 13, 2025

dargmuesli commented Jan 13, 2025

MarioPeperoni commented Jan 14, 2025

ineshbose commented Jan 14, 2025

ineshbose commented Jan 14, 2025

dargmuesli commented Jan 14, 2025

Luca-Sett commented Jan 15, 2025 • edited Loading

mrleblanc101 commented Jan 15, 2025 • edited Loading

ineshbose commented Jan 15, 2025

Luca-Sett commented Jan 16, 2025

ineshbose commented Jan 16, 2025

Luca-Sett commented Jan 16, 2025

mrleblanc101 commented Jan 16, 2025

nethriis commented Jan 19, 2025

Luca-Sett commented Jan 15, 2025 •

edited

Loading

mrleblanc101 commented Jan 15, 2025 •

edited

Loading