Nuxt 3 issue "Cannot read property 'resolveAlias' of undefined"

[nurdism]

Version

@nuxtjs/tailwindcss: 4.2.1
nuxt: nuxt3@3.0.0-27234271.da7ff44

Reproduction Link

https://codesandbox.io/s/hungry-diffie-k8odx

Steps to reproduce

none

What is Expected?

no error to be produced

What is actually happening?

error is produced:

ERROR  Cannot restart nuxt:  Cannot read property 'resolveAlias' of undefined
  at Object.tailwindCSSModule (node_modules/@nuxtjs/tailwindcss/dist/index.js:51:36)
  at installModule (node_modules/@nuxt/kit/dist/index.mjs:1196:17)
  at initNuxt (node_modules/nuxt3/dist/index.mjs:817:11)
  at processTicksAndRejections (node:internal/process/task_queues:96:5)
  at async load (node_modules/nuxi/dist/chunks/dev.mjs:6762:9)

[visini]

See also #386

[ChangJoo-Park]

@nuxt-bridge is same.

 ERROR  Cannot start nuxt:  Cannot read properties of undefined (reading 'resolveAlias')                           

  at Object.tailwindCSSModule (node_modules/@nuxtjs/tailwindcss/dist/index.js:53:37)
  at installModule (node_modules/@nuxt/kit/dist/index.mjs:1196:17)
  at initNuxt (node_modules/nuxt3/dist/index.mjs:817:11)
  at async load (node_modules/nuxi/dist/chunks/dev.mjs:6762:9)
  at async Object.invoke (node_modules/nuxi/dist/chunks/dev.mjs:6793:5)
  at async _main (node_modules/nuxi/dist/chunks/index.mjs:417:7)

[dacoto97]

Same:

[DengSihan]

An example of nuxt3 with tailwind: nuxt3-tailwind

Thanks a lot to @JDIZM

[dacoto97]

I think this package is no longer needed, because nuxt now uses webpack 5 and already supports tailwindcss.
Install tailwind as next.js:

1. Install Tailwind via npm npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
2. Create your configuration file: npx tailwindcss init -p
3. Configure Tailwind to remove unused styles in production

