nuxt: tailwind triggers `nuxt.config` import protection

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

About this issue

Original URL
State: closed
Created 2 years ago
Comments: 31 (18 by maintainers)

Commits related to this issue

tailwind cssを導入エラーが出たのでここを参考にして修正した https://github.com/nuxt/framework/issues/2886#issuecomment-1020237093 — committed to s-arikawa/pjm-tools by deleted user 2 years ago

Most upvoted comments

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?

+109

danielroe on Jan 24, 2022

PR send to TailwindLabs docs https://github.com/tailwindlabs/tailwindcss.com/pull/1160

+18

misaon on Jan 24, 2022

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.

+16

reinink on Jan 25, 2022

@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.

+14

rvmourik on Jan 24, 2022

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

+11

yuruyuri16 on Feb 8, 2022

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: [],
}

chz on Mar 12, 2022

"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]

shahabbasian on Jan 24, 2022

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.

garethredfern on Jan 30, 2022

~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',
  ],
}

slavanossar on Sep 8, 2022

/cc @danielroe We need to do something for this 😃

pi0 on Jun 12, 2022

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

rvmourik on Jan 24, 2022

@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.

adityar15 on Feb 9, 2022

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

pi0 on Feb 9, 2022