Nuxt•2w ago

Installing tailwindcss on Nuxt4

Context : fresh Nuxt 3.16 install with Nuxt4 compatibility I installed tailwindcss with 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 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.

I'm going crazy here...

20 Replies

kapa.ai•2w ago

Hi @enti. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I can see you're having issues with setting up Tailwind CSS in your Nuxt project with compatibility version 4. The error message suggests there's a configuration issue with your PostCSS setup. Based on the knowledge sources, there are a few issues with your current configuration: 1. The main issue is in your PostCSS configuration. You're using @tailwindcss/postcss as a plugin, but this isn't the correct package name. 2. With Tailwind CSS v4 and Nuxt, the recommended approach is different from what you're currently doing. Here's how to fix it: Correct PostCSS Configuration Your postcss.config.js should use tailwindcss directly, not @tailwindcss/postcss:

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

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

Recommended Approach for Nuxt with Tailwind CSS v4 With Nuxt 3.16+ and compatibility version 4, the recommended approach is: 1. Create a CSS file (if you haven't already) at assets/css/main.css with:

@import "tailwindcss";

@import "tailwindcss";

2. In your nuxt.config.js, you can simplify your configuration:

export default defineNuxtConfig({
  devtools: { enabled: true },
  css: ['~/assets/css/main.css'],
  future: {
    compatibilityVersion: 4,
  },
  compatibilityDate: '2025-04-11',
  modules: ['@nuxt/image', '@nuxtjs/tailwindcss'],
})

export default defineNuxtConfig({
  devtools: { enabled: true },
  css: ['~/assets/css/main.css'],
  future: {
    compatibilityVersion: 4,
  },
  compatibilityDate: '2025-04-11',
  modules: ['@nuxt/image', '@nuxtjs/tailwindcss'],
})

Note that Nuxt handles the PostCSS configuration internally when using the @nuxtjs/tailwindcss module, so you might not need a separate postcss.config.js file at all. If you're still having issues, you might want to check if you have the correct versions of all packages installed. Nuxt UI v3 uses Tailwind CSS v4, which has significant changes in its configuration approach compared to previous versions as mentioned in the migration guide. Also, make sure you're using the correct alias for your CSS file path. In Nuxt 4, @ is the "app" folder and @@ is the root folder as noted in a GitHub issue. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

<@210882495707742219> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

entiOP•2w ago

@kapa.ai just did what you asked here, but Nuxt in Nuxt4 compatibility mode still requests postcss when running: [nuxi 11:54:39] 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.

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I see you're still encountering the same error after making the suggested changes. Let's look more closely at what might be happening with PostCSS in Nuxt 4 compatibility mode. Based on the knowledge sources, there appears to be some recent changes in how PostCSS is handled in Nuxt. The error message suggests that Tailwind CSS has moved its PostCSS plugin to a separate package. Here are some steps to try: 1. First, make sure you have the correct packages installed:

pnpm add -D tailwindcss postcss autoprefixer

pnpm add -D tailwindcss postcss autoprefixer

2. In your nuxt.config.js, explicitly configure PostCSS:

export default defineNuxtConfig({
  devtools: { enabled: true },
  css: ['~/assets/css/main.css'],
  future: {
    compatibilityVersion: 4,
  },
  compatibilityDate: '2025-04-11',
  modules: ['@nuxt/image', '@nuxtjs/tailwindcss'],
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {}
    }
  }
})

export default defineNuxtConfig({
  devtools: { enabled: true },
  css: ['~/assets/css/main.css'],
  future: {
    compatibilityVersion: 4,
  },
  compatibilityDate: '2025-04-11',
  modules: ['@nuxt/image', '@nuxtjs/tailwindcss'],
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {}
    }
  }
})

3. Make sure your assets/css/main.css file has the correct imports:

@import "tailwindcss";

@import "tailwindcss";

