tailwind triggers nuxt.config import protection

[mihail727]

Environment

RootDir: /home/supp/code/test
Nuxt project info:

---

• Operating System: Linux
• Node Version: v17.4.0
• Nuxt Version: 3.0.0-27383858.03cc191
• Package Manager: yarn@1.22.17
• Bundler: Vite
• User Config: -
• Runtime Modules: -
• Build Modules: -

---

Reproduction

https://stackblitz.com/edit/github-vaufyy?devtoolsheight=33&file=package.json

Describe the bug

I just create a new clear project with npx nuxi create and tried to run yarn dev

Errors compilng:
nuxt3/nuxt cannot be imported directly. Instead, import runtime Nuxt composables from #app or #imports. [importing /home/supp/code/test/node_modules/nuxt3/dist/meta/runtime/plugin from virtual:/home/supp/code/test/.nuxt/plugins/server.mjs]

This module cannot be imported in the Vue part of your app. [importing /home/supp/code/test/node_modules/@nuxt/nitro/dist/runtime/app/nitro.client.mjs from virtual:/home/supp/code/test/.nuxt/plugins/server.mjs]

Additional context

No response

Logs

No response

[pi0]

Sorry for the inconvenience. Regression should be fixed by nuxt/framework#2885 (in a few minutes, you can upgrade using npx nuxi upgrade

[shahabbasian]

"nuxt3": "^3.0.0-27383920.81ee59c",

ERROR Importing directly from a nuxt.config file is not allowed. Instead, use runtime config or a module. [importing /nuxt.config.ts from index.html]

[danielroe]

@shahabbasian And are you importing from nuxt.config? (Would you provide a reproduction?)

[rvmourik]

@shahabbasian And are you importing from nuxt.config? (Would you provide a reproduction?)

Hi @danielroe,

Don't have the time for a repo at this moment, but the only thing I was importing was defineNuxtConfig like this:

import { defineNuxtConfig } from 'nuxt3'

[danielroe]

@rvmourik That issue should be fixed: https://stackblitz.com/edit/github-t46bjg?file=package.json&terminal=dev

[rvmourik]

I reverted back, so I just did:

npx nuxi upgrade, it upgraded to the latest commit. As soon as I fire it up with nuxi dev, this is the output:

  > Local:    http://localhost:3000/ 
  > Network:  http://x.x.x.x:3000/
  > Network:  http://x.x.x.x:3000/

ℹ Nested components option detected                                                                                                                             nuxt:storm 16:16:18
ℹ 48 components compiled for nuxt-storm                                                                                                                         nuxt:storm 16:16:18
ℹ Vite warmed up in 123ms                                                                                                                                                  16:16:19

 ERROR  Importing directly from a nuxt.config file is not allowed. Instead, use runtime config or a module. [importing /nuxt.config.ts from index.html]  

nuxt.config.ts

import { defineNuxtConfig } from 'nuxt3';

// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
export default defineNuxtConfig({
  meta: {
    meta: [
      { name: 'viewport', content: 'width=device-width, initial-scale=1' }
    ],
    link: [
      { href: 'https://rsms.me/inter/inter.css' },
      { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' },
      { rel: 'alternate icon', href: '/favicon.ico' }
    ],
    script: [{ src: '/assets/js/vite-amplify-fix.js' }]
  },
  buildModules: [
    '@vueuse/nuxt',
    '@pinia/nuxt',
    [
      '@intlify/nuxt3',
      {
        vueI18n: {
          locale: 'nl'
        }
      }
    ],
    ['nuxt-storm', { nested: true }]
  ],
  vueuse: {
    ssrHandler: true
  },
  build: {
    postcss: {
      postcssOptions: {
        plugins: {
          'tailwindcss/nesting': {},
          tailwindcss: {},
          autoprefixer: {}
        }
      }
    }
  },
  vite: {
    resolve: {
      alias: {
        './runtimeConfig': './runtimeConfig.browser'
      }
    }
  }
});

Thanks in advance

[danielroe]

@rvmourik Any chance runtimeConfig.browser is importing from nuxt.config?

[rvmourik]

@rvmourik Any chance runtimeConfig.browser is importing from nuxt.config?

narrowed it down to tailwindcss postcss plugin I thinks, if I comment this out and start the dev environment the error is not present.

  build: {
    postcss: {
      postcssOptions: {
        plugins: {
          'tailwindcss/nesting': {},
          // tailwindcss: {}
          autoprefixer: {}
        }
      }
    }
  },

With this, no error.

[shahabbasian]

@shahabbasian And are you importing from nuxt.config? (Would you provide a reproduction?)

I see this problem by adding the tailwindcss file

repo:
https://github.com/shahabbasian/nuxt3-vazirFont.git

[danielroe]

For now, remove the nuxt.config scanning from your tailwind config.

   content: [
     "./components/**/*.{vue,js}",
     "./layouts/**/*.vue",
     "./pages/**/*.vue",
     "./app.vue",
     "./plugins/**/*.{js,ts}",
-    "./nuxt.config.{js,ts}"
   ],
   theme: {
     extend: {
       fontFamily: {
         vazir: ['Vazir']
       }
     },
   },
   plugins: [],
 }

Do you think you need Tailwind to scan your nuxt.config?

[shahabbasian]

@danielroe
No it is not necessary
You are right

I had only seen these settings in training for a long time

[rvmourik]

For now, remove the nuxt.config scanning from your tailwind config.

   content: [
     "./components/**/*.{vue,js}",
     "./layouts/**/*.vue",
     "./pages/**/*.vue",
     "./app.vue",
     "./plugins/**/*.{js,ts}",
-    "./nuxt.config.{js,ts}"
   ],
   theme: {
     extend: {
       fontFamily: {
         vazir: ['Vazir']
       }
     },
   },
   plugins: [],
 }

Do you think you need Tailwind to scan your nuxt.config?

No i don't think so either, I got it from here.

https://tailwindcss.nuxtjs.org/tailwind/config#default-configuration

[misaon]

PR send to TailwindLabs docs tailwindlabs/tailwindcss.com#1160

[rafaelmils]

For now, remove the nuxt.config scanning from your tailwind config.

   content: [
     "./components/**/*.{vue,js}",
     "./layouts/**/*.vue",
     "./pages/**/*.vue",
     "./app.vue",
     "./plugins/**/*.{js,ts}",
-    "./nuxt.config.{js,ts}"
   ],
   theme: {
     extend: {
       fontFamily: {
         vazir: ['Vazir']
       }
     },
   },
   plugins: [],
 }

Do you think you need Tailwind to scan your nuxt.config?

@danielroe I had also seen that from the official tailwind documentation site here https://tailwindcss.com/docs/guides/nuxtjs

[reinink]

Do you think you need Tailwind to scan your nuxt.config?

Hey folks! So the main reason we need to include nuxt.config.{js,ts} in the list of files that Tailwind CSS scans is because you might be applying Tailwind classes to the <html> or <body> elements in this file using the htmlAttrs or bodyAttrs properties available in Vue Meta. By excluding this file, those styles won't be picked up, and your site will look incorrect.

[rvmourik]

Do you think you need Tailwind to scan your nuxt.config?

Hey folks! So the main reason we need to include nuxt.config.{js,ts} in the list of files that Tailwind CSS scans is because you might be applying Tailwind classes to the <html> or <body> elements in this file using the htmlAttrs or bodyAttrs properties available in Vue Meta. By excluding this file, those styles won't be picked up, and your site will look incorrect.

@danielroe you need to correct me if I am saying something that isn't true.

@reinink for Nuxt 2 this is the case, with Nuxt 3 it is possible to set those through the info found here:

https://v3.nuxtjs.org/docs/usage/meta-tags

So the need to scan the config might not be necessary anymore.

[garethredfern]

A point to note on what @rvmourik suggests. I added the bodyAttrs property in app.vue, the body tailwind styles were not picked up. It works if you create a layout file and add the bodyAttrs tag in there.

