如何在自定义Nuxt3模块中配置TailwindCSS？

1. 安装必要依赖 #

确保自定义模块及使用该模块的Nuxt项目都安装以下依赖：

npm install tailwindcss postcss autoprefixer @nuxtjs/tailwindcss --save-dev

2. 调整模块核心配置逻辑 #

修改module.ts，通过Nuxt工具函数将模块的Tailwind配置合并到全局，确保组件路径被正确扫描：

import { resolve } from 'path'
import { fileURLToPath } from 'url'
import { defineNuxtModule, addPlugin, addComponent, extendTailwindConfig } from '@nuxt/kit'

export interface ModuleOptions {
  css: boolean
}

export default defineNuxtModule<ModuleOptions>({
  meta: {
    name: '@nuxt-module/polkadotjs-wallet',
    configKey: 'polkadotjs-wallet',
    // 声明模块依赖TailwindCSS模块
    requires: ['@nuxtjs/tailwindcss']
  },

  defaults: {
    css: true,
  },
  setup (options, nuxt) {
    const runtimeDir = fileURLToPath(new URL('./runtime', import.meta.url))
    nuxt.options.build.transpile.push(runtimeDir)

    // 注册模块插件
    addPlugin(resolve(runtimeDir, 'plugin'))

    // 注册模块组件
    const componentsDir = resolve(runtimeDir, "components")
    addComponent({
      name: "Hello",
      filePath: resolve(componentsDir, "Hello.vue")
    })

    // 合并模块的Tailwind配置到全局
    extendTailwindConfig({
      content: {
        files: [
          resolve(runtimeDir, 'components/**/*.{vue,js}'),
          resolve(runtimeDir, '**/*.{vue,js,ts}')
        ]
      },
      theme: {
        extend: {
          fontFamily: {
            sans: ['"Inter var"', ...require('tailwindcss/defaultTheme').fontFamily.sans],
          },
        },
      }
    })

    // 注入Tailwind基础样式
    if(options.css) {
      nuxt.options.css.push(resolve(runtimeDir, "css/tailwind.css"))
    }
  }
})

3. 清理冗余文件 #

删除runtime/tailwind.config.js，避免与通过extendTailwindConfig注入的配置冲突。

4. 验证样式效果 #

在模块组件（如Hello.vue）中添加Tailwind类测试：

<template>
  <div class="bg-blue-500 text-white p-4 rounded-lg">
    测试Tailwind样式
  </div>
</template>

问题根源说明 #

• 原配置中，Nuxt未加载模块内的tailwind.config.js，导致Tailwind无法扫描到模块组件中的类名，因此不会生成对应样式。
• 使用extendTailwindConfig可将模块的Tailwind配置合并到Nuxt全局配置中，确保组件路径被正确识别。
• 声明模块依赖@nuxtjs/tailwindcss，能保证模块加载时Tailwind模块已完成初始化。

内容的提问来源于stack exchange，提问作者rajohs