Nuxt应用配置Tailwind自定义字体时tailwind.css被tailwind.min.css覆盖

你遇到的自定义tailwind.css被tailwind.min.css覆盖的问题，核心是@nuxtjs/tailwindcss模块默认会自动注入生成的Tailwind样式，优先级高于你手动引入的自定义样式文件，按以下步骤处理即可解决：

步骤1：关闭Tailwind模块的自动CSS注入 #

打开nuxt.config.js，找到buildModules（Nuxt 2）或modules（Nuxt 3）中@nuxtjs/tailwindcss的配置项，添加cssPath: false关闭自动注入，避免重复生成样式覆盖你的自定义配置：

// nuxt.config.js
module.exports = {
  buildModules: [
    '@nuxtjs/tailwindcss'
  ],
  // 新增tailwind配置项
  tailwindcss: {
    cssPath: false // 关闭自动注入样式
  },
  css: ["~assets/css/tailwind.css"], // 保留你手动引入的自定义样式
  // 其余原有配置保持不变
}

步骤2：校验PostCSS配置 #

确认nuxt.config.js中PostCSS插件配置正确，无重复引入规则：

// nuxt.config.js
module.exports = {
  build: {
    postcss: {
      plugins: {
        tailwindcss: {},
        autoprefixer: {}
      }
    }
  }
}

步骤3：适配Tailwind版本（可选） #

如果你使用的是Tailwind CSS v3版本，需要将tailwind.config.js中的purge字段替换为content字段，配置内容保持不变即可。

步骤4：清理缓存重启服务 #

删除项目根目录下的.nuxt缓存文件夹，再重新执行启动命令：

# Windows用户手动删除.nuxt文件夹后执行
npm run dev

# Mac/Linux用户执行
rm -rf .nuxt && npm run dev

相关参考截图
#

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