Sukanta Posts - Answer Overflow

Sukanta

•Created by Sukanta on 4/25/2025 in #❓・help

Unable to use nuxt-ui's tailwindcss in my custom module.

I'm building a nuxt module, in which I need to use nuxt-ui components and tailwindcss. I've followed the documentation and setup my plugin environment with playground. When installing, i choose to use @nuxt/ui. The nuxt UI components are working from inside my module but any tailwind classes which are not present elsewhere, is not processed. I know that somehow I need to provide my module's components directory to look for the classes. but unfortunately, everything I'm doing is not working. I've also tried to use it as per the documentation:

// file: module.ts
export default defineNuxtModule<ModuleOptions>({
  //...
  async setup(_options, _nuxt) {
    //...
    _nuxt.options.css.push(resolver.resolve('./runtime/assets/css/style.css'))

    await installModule('@nuxtjs/tailwindcss', {
      // module configuration
      exposeConfig: true,
      config: {
        darkMode: 'class',
        content: {
          files: [
            resolver.resolve('./runtime/components/**/*.{vue,mjs,ts}'),
            resolver.resolve('./runtime/*.{mjs,js,ts}'),
          ],
        },
      },
    })
    //...
  }
})

// file: module.ts
export default defineNuxtModule<ModuleOptions>({
  //...
  async setup(_options, _nuxt) {
    //...
    _nuxt.options.css.push(resolver.resolve('./runtime/assets/css/style.css'))

    await installModule('@nuxtjs/tailwindcss', {
      // module configuration
      exposeConfig: true,
      config: {
        darkMode: 'class',
        content: {
          files: [
            resolver.resolve('./runtime/components/**/*.{vue,mjs,ts}'),
            resolver.resolve('./runtime/*.{mjs,js,ts}'),
          ],
        },
      },
    })
    //...
  }
})

But now getting error:

[nuxi 3:44:52 AM]  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.

[nuxi 3:44:52 AM]  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.

stuck in this for hours now. How to solve this?

7 replies

Gaming

Programming