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>