Writing a Nuxt 3 module with TailwindCSS

import {
  defineNuxtModule,
  createResolver,
  addComponentsDir,
  addImportsDir,
  installModule,
} from "@nuxt/kit";

// Module options TypeScript interface definition
export interface ModuleOptions {}

export default defineNuxtModule<ModuleOptions>({
  meta: {
    name: "my-module",
    configKey: "myModule",
  },
  // Default configuration options of the Nuxt module
  defaults: {},
  async setup(_options, nuxt) {
    const { resolve } = createResolver(import.meta.url);

    // Transpile runtime
    const runtimeDir = resolve("./runtime");

    nuxt.options.modules.push("@nuxtjs/tailwindcss");

    // install TailwindCSS
    await installModule("@nuxtjs/tailwindcss", {
      configPath: resolve(runtimeDir, "tailwind.config"),
    });

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

    await addComponentsDir({
      path: resolve("./runtime/components"), // path of components
      pathPrefix: false, // Prefix component name by its path.
      prefix: "", // Prefix all matched components.
      global: true, // Registers components to be globally available.
    });

    // composables
    addImportsDir(resolve(runtimeDir, "composables"));
  },
});