Nuxt 2中执行npm run start时Tailwind @apply失效问题

以下是针对「npm run dev 功能正常，npm run build + npm run start 后按钮 Tailwind 样式未应用」问题的排查和解决步骤：

1. 检查 Tailwind 清除（Purge）配置 #

确保 tailwind.config.js 中的 purge 数组包含所有使用 Tailwind 样式的文件路径，避免构建时误删有效样式：

module.exports = {
  purge: [
    './components/**/*.{vue,js}',
    './layouts/**/*.vue',
    './pages/**/*.vue',
    './plugins/**/*.{js,ts}',
    './nuxt.config.{js,ts}'
  ],
  // 其他 Tailwind 配置项...
}

2. 确认 Nuxt CSS 引入配置 #

在 nuxt.config.js 中确保正确引入你的 Sass 文件，路径无误：

export default {
  css: [
    '~/assets/css/main.sass'
  ],
  // 其他 Nuxt 配置项...
}

3. 验证 PostCSS 配置 #

检查项目根目录的 postcss.config.js，确保 Tailwind 和 Autoprefixer 插件正确配置：

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {}
  }
}

同时确认已安装必要依赖：tailwindcss、postcss、autoprefixer，版本需适配 Nuxt 2（可执行 npm list tailwindcss postcss autoprefixer 查看版本）。

4. 排查 Sass 依赖兼容性 #

Nuxt 2 对 Sass 相关依赖版本有要求，避免因版本过高导致构建异常：

• 推荐安装 sass-loader@^10.1.1 和 node-sass@^6.0.1
• 执行以下命令安装适配版本：

npm install --save-dev sass-loader@10.1.1 node-sass@6.0.1

5. 清理缓存后重新构建 #

旧缓存可能导致构建异常，执行以下命令清理后重新构建：

rm -rf .nuxt node_modules/.cache
npm run build
npm run start

6. 检查主 Sass 文件的 Tailwind 导入 #

确认 ~/assets/css/main.sass 中正确导入 Tailwind 指令：

@tailwind base
@tailwind components
@tailwind utilities

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