Tailwind Intellisense not works || Error [ERR_REQUIRE_ESM]: require() of ES Module

[jamaluddinrumi]

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "storyblok/**/*.{vue,js}",
    "components/**/*.{vue,js}",
    "pages/**/*.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require("daisyui"),
  ],
};

make tailwind intellisense not work. output:

[tailwind.config.js] File changed: /Volumes/sambashare/nuxt3-daisyui-starter/tailwind.config.js
[tailwind.config.js] Building...
[Error - 9:24:20 PM] Tailwind CSS: require() of ES Module /Volumes/sambashare/nuxt3-daisyui-starter/node_modules/nanoid/non-secure/index.js from /Volumes/sambashare/nuxt3-daisyui-starter/node_modules/postcss/lib/input.js not supported.
Instead change the require of index.js in /Volumes/sambashare/nuxt3-daisyui-starter/node_modules/postcss/lib/input.js to a dynamic import() which is available in all CommonJS modules.
Error [ERR_REQUIRE_ESM]: require() of ES Module /Volumes/sambashare/nuxt3-daisyui-starter/node_modules/nanoid/non-secure/index.js from /Volumes/sambashare/nuxt3-daisyui-starter/node_modules/postcss/lib/input.js not supported.
Instead change the require of index.js in /Volumes/sambashare/nuxt3-daisyui-starter/node_modules/postcss/lib/input.js to a dynamic import() which is available in all CommonJS modules.

but, when require("daisyui"), removed, tailwind intellisense works. even @tailwindcss/* plugins is added, tailwind intellisense still works.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "storyblok/**/*.{vue,js}",
    "components/**/*.{vue,js}",
    "pages/**/*.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [
    
  ],
};

[tailwind.config.js] File changed: /Volumes/sambashare/nuxt3-daisyui-starter/tailwind.config.js
[tailwind.config.js] Building...

[jamaluddinrumi]

i'm just creating workaround

i create empty tailwind.config.js in favor tailwind intellisense activated

# left it empty

and create tailwind.config.ts and loading daisyui here

import type { Config } from 'tailwindcss'

export default <Config>{
  content: [
    "storyblok/**/*.{vue,js}",
    "components/**/*.{vue,js}",
    "pages/**/*.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require("@tailwindcss/typography"),
    require("@tailwindcss/forms"),
    require("@tailwindcss/line-clamp"),
    require("@tailwindcss/aspect-ratio"),
    require("daisyui"),
  ],
}

[saadeghi]

Can you give me a reproduction repo?
Because I use Tailwind CSS Intellisense plugin on VScode on a regular basis and I see no issues.

I also tested this Nuxt 3 example (on my VScode locally - with Tailwind CSS Intellisense plugin):
https://stackblitz.com/edit/daisyui-nuxt3
And everything looks okay 🤔

[jamaluddinrumi]

this is it https://github.com/jamaluddinrumi/nuxt3-daisyui-starter

there is also recommendation for vscode extensions as well inside .vscode directory

gladly waiting for your response

[saadeghi]

I just cloned your repo, ran npm i and npm run dev.
It works. There were no errors. only this warning:

(node:67069) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time                                      19:28:10
(Use `node --trace-warnings ...` to show where the warning was created)

And the only problem I see was that your empty tailwind.config.js prevented the tailwind.config.ts to work. I removed tailwind.config.js and now it's okay.

What should I do to see that ERR_REQUIRE_ESM error?

[jamaluddinrumi]

sorry i didn't mention that error is appear on VSCode.

did you take a look on Tailiwind CSS Intellisense inside your VSCode?

[jamaluddinrumi]

[jamaluddinrumi]

so, i'm just trying "tailwindCSS.experimental.configFile" and point it to my former tailwind config with require('daisyui') commented

.vscode/settings.json

"tailwindCSS.experimental.configFile": "tailwind.config.intellisense.js"

tailwind.config.intellisense.js

is same as with tailwinf.config.js but with daisyui is excluded from plugins

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "storyblok/**/*.{vue,js}",
    "components/**/*.{vue,js}",
    "pages/**/*.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require("@tailwindcss/typography"),
    require("@tailwindcss/forms"),
    require("@tailwindcss/line-clamp"),
    require("@tailwindcss/aspect-ratio"),
    // require("daisyui"), 
  ],
}

so far it works nicely for me