Configuring tailwind css configPath path in "nuxtui" will be invalid?

[ellermister]

Description

nuxt.config.ts

export default defineNuxtConfig({
// ...
  modules: [
    '@nuxt/ui',
    '@nuxt/image',
    '@nuxt/icon',
    '@pinia/nuxt',
    'dayjs-nuxt',
    'nuxt-security'
  ],

  tailwindcss: {
    cssPath: '@/assets/css/main.css',
    configPath: '@/config/tailwind.config',   // 👈
  }
 //...
})

No matter what, it will only read tailwind.config.ts in the root directory. And the suffix cannot be .ts

ERROR (node:3132) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension. 1:13:34 PM (Use node --trace-warnings ... to show where the warning was created) ERROR (node:3132) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension. 1:13:34 PM ✔ Vite server built in 2026ms 1:13:35 PM ✔ Nuxt Nitro server built in 1313 ms nitro 1:13:38 PM ERROR (node:3132) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension. 1:13:39 PM ERROR (node:3132) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.

package.json

{
//...
  "name": "laravel-nuxt",
  "private": true,
  "type": "module",
//...
}

Obviously, my package is configured type:"module".

So when the suffix is ​​.js/mjs, everything works fine.

So, is this normal? did I overlook something?

dependencies:

{
"devDependencies": {
    "@iconify-json/heroicons": "^1.1.20",
    "@iconify/vue": "^4.1.2",
    "@nuxt/devtools": "^1.3.1",
    "@nuxt/image": "^1.7.0",
    "@nuxt/ui": "^2.18.4",
    "@pinia/nuxt": "^0.5.1",
    "chokidar": "^3.6.0",
    "cross-env": "^7.0.3",
    "dayjs-nuxt": "^2.1.9",
    "nuxt": "^3.12.4",
    "nuxt-security": "^1.4.3",
    "sass": "^1.77.6",
    "vite-plugin-inspect": "^0.8.5",
    "vue": "^3.4.27",
    "vue-router": "^4.3.2"
  },
  "dependencies": {
    "@iconify-json/arcticons": "^1.1.108",
    "@iconify-json/ic": "^1.1.17",
    "@nuxt/icon": "^1.4.3",
    "@tiptap/extension-highlight": "^2.5.0",
    "@tiptap/extension-image": "^2.5.1",
    "@tiptap/extension-typography": "^2.5.0",
    "@tiptap/pm": "^2.5.0",
    "@tiptap/starter-kit": "^2.5.0",
    "@tiptap/vue-3": "^2.5.0",
    "js-sha256": "^0.11.0",
    "mitt": "^3.0.1",
    "prismjs": "^1.29.0",
    "vite-plugin-mkcert": "^1.17.5"
  },
}

[goshku]

Same problem here, and also when changed from .ts to .js fixed the error. I had this error several weeks ago, and still going

[benjamincanac]

@ineshbose This might be due to the recent refactor you made in tailwind.ts, would you have an idea?

[ineshbose]

Thanks for the ping @benjamincanac

changing .ts to .js fixes the issue

While the module uses loadConfig from tailwindcss (that uses jiti), there shouldn't be ESM/CJS syntax issues, but if they exist because CJS syntax is used, it is best to specify .cjs extension.

It only reads tailwind.config.ts in the root directory

I think I know what is going on - https://github.com/nuxt/ui/blob/dev/src/tailwind.ts#L77

The defu between nuxt/ui's tailwind module config and user tailwind module config is a bit conflicting as configPath is an array for the former and a string in the latter. You can put [] around your string in configPath and see if this works, but I should also raise a PR for this condition.