Importing directly from a nuxt.config file is not allowed.

[heriec]

What version of Tailwind CSS are you using?

v4.1.5

What build tool (or framework if it abstracts the build tool) are you using?

Nuxt 3.17.1 Vite 6.3.4

What version of Node.js are you using?

20.12.2

What browser are you using?

Chrome

What operating system are you using?

Windows

Describe your issue

I occasionally encounter an error in Nuxt. The error message is as follows:

[15:02:14]  ERROR  Internal server error: Importing directly from a nuxt.config file is not allowed. Instead, use runtime config or a module. [importing nuxt.config.ts from components/content/SearchEngine.vue?vue=&type=style&index=0&scoped=f72d0750&lang.css=]
  Plugin: vite:import-analysis
  File: E:/project/demo/components/content/SearchEngine.vue?vue=&type=style&index=0&scoped=f72d0750&lang.css=:1:1
  1  |  /*! tailwindcss v4.1.5 | MIT License | https://tailwindcss.com */       
     |  ^
  2  |  @layer properties;
  3  |  .cover[data-v-f72d0750] {
      at ResolveIdContext._formatLog (file:///E:/project/demo/node_modules/.pnpm/vite@6.3.4_@types+node@22.1_7420e0ffe0d39c0a8b5c9c0907dae89f/node_modules/vite/dist/node/chunks/dep-Bn81Esdm.js:42499:41)
      at ResolveIdContext.error (file:///E:/project/demo/node_modules/.pnpm/vite@6.3.4_@types+node@22.1_7420e0ffe0d39c0a8b5c9c0907dae89f/node_modules/vite/dist/node/chunks/dep-Bn81Esdm.js:42496:16)
      at ResolveIdContext.resolveId (file:///E:/project/demo/node_modules/.pnpm/impound@1.0.0/node_modules/impound/dist/index.js:31:13)
      at file:///E:/project/demo/node_modules/.pnpm/vite-plugin-inspect@11.0.1__c2bd9e8c315551d2bfa98ddbc1c3e693/node_modules/vite-plugin-inspect/dist/shared/vite-plugin-inspect.Bht9Q8w0.mjs:429:26
      at plugin.<computed> (file:///E:/project/demo/node_modules/.pnpm/vite-plugin-inspect@11.0.1__c2bd9e8c315551d2bfa98ddbc1c3e693/node_modules/vite-plugin-inspect/dist/shared/vite-plugin-inspect.Bht9Q8w0.mjs:358:14)
      at EnvironmentPluginContainer.resolveId (file:///E:/project/demo/node_modules/.pnpm/vite@6.3.4_@types+node@22.1_7420e0ffe0d39c0a8b5c9c0907dae89f/node_modules/vite/dist/node/chunks/dep-Bn81Esdm.js:42213:17)
      at async TransformPluginContext.resolve (file:///E:/project/demo/node_modules/.pnpm/vite@6.3.4_@types+node@22.1_7420e0ffe0d39c0a8b5c9c0907dae89f/node_modules/vite/dist/node/chunks/dep-Bn81Esdm.js:42420:15)
      at async normalizeUrl (file:///E:/project/demo/node_modules/.pnpm/vite@6.3.4_@types+node@22.1_7420e0ffe0d39c0a8b5c9c0907dae89f/node_modules/vite/dist/node/chunks/dep-Bn81Esdm.js:40463:26)
      at async Promise.all (index 172)
      at async TransformPluginContext.transform (file:///E:/project/demo/node_modules/.pnpm/vite@6.3.4_@types+node@22.1_7420e0ffe0d39c0a8b5c9c0907dae89f/node_modules/vite/dist/node/chunks/dep-Bn81Esdm.js:40767:12)
      at async file:///E:/project/demo/node_modules/.pnpm/vite-plugin-inspect@11.0.1__c2bd9e8c315551d2bfa98ddbc1c3e693/node_modules/vite-plugin-inspect/dist/shared/vite-plugin-inspect.Bht9Q8w0.mjs:374:17
      at async EnvironmentPluginContainer.transform (file:///E:/project/demo/node_modules/.pnpm/vite@6.3.4_@types+node@22.1_7420e0ffe0d39c0a8b5c9c0907dae89f/node_modules/vite/dist/node/chunks/dep-Bn81Esdm.js:42294:18)
      at async loadAndTransform (file:///E:/project/demo/node_modules/.pnpm/vite@6.3.4_@types+node@22.1_7420e0ffe0d39c0a8b5c9c0907dae89f/node_modules/vite/dist/node/chunks/dep-Bn81Esdm.js:35735:27)
      at async viteTransformMiddleware (file:///E:/project/demo/node_modules/.pnpm/vite@6.3.4_@types+node@22.1_7420e0ffe0d39c0a8b5c9c0907dae89f/node_modules/vite/dist/node/chunks/dep-Bn81Esdm.js:37250:24)

It's possible that clearing the cache and then running it again resolves this issue, so I don't know how to reproduce it.

The corresponding file SearchEngine.vue contains code like this:

<style scoped>
@reference "tailwindcss";
.cover {
  @apply absolute top-0 right-0 bottom-0 left-0 rounded text-white text-center pointer-events-none transition duration-600 z-10 origin-bottom;
}
</style>

It might be caused by @reference "tailwindcss";, and I find nuxt-modules/tailwindcss#429 (comment) may be helpful

[wongjn]

Please consider providing a git repo that reproduces the unexpected behavior. It really helps so that we can troubleshoot ourselves.

[heriec]

Sorry, as I said, when I delete the .nuxt foder of nuxt and run it again, this bug disappears. However, when I encoding for a period of time, the same problem occurs again, so I don't know how to reproduce the bug.
Just like the comment I provided,

I had "./nuxt.config.{js,ts}", in my tailwind.config.js. You may wonder why it is there, and here is the [reason](https://tailwindcss.com/docs/guides/nuxtjs).
I removed the line and the error disappeared.

But in fact, I don't have this file tailwind.config.js at the moment.

[wongjn]

I understand, if you could still provide a git repo that it eventually occurs in, that would be helpful.

Edit: I wonder if this might be because of the same underlying cause as #17706 (comment)