使用Nuxt UI时如何修改tailwind.config文件的目录？

由于Nuxt UI已内置@nuxtjs/tailwindcss模块，无需手动将其添加到modules数组中，你可以直接在Nuxt配置文件（nuxt.config.ts或nuxt.config.js）里通过tailwindcss字段指定自定义的配置文件路径：

1. 在Nuxt配置文件中添加tailwindcss配置项，设置configPath为目标存储路径：

export default defineNuxtConfig({
  // 保留原有Nuxt UI配置（如有）
  ui: {
    // ...
  },
  tailwindcss: {
    // 示例：将配置文件放在项目根目录的config文件夹下
    configPath: './config/tailwind.config.ts'
  }
})

2. 按照指定路径创建对应的Tailwind配置文件，比如上述示例中的./config/tailwind.config.ts，在文件内编写自定义配置即可：

export default {
  content: [
    './components/**/*.{js,vue,ts}',
    './layouts/**/*.vue',
    './pages/**/*.vue',
    './plugins/**/*.{js,ts}',
    './app.vue'
  ],
  theme: {
    extend: {
      // 你的自定义主题配置
    }
  },
  plugins: []
}

只要保证configPath指向的路径正确，Nuxt就会自动加载该路径下的Tailwind配置，无需额外操作。

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