N
Nuxt•11h ago
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}'),
          ],
        },
      },
    })
    //...
  }
})
// 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?
3 Replies
kapa.ai
kapa.ai•11h ago
Hi @Sukanta. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- You're encountering two related issues: 1. Tailwind CSS classes in your module's components are not being processed. 2. You're getting an error about using Tailwind CSS directly as a PostCSS plugin. Let's address both based on the available documentation. --- 1. Ensuring Tailwind CSS Processes Your Module's Components When building a Nuxt module that uses Tailwind CSS, you must ensure that Tailwind's content scanning includes your module's component files. The Nuxt documentation provides an example of how to do this using the installModule utility and specifying the content.files option to include your module's components: 
import { defineNuxtModule, createResolver, installModule } from '@nuxt/kit'

export default defineNuxtModule<ModuleOptions>({
  async setup (options, nuxt) {
    const resolver = createResolver(import.meta.url)

    // Inject your CSS file with Tailwind directives
    nuxt.options.css.push(resolver.resolve('./runtime/assets/styles.css'))

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

export default defineNuxtModule<ModuleOptions>({
  async setup (options, nuxt) {
    const resolver = createResolver(import.meta.url)

    // Inject your CSS file with Tailwind directives
    nuxt.options.css.push(resolver.resolve('./runtime/assets/styles.css'))

    await installModule('@nuxtjs/tailwindcss', {
      exposeConfig: true,
      config: {
        darkMode: 'class',
        content: {
          files: [
            resolver.resolve('./runtime/components/**/*.{vue,mjs,ts}'),
            resolver.resolve('./runtime/*.{mjs,js,ts}')
          ]
        }
      }
    })
  }
})
This is the correct approach for including your module's files in Tailwind's content scan, as shown in the Nuxt module author guide. --- 2. Error: "It looks like you're trying to use tailwindcss directly as a PostCSS plugin..." This error is not directly addressed in the provided knowledge sources. However, the official Nuxt UI and Nuxt UI Pro documentation for Tailwind CSS v4 integration does not mention the need to manually configure PostCSS or install @tailwindcss/postcss when using the Nuxt module approach. Instead, you should: - Use the @nuxtjs/tailwindcss module (not the raw tailwindcss package as a PostCSS plugin). - Ensure your CSS file (e.g., main.css or styles.css) includes the Tailwind directive:
  @import "tailwindcss";
  @import "@nuxt/ui";
  
  @import "tailwindcss";
  @import "@nuxt/ui";
or, if using Nuxt UI Pro: 
  @import "tailwindcss";
  @import "@nuxt/ui-pro";
  
  @import "tailwindcss";
  @import "@nuxt/ui-pro";
See Nuxt UI installation guide. - Register this CSS file in your Nuxt config: 
  export default defineNuxtConfig({
    modules: ['@nuxt/ui'],
    css: ['~/assets/css/main.css']
  })
  
  export default defineNuxtConfig({
    modules: ['@nuxt/ui'],
    css: ['~/assets/css/main.css']
  })
If you are following the module authoring pattern and injecting your own CSS, make sure you are not also trying to configure Tailwind as a PostCSS plugin directly, as this is not compatible with the Nuxt module approach. --- Summary - Your approach to include your module's components in Tailwind's content scan is correct and matches the official Nuxt documentation. - The error about PostCSS suggests you may have an incorrect or conflicting PostCSS configuration, or you are trying to use Tailwind as a PostCSS plugin directly, which is not needed when using the Nuxt module. - Ensure you are only using the @nuxtjs/tailwindcss module and not configuring Tailwind directly in your PostCSS config. If you continue to see the error, double-check your project's postcss.config.js and remove any direct references to tailwindcss as a plugin. Let the Nuxt module handle it. If you need more details on the error, unfortunately, the knowledge sources do not provide further troubleshooting steps for this specific PostCSS error. For the most up-to-date troubleshooting, you may need to consult the official Nuxt Tailwind module documentation or Tailwind CSS docs directly. --- References:
- Using Other Modules in Your Module (Nuxt Docs) - Nuxt UI Installation Guide ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•11h ago
<@1060530253166034994> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Sukanta
SukantaOP•11h ago
It didn't solve it.

Did you find this page helpful?