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

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

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;

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

An example of nuxt3 with tailwind: nuxt3-tailwind

Thanks a lot to @JDIZM

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)

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

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.

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.

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.

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>

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"
},

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: {},
  },

};

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

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

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

<template>
   <NuxtPage />
</template>

@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'),
    },
  },
})

@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

@productfrontenddeveloper you can remove the postcss.config file.

This is great, updating the module should be straightforward 😀