[yuruyuri16]

I changed from tailwind.config.js to tailwind.config.ts and module.exports = to export default.

[pi0]

Removing tailwind.config from content[] should fix the issue. Please consider using @nuxtjs/tailwindcss 5 for proper tailwindcss integration with nuxt3.

[adityar15]

@pi0 I tried with @nuxtjs/tailwindcss 5 but in chrome dev I am getting a following error

Hydration completed but contains mismatches.
hydrate2 @ runtime-core.esm-bundler.js:4043

[OrhanOzkercin]

I am facing the same issue. I try what you suggested above but did not work.

[pi0]

@adityar15 Would you please open an issue possibly with reproduction in repo?

[adityar15]

@pi0 Thanks for the comment. I was able to sort it for now. Just need to delete package-lock.json and just did npm install.

[davidawad]

I also had this issue while setting up tailwindcss

[chz]

I also had this issue while setting up tailwindcss

Delete nuxt.config.{js,ts}, from content: [] should be :

module.exports = {
  content: [
    `components/**/*.{vue,js}`,
    `layouts/**/*.vue`,
    `pages/**/*.vue`,
    `plugins/**/*.{js,ts}`,
    `app.vue`
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

[anburocky3]

Also if you are customizing the 404, 500 custom pages, then you need to include the error.vue inside the content array.

Like this:

module.exports = {
  content: [
    'components/**/*.{vue,js}',
    'layouts/**/*.vue',
    'pages/**/*.vue',
    'plugins/**/*.{js,ts}',
    'app.vue',
    'error.vue' // or '*.vue'
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

[fabis94]

One of the glob patterns under content picked up a Nuxt Module that had imports from @nuxt/kit etc. I don't understand why, but this broke the Nuxt build entirely and made it think that I was trying to import that module from inside the client-side bundle:

 ERROR  This module cannot be imported in the Vue part of your app. [importing @nuxt/kit from lib/core/nuxt-modules/apollo/module.ts]                                                                                                                       12:16:05

✘ [ERROR] No matching export in "browser-external:module" for import "builtinModules"

    node_modules/pkg-types/node_modules/mlly/dist/index.mjs:1:9:
      1 │ import { builtinModules, createRequire } from 'module';
        ╵          ~~~~~~~~~~~~~~

✘ [ERROR] No matching export in "browser-external:module" for import "createRequire"

    node_modules/pkg-types/node_modules/mlly/dist/index.mjs:1:25:
      1 │ import { builtinModules, createRequire } from 'module';
        ╵                          ~~~~~~~~~~~~~

I don't know why this happens - is Vite actually trying to bundle in everything that it finds with the content glob patterns? In either case, this needs to be fixed so that any and all files picked up with content can be scanned. It doesn't matter why one person or another might want to scan nuxt.config.ts or some other file for tailwind classes, it shouldn't be a problem and Vite (or whatever) shouldn't be trying to load and bundle (?) these files.

[jovylle]

Thank you, the removal of nuxt.config in tailiwnd works. weird why should tailwind scan it.

[pi0]

/cc @danielroe We need to do something for this :)

[fabis94]

Any updates regarding this? It would be nice if nuxt.config.ts and other files could be scanned for Tailwind classes without making them bundled or treating them like code that is about to be bundled (e.g. analyzing imports, throwing errors if the imports don't resolve)

[slavanossar]

A temporary workaround is to extract the classes into their own file, not ideal but does the job

Better solution is to define <head> in app.vue, based on Nuxt 3 migration guide:

// app.vue
<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

<script lang="ts" setup>
useHead({
  bodyAttrs: {
    class: 'h-full font-body antialiased',
  },
  htmlAttrs: {
    class: 'min-h-full',
    lang: 'en',
  },
})
</script>

// tailwind.config.js
module.exports = {
  content: [
    'components/**/*.vue',
    'layouts/**/*.vue',
    'pages/**/*.vue',
    'app.vue',
    'error.vue',
  ],
}