Nuxt•4d ago

Can we force Tailwindcss(nuxt ui) scan module for css

I am trying to create a module on top nuxt ui what i need to somehow make tailwindcss compiler to also scan component in module for tailwind css(nuxt ui)

19 Replies

kapa.ai•4d ago

Hi @Muhammad Khizar. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, you can force Tailwind CSS (including when using Nuxt UI) to scan your module’s components for utility classes. When authoring a Nuxt module, you should use the Nuxt Kit’s installModule utility to programmatically add Tailwind CSS and configure its content option to include your module’s component files. Here’s how you can do it in your module:

import { createResolver, defineNuxtModule, installModule } from '@nuxt/kit'

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

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

    // Install Tailwind and configure it to scan your module's components
    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 { createResolver, defineNuxtModule, installModule } from '@nuxt/kit'

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

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

    // Install Tailwind and configure it to scan your module's components
    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 ensures that Tailwind will scan all your module’s components and runtime files for utility classes, so styles are generated correctly—even for components provided by your module. This approach is officially documented for both Nuxt 3 and Nuxt 4 module authors Using Other Modules in Your Module. If you are using Nuxt UI, you can combine this with the Nuxt UI module in your nuxt.config.ts as usual. Just make sure your module’s components are included in the Tailwind content configuration as shown above. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4d ago

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

Muhammad KhizarOP•4d ago

I am using nuxt ui can still do it? @kapa.ai ?

kapa.ai•4d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Yes, you can force Tailwind CSS (including when using Nuxt UI) to scan your module for utility classes by configuring the Tailwind content option to include your module’s component files. When creating a Nuxt module, you should use the Nuxt Kit’s installModule utility and specify the paths to your module’s components in the content.files array. Here’s an example from the official documentation:

import { createResolver, defineNuxtModule, installModule } from '@nuxt/kit'

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

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

    // Install Tailwind and configure it to scan your module's components
    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 { createResolver, defineNuxtModule, installModule } from '@nuxt/kit'

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

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

    // Install Tailwind and configure it to scan your module's components
    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 approach ensures that Tailwind will scan all your module’s components and runtime files for utility classes, so styles are generated correctly—even for components provided by your module. This method is officially documented for Nuxt module authors and is compatible with Nuxt UI as well. For more details, see the official Nuxt documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4d ago

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

Muhammad KhizarOP•4d ago

@kapa.ai

The signature '(moduleToInstall: "@nuxt/ui", inlineOptions?: Partial<ModuleOptions> | undefined, nuxt?: Nuxt | undefined): Promise<void>' of 'installModule' is deprecated.ts(6387)
index.d.ts(31, 4): The declaration was marked as deprecated here.

The signature '(moduleToInstall: "@nuxt/ui", inlineOptions?: Partial<ModuleOptions> | undefined, nuxt?: Nuxt | undefined): Promise<void>' of 'installModule' is deprecated.ts(6387)
index.d.ts(31, 4): The declaration was marked as deprecated here.

and also i change nuxt ui as it using this but still not work

kapa.ai•4d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- You are correct: the use of installModule is now deprecated for specifying dependencies between Nuxt modules. This is confirmed in the official Nuxt documentation and recent pull requests. The new recommended approach is to use the moduleDependencies property in your module definition. This allows you to declare dependencies and even override their configuration, and ensures that dependencies are resolved before your module runs. Here’s how you can do it:

import { defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  meta: {
    name: 'your-module',
    // other meta fields...
  },
  moduleDependencies: {
    '@nuxt/ui': {
      // You can specify a version constraint if needed
      version: '>=3.0.0',
      // Optionally override configuration
      overrides: {},
      // Optionally provide default configuration
      defaults: {},
    },
    '@nuxtjs/tailwindcss': {
      // You can also override Tailwind config here if needed
      overrides: {
        // Example: add your module's components to the content array
        content: {
          files: [
            './runtime/components/**/*.{vue,mjs,ts}',
            './runtime/*.{mjs,js,ts}',
          ],
        },
      },
    },
  },
  setup(options, nuxt) {
    // Your module logic here
  }
})

import { defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  meta: {
    name: 'your-module',
    // other meta fields...
  },
  moduleDependencies: {
    '@nuxt/ui': {
      // You can specify a version constraint if needed
      version: '>=3.0.0',
      // Optionally override configuration
      overrides: {},
      // Optionally provide default configuration
      defaults: {},
    },
    '@nuxtjs/tailwindcss': {
      // You can also override Tailwind config here if needed
      overrides: {
        // Example: add your module's components to the content array
        content: {
          files: [
            './runtime/components/**/*.{vue,mjs,ts}',
            './runtime/*.{mjs,js,ts}',
          ],
        },
      },
    },
  },
  setup(options, nuxt) {
    // Your module logic here
  }
})

