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

Version

@nuxtjs/tailwindcss: 4.2.1 nuxt: [e-mail]7ff44

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)

[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

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

1. Include Tailwind in your CSS

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