Installing tailwindcss on Nuxt4

Context : fresh Nuxt 3.16 install with Nuxt4 compatibility

I installed tailwindcss with

npx nuxi module add tailwindcss

npx nuxi module add tailwindcss

This is my nuxt.config.js:

export default defineNuxtConfig({
  devtools: { enabled: true },
  css: ['@/assets/css/main.css'],

  future: {
    compatibilityVersion: 4,
  },

  compatibilityDate: '2025-04-11',
  modules: ['@nuxt/image', '@nuxtjs/tailwindcss'],

  tailwindcss: {
    exposeConfig: true,
    viewer: true,
  },
})

export default defineNuxtConfig({
  devtools: { enabled: true },
  css: ['@/assets/css/main.css'],

  future: {
    compatibilityVersion: 4,
  },

  compatibilityDate: '2025-04-11',
  modules: ['@nuxt/image', '@nuxtjs/tailwindcss'],

  tailwindcss: {
    exposeConfig: true,
    viewer: true,
  },
})

I also installed postcss with

pnpm install -D @tailwindcss/postcss

pnpm install -D @tailwindcss/postcss

and this postcss.config.js file in the project root directory:

module.exports = {
  plugins: {
    '@tailwindcss/postcss': {},
    'autoprefixer': {},
  },
}

module.exports = {
  plugins: {
    '@tailwindcss/postcss': {},
    'autoprefixer': {},
  },
}

I still get this error when running:

[nuxi]  ERROR  Cannot start nuxt:  It looks like you're trying to use tailwindcss directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install @tailwindcss/postcss and update your PostCSS configuration.

[nuxi]  ERROR  Cannot start nuxt:  It looks like you're trying to use tailwindcss directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install @tailwindcss/postcss and update your PostCSS configuration.

I'm going crazy here...

Nuxt•11mo ago•

30 replies

enti

Installing tailwindcss on Nuxt4

Context : fresh Nuxt 3.16 install with Nuxt4 compatibility

I installed tailwindcss with

npx nuxi module add tailwindcss

npx nuxi module add tailwindcss

This is my nuxt.config.js:

export default defineNuxtConfig({
  devtools: { enabled: true },
  css: ['@/assets/css/main.css'],

  future: {
    compatibilityVersion: 4,
  },

  compatibilityDate: '2025-04-11',
  modules: ['@nuxt/image', '@nuxtjs/tailwindcss'],

  tailwindcss: {
    exposeConfig: true,
    viewer: true,
  },
})

export default defineNuxtConfig({
  devtools: { enabled: true },
  css: ['@/assets/css/main.css'],

  future: {
    compatibilityVersion: 4,
  },

  compatibilityDate: '2025-04-11',
  modules: ['@nuxt/image', '@nuxtjs/tailwindcss'],

  tailwindcss: {
    exposeConfig: true,
    viewer: true,
  },
})

I also installed postcss with

pnpm install -D @tailwindcss/postcss

pnpm install -D @tailwindcss/postcss

and this postcss.config.js file in the project root directory:

module.exports = {
  plugins: {
    '@tailwindcss/postcss': {},
    'autoprefixer': {},
  },
}

module.exports = {
  plugins: {
    '@tailwindcss/postcss': {},
    'autoprefixer': {},
  },
}

I still get this error when running:

[nuxi]  ERROR  Cannot start nuxt:  It looks like you're trying to use tailwindcss directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install @tailwindcss/postcss and update your PostCSS configuration.

[nuxi]  ERROR  Cannot start nuxt:  It looks like you're trying to use tailwindcss directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install @tailwindcss/postcss and update your PostCSS configuration.

I'm going crazy here...

Installing tailwindcss on Nuxt4

Similar Threads

Installing tailwindcss on Nuxt4

Similar Threads

Similar Threads

Similar Threads