This approach is now the recommended way to specify module dependencies and configuration overrides, and it will ensure that Tailwind CSS (and Nuxt UI) are properly set up to scan your module’s components for utility classes. The use of installModule is deprecated because it has several shortcomings, including not affecting already-installed modules and overriding user configuration in ways that are not always desirable. You can read more about this change in the Nuxt 4 module author guide and the related pull request. If you are still experiencing issues with Tailwind not scanning your module, ensure that your paths are correct and that you are using the new moduleDependencies approach as shown above. If you need to support older Nuxt versions, you may need to use installModule as a fallback, but for Nuxt 4 and forward, moduleDependencies is the way to go. Summary:
- installModule is deprecated for module dependencies. - Use moduleDependencies in your module definition to declare and configure dependencies. - This ensures Tailwind and Nuxt UI are set up correctly for your module’s components to be scanned for CSS classes. References:
Nuxt 4 Module Definition
Nuxt PR: allow modules to specify dependencies ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4d ago

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

Muhammad KhizarOP•4d ago

@kapa.ai @nuxtjs/tailwindcss not install when we use nuxt ui

kapa.ai•4d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- When you use Nuxt UI, you do not need to install @nuxtjs/tailwindcss separately. Nuxt UI manages Tailwind CSS integration for you. The official Nuxt UI installation guide instructs you to simply install @nuxt/ui and import Tailwind CSS in your CSS file:

npm install @nuxt/ui

npm install @nuxt/ui

Then, in your app/assets/css/main.css:

@import "tailwindcss";
@import "@nuxt/ui";

@import "tailwindcss";
@import "@nuxt/ui";

And in your nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css']
})

export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css']
})

There is no need to add @nuxtjs/tailwindcss to your modules—Nuxt UI handles Tailwind for you automatically. If you use both, you may encounter conflicts or unexpected behavior. Just follow the Nuxt UI documentation and you will have Tailwind CSS support out of the box Nuxt UI Installation. If you are building a module on top of Nuxt UI and need to ensure Tailwind scans your files, you should use the @source directive in your CSS to include your content or component directories, as described in the Nuxt UI docs Nuxt UI + Content Integration. If you need to customize Tailwind’s behavior further, you can do so using the CSS-first configuration approach with the @theme and @source directives in your CSS file, rather than a separate Tailwind config file Nuxt UI Design System. Summary:
- Do not install @nuxtjs/tailwindcss when using Nuxt UI; Nuxt UI manages Tailwind for you. - Use the @import "tailwindcss"; directive in your CSS. - Use the @source directive to ensure Tailwind scans your desired files if needed. If you follow these steps and still have issues, please provide more details about your setup. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4d ago

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

Muhammad KhizarOP•4d ago

@kapa.ai

import { defineNuxtModule, addPlugin, createResolver, addComponentsDir } from '@nuxt/kit'

// Module options TypeScript interface definition
export interface ModuleOptions {
  prefix: string
}

export default defineNuxtModule<ModuleOptions>({
  meta: {
    name: 'nuxt-motion-block',
    configKey: 'motionBlock',
    compatibility: {
      nuxt: '>=4.0.0',
    },
  },
  // Default configuration options of the Nuxt module
  defaults: {
    prefix: 'M',
  },
  moduleDependencies: {
    '@nuxt/ui': {
      version: '>=4.0.0',
      optional: false,
      // @ts-expect-error
      content: {
        files: [
          './runtime/components/**/*.{vue,mjs,ts}',
          './runtime/*.{mjs,js,ts}',
        ],
      },
    },
    'motion-v': {
      version: '>=1.7.2',
      optional: false,
    },
    // '@nuxtjs/tailwindcss': {
    //   overrides: {
    //     config: {
    //       content: {
    //         files: [
    //           './runtime/components/**/*.{vue,mjs,ts}',
    //           './runtime/*.{mjs,js,ts}',
    //         ],
    //       },
    //     },
    //   },
    // },
  },
  setup(options, nuxt) {
    const resolver = createResolver(import.meta.url)

    // Add all components from the runtime/components directory
    addComponentsDir({
      path: resolver.resolve('./runtime/components'),
      prefix: options.prefix,
      global: true,
      watch: false,
    })

    // Do not add the extension since the `.ts` will be transpiled to `.mjs` after `npm run prepack`
    addPlugin(resolver.resolve('./runtime/plugin'))

    // Add composables
    nuxt.hook('imports:dirs', (dirs) => {
      dirs.push(resolver.resolve('./runtime/composables'))
    })
  },
})

import { defineNuxtModule, addPlugin, createResolver, addComponentsDir } from '@nuxt/kit'

// Module options TypeScript interface definition
export interface ModuleOptions {
  prefix: string
}

