Nuxtjs v3 and Tailwindcss v3 PostCSS@8 not compatible

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>

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.

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.

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

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;

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

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