Nuxtjs v3 and Tailwindcss v3 PostCSS@8 not compatible

Question

i'm trying to install Tailwindcss in my nuxt project

I use fresh install from nuxt https://v3.nuxtjs.org/getting-started/installation

npx nuxi init nuxt3-app

and follow tailwindcss installation

https://tailwindcss.com/docs/guides/nuxtjs

But when i start the app npm run dev i got this error

ERROR  Cannot restart nuxt:  postcss@8 is not compatible with current version of nuxt (0.0.0). Expected: >=2.15.3   

I don't know how to fix it, and cannot find any answer online, i appreciate any help, thankyou

Answer 1

At this time, this documentation https://tailwindcss.com/docs/guides/nuxtjs only working for nuxtjs v2, but it still possible using v3 if you follow this guide :

Don't use @nuxt/postcss8 currently it's only work for nuxtjs v2

1. Install tailwindcss, postcss and autoprefixer

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init

2. Update your tailwind.config.js

module.exports = {
  content: [
    './assets/**/*.{vue,js,css}',
    './components/**/*.{vue,js}',
    './layouts/**/*.vue',
    './pages/**/*.vue',
    './plugins/**/*.{js,ts}',
    './nuxt.config.{js,ts}',
  ],
  variants: {
    extend: {},
  },
  plugins: [],
};

3. Update your postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

4. Create assets/css/tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

5. Update your nuxt.config.ts

import { defineNuxtConfig } from 'nuxt3'

// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
export default defineNuxtConfig({
  css: ['~/assets/css/tailwind.css'],
  build: {
    postcss: {
      postcssOptions: require('./postcss.config.js'),
    },
  }
})

6. Import your css in app.vue. (optional) in previous version they recommend us to import tailwindcss in app.vue instead of nuxt.config

<script setup>
import '@/assets/css/tailwind.css'
</script>

Answer 2

I had this problem too, as Nuxt 3 requires a different way to integrate Tailwind. The following is to install Tailwind as a Nuxt module, rather than independently. This is easier, as it requires a lot less configuration (no need to edit postcss.config.js, a bit less config required for nuxt.config.js).

Version 5.0 of the Nuxt Tailwind module brings in support for Nuxt 3. Full default installation is as follows:

Step 1

To install, we can dev install this (yarn add or npm install) with @nuxtjs/tailwindcss@latest or whichever version (after 5.1) you need.

 yarn add -D @nuxtjs/tailwindcss@latest

Step 2

Then in nuxt.config.js, add the module to the modules array:

import { defineNuxtConfig } from "nuxt"

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

Step 3

Create a tailwind.config.js file either manually or by using the terminal command:

npx tailwindcss init

Step 4

Add the Tailwind directives to your main CSS file (./assets/css/tailwind.css by default, or configurable in your nuxt.config.js file).

@tailwind base;
@tailwind components;
@tailwind utilities;

Step 5

After this, try running your dev or build commands, and it should be working correctly.

Answer 3

By using npx nuxi init nuxt3-app, you're creating a Nuxt v3 app. Nuxt 3 is still very much in public beta, so it's likely you'll come across issues which the team would no doubt love to take a look at for you- if you raise it as an issue on their GitHub.

If it suits your needs, Nuxt v2 is available as a stable alternative. Follow the guide that you referenced to setup a new app, and you shouldn't have any issues.

Answer 4

Add to your tailwind.config.js

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

Answer 5

First, run this command to install tailwind css:

npm i -D @nuxtjs/tailwindcss@latest

---

Second, in your nuxt.config.ts, copy/paste the following:

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
    modules: ['@nuxtjs/tailwindcss']
})

---

Third, in the root directory create assets/css/main.css file, then copy/paste the following codes in the main.css file:

@tailwind base;
@tailwind components;
@tailwind utilities;

---

Finally, test if it works in your App.vue file:

<template>
  <div>
    <h1 class="text-3xl font-bold underline">
      Hello world!
    </h1>
  </div>
</template>

---

Extra: if you want the tailwind intellisense, run the command:

npx tailwindcss init

then in tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

It should be working like a charm!

Answer 6

At the time I'm writing this, the accepted answer doesn't work for me; it may be that since December things may have changed (there's Nuxt 3 RC2 at the moment, stable version is expected in a few months).

Nonetheless, there's a dedicated plugin that works just fine for Nuxt and that supports Nuxt3 out of the box. Just follow these instructions to make it happen. There's plenty of documentation for anyone to follow.

Important. I don't know why, but such instructions lack an important step, which may be so trivial they take it for granted. Just remember to add the following three lines into your main.css (or tailwind.css) file, wherever that is:

@tailwind base;
@tailwind components;
@tailwind utilities;

Answer 7

I updated my nuxt.config.ts with the codes below and this works fine in my project. This is literally a combination of solutions explained above. :).

import { defineNuxtConfig } from "nuxt";

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
    modules: [
        '@nuxtjs/tailwindcss'
    ],
    css: ["@/assets/css/tailwind.css"],
    postcss: {
        plugins: {
            tailwindcss: {},
            autoprefixer: {},
        },
    },
  },
});

Answer 8

configure your nuxt.config.ts file with this.

import { defineNuxtConfig } from "nuxt";

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  css: ["@/assets/css/main.css"],
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
});

Answer 9

I tried this updated guide and it works with nuxt 3

Answer 10

If you followed tailwind official docs to integrate with Nuxt3, maybe the issue is just because of not adding the root's app.vue file into tailwind.config.js file:

module.exports = {
  content: [
    './app.vue',
    // ...rest of the list 
  ],
  variants: {
    extend: {},
  },
  plugins: [],
};