export default defineNuxtModule<ModuleOptions>({
  meta: {
    name: 'nuxt-motion-block',
    configKey: 'motionBlock',
    compatibility: {
      nuxt: '>=4.0.0',
    },
  },
  // Default configuration options of the Nuxt module
  defaults: {
    prefix: 'M',
  },
  moduleDependencies: {
    '@nuxt/ui': {
      version: '>=4.0.0',
      optional: false,
      // @ts-expect-error
      content: {
        files: [
          './runtime/components/**/*.{vue,mjs,ts}',
          './runtime/*.{mjs,js,ts}',
        ],
      },
    },
    'motion-v': {
      version: '>=1.7.2',
      optional: false,
    },
    // '@nuxtjs/tailwindcss': {
    //   overrides: {
    //     config: {
    //       content: {
    //         files: [
    //           './runtime/components/**/*.{vue,mjs,ts}',
    //           './runtime/*.{mjs,js,ts}',
    //         ],
    //       },
    //     },
    //   },
    // },
  },
  setup(options, nuxt) {
    const resolver = createResolver(import.meta.url)

    // Add all components from the runtime/components directory
    addComponentsDir({
      path: resolver.resolve('./runtime/components'),
      prefix: options.prefix,
      global: true,
      watch: false,
    })

    // Do not add the extension since the `.ts` will be transpiled to `.mjs` after `npm run prepack`
    addPlugin(resolver.resolve('./runtime/plugin'))

    // Add composables
    nuxt.hook('imports:dirs', (dirs) => {
      dirs.push(resolver.resolve('./runtime/composables'))
    })
  },
})

is it correct it still not working changes it nuxt ui

kapa.ai•4d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Your approach to using moduleDependencies to ensure @nuxt/ui is installed is correct according to the latest Nuxt module authoring practices. However, the way you are trying to configure Tailwind's content scanning via moduleDependencies for @nuxt/ui is not supported or documented in the official sources. The content property you are passing is not a recognized option for @nuxt/ui and will not affect Tailwind's scanning behavior. Key points from the knowledge sources: - When using Nuxt UI, you do not need to install or configure @nuxtjs/tailwindcss separately. Nuxt UI manages Tailwind CSS for you, and you should not attempt to override its Tailwind config via moduleDependencies Nuxt UI Installation. - To ensure Tailwind scans your module's components, the recommended approach is to use the @source directive in your CSS file. For example, in app/assets/css/main.css:

  @import "tailwindcss";
  @import "@nuxt/ui";
  @source "../../../node_modules/your-module-name/runtime/components/**/*";

  @import "tailwindcss";
  @import "@nuxt/ui";
  @source "../../../node_modules/your-module-name/runtime/components/**/*";

This tells Tailwind to scan your module's components for utility classes, as described in the Nuxt UI + Content integration docs Nuxt UI + Content Integration. - The moduleDependencies property is for ensuring modules are installed and for basic config overrides, but it does not provide a way to inject Tailwind's content scanning paths into Nuxt UI or Tailwind itself Module Definition. Summary of what you should do: - Do not try to configure Tailwind's content option via moduleDependencies for @nuxt/ui—this is not supported. - Do use the @source directive in your main CSS file to explicitly tell Tailwind to scan your module's components. - Your use of addComponentsDir, addPlugin, and the composables hook is correct for exposing your module's features. Example for your main CSS file:

@import "tailwindcss";
@import "@nuxt/ui";
@source "../../../node_modules/nuxt-motion-block/runtime/components/**/*";

@import "tailwindcss";
@import "@nuxt/ui";
@source "../../../node_modules/nuxt-motion-block/runtime/components/**/*";

Replace the path as needed to match your module's location. If you follow this approach, Tailwind will scan your module's components for utility classes, and you do not need to modify the Nuxt UI or Tailwind config programmatically from your module. If you are still having issues, please ensure: - Your module is installed as a dependency in your Nuxt project. - The @source path is correct and points to your module's components. - You have restarted your dev server after making these changes. If you need more advanced Tailwind configuration, you may need to instruct users to extend their own Tailwind setup, but for most Nuxt UI-based projects, the @source directive is the recommended and supported solution. --- In summary:
Your current approach to force Tailwind scanning via moduleDependencies is not supported. Use the @source directive in your CSS as described in the Nuxt UI documentation to ensure Tailwind scans your module's components for utility classes Nuxt UI + Content Integration. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4d ago

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

Muhammad KhizarOP•4d ago

I fixed it I am sharing here if anybody has issue here is fix found might not perfect but for me its working 🙂

// module.ts
    nuxt.options.css.push(resolver.resolve('./runtime/tailwind.css'))

// module.ts
    nuxt.options.css.push(resolver.resolve('./runtime/tailwind.css'))

create file in runtime tailwindcss

@import "tailwindcss";
@import "@nuxt/ui";

@source "./components";

@import "tailwindcss";
@import "@nuxt/ui";

@source "./components";

Orbis•3d ago

Do you really need this?

Muhammad KhizarOP•3d ago

my idea is have nuxt ui component and then extend functionality on top it that's it their is any better idea @Orbis

Orbis•3d ago

I mean the custom resolver stuff 🤔 I think nuxt.config css prop should do the job

Muhammad KhizarOP•9h ago

oh ok can it do it for module too ? thanks

Gaming

Programming

Can we force Tailwindcss(nuxt ui) scan module for css

Did you find this page helpful?