The error message specifically mentions @tailwindcss/postcss, which suggests there might be a change in how Tailwind CSS integrates with PostCSS in newer versions. According to the Nuxt documentation on external configuration files, Nuxt prefers to use the postcss key in nuxt.config rather than a separate postcss.config.js file. There have been several recent updates to PostCSS in the Nuxt codebase, including changes to how PostCSS plugins are loaded and updates to PostCSS dependencies. If you're still facing issues, you might want to try removing the postcss.config.js file entirely and rely solely on the configuration in nuxt.config.js. This aligns with Nuxt's preference for centralized configuration. Also, make sure you're using compatible versions of all packages, as there might be version conflicts causing this issue. Let me know if these suggestions help resolve the problem! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

<@210882495707742219> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

entiOP•2w ago

@kapa.ai still the same error after everything you said here:

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books:

entiOP•2w ago

[nuxi 11:58:43] 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.

kapa.ai•2w ago

---------------------- I understand you're still encountering the same error despite trying the previous suggestions. Let's take a more targeted approach based on what we know about Tailwind CSS v4 and Nuxt 4 compatibility mode. Looking at the error message more carefully, it specifically mentions needing to install @tailwindcss/postcss. This suggests that with Tailwind CSS v4, there's been a separation of the PostCSS plugin from the main package. Let's try these specific steps: 1. Install the @tailwindcss/postcss package that the error message is requesting:

pnpm add -D @tailwindcss/postcss

pnpm add -D @tailwindcss/postcss

2. Update your PostCSS configuration in 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'],
  postcss: {
    plugins: {
      '@tailwindcss/postcss': {},
      'autoprefixer': {}
    }
  }
})

export default defineNuxtConfig({
  devtools: { enabled: true },
  css: ['~/assets/css/main.css'],
  future: {
    compatibilityVersion: 4,
  },
  compatibilityDate: '2025-04-11',
  modules: ['@nuxt/image', '@nuxtjs/tailwindcss'],
  postcss: {
    plugins: {
      '@tailwindcss/postcss': {},
      'autoprefixer': {}
    }
  }
})

3. Make sure your assets/css/main.css file contains:

@import "tailwindcss";

@import "tailwindcss";

This approach directly addresses what the error message is telling us - that Tailwind CSS v4 has moved its PostCSS plugin to a separate package called @tailwindcss/postcss. There's evidence of recent changes in how Tailwind CSS and PostCSS interact in Nuxt, including fixes for handling local PostCSS plugins and issues with Tailwind CSS v4 in Nuxt layers architecture. If you're still experiencing issues after these changes, you might want to consider temporarily downgrading Tailwind CSS to version 4.0.3, as mentioned in one of the GitHub issues as a workaround for compatibility problems. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

<@210882495707742219> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

entiOP•2w ago

@kapa.ai I updated nuxt.config.js accordingly. Have fun:

pnpm add -D @tailwindcss/postcss

devDependencies: + @tailwindcss/postcss 4.1.4 Done in 2.7s using pnpm v10.8.1

pnpm run dev

[nuxi 12:02:32] 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.

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I see you're still encountering the same error even after installing @tailwindcss/postcss and updating your configuration. Let's try a different approach based on the latest information about PostCSS and Tailwind CSS v4 with Nuxt. Looking at the recent updates in the Nuxt repository, there have been several changes related to PostCSS, including an update to PostCSS 8.5.2 in a recent pull request. Let's try a more comprehensive approach: 1. First, let's make sure we have the correct versions of all dependencies:

pnpm add -D tailwindcss@latest postcss@latest autoprefixer@latest @tailwindcss/postcss@latest

pnpm add -D tailwindcss@latest postcss@latest autoprefixer@latest @tailwindcss/postcss@latest

2. Let's completely remove any external PostCSS configuration file (postcss.config.js) if you still have it. 3. Update your nuxt.config.js with a more explicit configuration:

export default defineNuxtConfig({
  devtools: { enabled: true },
  css: ['~/assets/css/main.css'],
  future: {
    compatibilityVersion: 4,
  },
  compatibilityDate: '2025-04-11',
  modules: ['@nuxt/image', '@nuxtjs/tailwindcss'],
  postcss: {
    plugins: {
      '@tailwindcss/postcss': {},
      autoprefixer: {}
    }
  },
  // Try disabling the built-in tailwindcss module configuration
  tailwindcss: {
    exposeConfig: false,
    viewer: false,
    config: {
      // Your tailwind config here if needed
    }
  }
})

export default defineNuxtConfig({
  devtools: { enabled: true },
  css: ['~/assets/css/main.css'],
  future: {
    compatibilityVersion: 4,
  },
  compatibilityDate: '2025-04-11',
  modules: ['@nuxt/image', '@nuxtjs/tailwindcss'],
  postcss: {
    plugins: {
      '@tailwindcss/postcss': {},
      autoprefixer: {}
    }
  },
  // Try disabling the built-in tailwindcss module configuration
  tailwindcss: {
    exposeConfig: false,
    viewer: false,
    config: {
      // Your tailwind config here if needed
    }
  }
})

4. Make sure your assets/css/main.css file has the correct import syntax for Tailwind CSS v4:

@import "tailwindcss";

@import "tailwindcss";

If you're still facing issues, there might be a conflict between the @nuxtjs/tailwindcss module and your manual PostCSS configuration. You could try: 1. Removing the @nuxtjs/tailwindcss module and handling Tailwind CSS configuration manually:

export default defineNuxtConfig({
  devtools: { enabled: true },
  css: ['~/assets/css/main.css'],
  future: {
    compatibilityVersion: 4,
  },
  compatibilityDate: '2025-04-11',
  modules: ['@nuxt/image'], // Remove tailwindcss module
  postcss: {
    plugins: {
      '@tailwindcss/postcss': {},
      autoprefixer: {}
    }
  }
})

export default defineNuxtConfig({
  devtools: { enabled: true },
  css: ['~/assets/css/main.css'],
  future: {
    compatibilityVersion: 4,
  },
  compatibilityDate: '2025-04-11',
  modules: ['@nuxt/image'], // Remove tailwindcss module
  postcss: {
    plugins: {
      '@tailwindcss/postcss': {},
      autoprefixer: {}
    }
  }
})

This is a challenging issue that appears to be related to the transition to Tailwind CSS v4 and its new approach to PostCSS integration. If these suggestions don't resolve the issue, you might want to consider temporarily using an earlier version of Tailwind CSS until these compatibility issues are fully resolved. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

<@210882495707742219> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

entiOP•2w ago

@HugoRCD completely lost here, I keep looping

HugoRCD•2w ago

@enti Can you give me a summary of your problem?

entiOP•2w ago

@HugoRCD using '@nuxtjs/tailwindcss' ends up with a postcss error, either using postcss with or without @tailwindcss/postcss for now I had to remove @nuxtjs/tailwindcss entirely (dunno the consequences) the error is :

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

(error happening with any postcss install scenario)

HugoRCD•2w ago

I don't think you should install the @nuxtjs/tailwindcss plugin as it doesn't yet have version v4 from what I've seen. Try this instead: https://tailwindcss.com/docs/installation/framework-guides/nuxt

Install Tailwind CSS with Nuxt

Setting up Tailwind CSS in a Nuxt project.

entiOP•2w ago

tailwindcss() doesn't work with Nuxt4 compatibility. For now I used this version : https://discordapp.com/channels/473401852243869706/1364538503693598771/1364542406015586348

HugoRCD•2w ago

Tailwind works very well with compatibility v4, NuxtUI uses it, all Nuxt projects use it etc... 😅

entiOP•2w ago

I get tailwindcss is not defined using that page you linked mmm ou pas... je n'ai plus le problème. Merci !

Gaming

Programming

Installing tailwindcss on Nuxt4

Did you find this page helpful?