// tailwind.config.js
module.exports = {
  mode: "jit",
  purge: [
    './components/**/*.{vue,js}',
    './layouts/**/*.vue',
    './pages/**/*.vue',
    './plugins/**/*.{js,ts}',
    './nuxt.config.{js,ts}',
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

4. Include Tailwind in your CSS

/* ./assets/css/tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

[rromanv]

5. Import the tailwind css on the Project in app.vue

<script lang="ts" setup>
import './assets/css/tailwind.css'
</script>

<template>
   <NuxtPage />
</template>

[neilmispelaar]

1. Import the tailwind css on the Project in app.vue

<script lang="ts" setup>
import './assets/css/tailwind.css'
</script>

<template>
   <NuxtPage />
</template>

Is there a way to do this in the nuxt config file? (as opposed to in the app.vue file)

[rromanv]

1. Import the tailwind css on the Project in app.vue

<script lang="ts" setup>
import './assets/css/tailwind.css'
</script>

<template>
   <NuxtPage />
</template>

Is there a way to do this in the nuxt config file? (as opposed to in the app.vue file)

Ohh it is, better approach I believe

import { defineNuxtConfig } from 'nuxt3'

export default defineNuxtConfig({
  css: ['~/assets/css/tailwind.css'],
})

[ziadghalleb]

Awesome, thanks! Makes me wonder now what's the use for the @nuxt/tailwindcss module?
Consider adding  npm i tailwind-config-viewer -D to your project and change scripts in package.json to

"scripts": {
      "dev": "nuxt dev",
      "build": "nuxt build",
      "start": "node .output/server/index.mjs",
      "tailwind-config-viewer": "tailwind-config-viewer --open --port 3001"
},

[andysay]

/* ./assets/css/tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

not import files on server include domain , works only on localhost.

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/css". Strict MIME type checking is enforced for module scripts per HTML spec.

[Eliophot]

It's a pb with vite & postcss soon solved : nuxt/framework#818

[Atinux]

Thanks for the updates! The module gives the possibility to other module authors to configure the tailwind config but we may see in the future if we have to deprecate this module.

We recommend to use the app.vue to have HMR instead of using the nuxt.config file (the css prop should be kept only for module authors)

[chrispreisler]

After upgrading to the latest nuxt3 version, tailwind doesn't work for me anymore. I follow the instructions and yesterday it was working as expected. Haven't change anyhting, but today it doesn't work, without changing anything. It also doesn't show any erros.

[vanling]

After upgrading to the latest nuxt3 version, tailwind doesn't work for me anymore. I follow the instructions and yesterday it was working as expected. Haven't change anyhting, but today it doesn't work, without changing anything. It also doesn't show any erros.

@chrispreisler I looked at @DengSihan his approach, he locked nuxt3 on a specific version.

[MrParano1d]

none of these works with latest nuxt3 version:

export default defineNuxtConfig({
  css: ["tailwindcss/tailwind.css"]
})

<script lang="ts" setup>
import "tailwindcss/tailwind.css"
</script>

<style lang="postcss">
@import url("tailwindcss/tailwind.css");
</style>

everything results in an unparsed css:

<style type="text/css">@tailwind base;

@tailwind components;

@tailwind utilities;
</style>

[productdevbook]

@MrParano1d check working repo https://github.com/productfrontenddeveloper/nuxt3-app

[neilmispelaar]

Thank you @productfrontenddeveloper

What got it working for my repo was:

import { defineNuxtConfig } from "nuxt3";

export default defineNuxtConfig({
  build: {
    postcss: {
      postcssOptions: {
        plugins: {
          tailwindcss: {},
          autoprefixer: {},
        },
      },
    },
  },
});

I'm still learning nuxt but that build definition seemed to get things running

[productdevbook]

@neilmispelaar. @MrParano1d update fixed jit.

Working nuxt3 with https://github.com/productfrontenddeveloper/nuxt3-app ✅✅✅✅

fixed jit jit:true change -> mode: 'jit'

[Atinux]

@productfrontenddeveloper you can remove the postcss.config file.

This is great, updating the module should be straightforward 😀

[ciaran-io]

I tried this out & it worked for now.

In the nuxt config file add the following.

import { defineNuxtConfig } from 'nuxt3'

export default defineNuxtConfig({
  modules: ['@nuxtjs/tailwindcss'],

// your Tailwind css directory
  css: ['~/assets/css/tailwind.css'],
  build: {
    postcss: {
      postcssOptions: {
        plugins: {
          tailwindcss: {},
          autoprefixer: {},
        },
      },
    },
  },

})

Inside the tailwind config.js add the following

module.exports = {
  mode: "jit",
    purge: [
      "./components/**/*.{vue,js}",
      "./layouts/**/*.vue",
      "./pages/**/*.vue",
      "./app.vue",
      "./plugins/**/*.{js,ts}",
      "./nuxt.config.{js,ts}",
    ],
  theme: {
    extend: {
    },
  },
  variants: {
    extend: {},
  },

};

[iamandrewluca]

For me worked really simple with following Tailwind CSS Docs and @neilmispelaar recommendation.

# Generate a new nuxt3 app
npx nuxi init nuxt3-app

# go into directory
cd nuxt3-app

# install dependencies
npm install

# install Tailwind necessary dependencies
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

# generate Tailwind and Postcss config
npx tailwindcss init -p

nuxt.config.ts

import { defineNuxtConfig } from 'nuxt3'

export default defineNuxtConfig({
  // Add entry css file
  css: ['tailwindcss/tailwind.css'],
  build: {
    postcss: {
      // add Postcss options
      postcssOptions: require('./postcss.config.js'),
    },
  },
})

• You will need to update Tailwind config to purge needed files. Can be copied from Tailwind Module

[productdevbook]

@iamandrewluca

Atinux say

We recommend to use the app.vue to have HMR instead of using the nuxt.config file (the css prop should be kept only for module authors)

