NuxtN
Nuxt•9mo ago•
6 replies
Sukanta

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}'),
          ],
        },
      },
    })
    //...
  }
})

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.

stuck in this for hours now. How to solve this?
Was this page helpful?