CODEWITHSUNDEEP
nuxt.jstailwind-csspostcssnuxt3.js
Elzodxon Sharofaddinov
Elzodxon Sharofaddinov

Reputation: 59

Nuxt3 + Tailwind Css => postcss@8 is not compatible with current version of nuxt (0.0.0). Expected: >=2.15.3

Cannot figure out this error...

enter image description here

Upvotes: 1

Views: 1757

Answers (1)

Sean Hay
Sean Hay

Reputation: 556

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.

Upvotes: 3

Related Questions