NuxtN
Nuxt•10mo ago•
30 replies
enti

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,
  },
})


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


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...
Was this page helpful?