Please check repo setup :) -> https://github.com/productfrontenddeveloper/nuxt3-app

[iamandrewluca]

@productdevbook Good point.

In my case tailwindcss/tailwind.css never changes. Only tailwind.config.js and postcss.config.js can be changed. And we can achieve a kind of Server HMR by adding watch to config. Use app.vue only when have your custom CSS file like assets/css/tailwind.css

nux.config.ts

import { defineNuxtConfig } from 'nuxt3'

export default defineNuxtConfig({
  css: ['tailwindcss/tailwind.css'],
  // Restart server when these change
  watch: ['~/postcss.config.js', '~/tailwind.config.js'],
  build: {
    postcss: {
      postcssOptions: require('./postcss.config.js'),
    },
  },
})

[ndj91]

For me worked really simple with following Tailwind CSS Docs and @neilmispelaar recommendation.

# Generate a new nuxt3 app
npx nuxi init nuxt3-app

# go into directory
cd nuxt3-app

# install dependencies
npm install

# install Tailwind necessary dependencies
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

# generate Tailwind and Postcss config
npx tailwindcss init -p

nuxt.config.ts

import { defineNuxtConfig } from 'nuxt3'

export default defineNuxtConfig({
  // Add entry css file
  css: ['tailwindcss/tailwind.css'],
  build: {
    postcss: {
      // add Postcss options
      postcssOptions: require('./postcss.config.js'),
    },
  },
})

• You will need to update Tailwind config to purge needed files. Can be copied from Tailwind Module

This worked amazingly.

Had to change css: ['tailwindcss/tailwind.css'], to css: ['@/assets/css/tailwind.css'] for better flexibility over my tailwind.css.

Expecting an update to the tailwind docs around this.

[nyambe]

I tried all of the above but did not work.

I removed jit mode from tailwind.config.js, and it worked!!!

I am not sure why, lets hope it helps!

so happy now!

[imnhasan]

For me worked really simple with following Tailwind CSS Docs and @neilmispelaar recommendation.

# Generate a new nuxt3 app
npx nuxi init nuxt3-app

# go into directory
cd nuxt3-app

# install dependencies
npm install

# install Tailwind necessary dependencies
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

# generate Tailwind and Postcss config
npx tailwindcss init -p

nuxt.config.ts

import { defineNuxtConfig } from 'nuxt3'

export default defineNuxtConfig({
  // Add entry css file
  css: ['tailwindcss/tailwind.css'],
  build: {
    postcss: {
      // add Postcss options
      postcssOptions: require('./postcss.config.js'),
    },
  },
})

• You will need to update Tailwind config to purge needed files. Can be copied from Tailwind Module

This worked amazingly.

Had to change css: ['tailwindcss/tailwind.css'], to css: ['@/assets/css/tailwind.css'] for better flexibility over my tailwind.css.

Expecting an update to the tailwind docs around this.

I think this one very simple & nice solution 👍

[hacknug]

@productdevbook Good point.

In my case tailwindcss/tailwind.css never changes. Only tailwind.config.js and postcss.config.js can be changed. And we can achieve a kind of Server HMR by adding watch to config. Use app.vue only when have your custom CSS file like assets/css/tailwind.css

nux.config.ts

import { defineNuxtConfig } from 'nuxt3'

export default defineNuxtConfig({
  css: ['tailwindcss/tailwind.css'],
  // Restart server when these change
  watch: ['~/postcss.config.js', '~/tailwind.config.js'],
  build: {
    postcss: {
      postcssOptions: require('./postcss.config.js'),
    },
  },
})

watch option isn't working for me. Anyone managed to use it to trigger a rebuild+refresh? Don't really care if it does HMR or not in this case.

[IzakJackson]

watch: ['~/postcss.config.js', '~/tailwind.config.js'],

Trying to figure this out but no luck! Has anyone managed to get it to reload?

[pi0]

5.0.0-alpha released with Nuxt 3 and Tailwindcss 3 support. Release notes https://github.com/nuxt-community/tailwindcss-module/releases/tag/v5.0.0-0.