Nuxt JS构建后Tailwind arbitrary values生产环境样式失效如何解决

问题现象 #

开发模式执行npm run dev时所有样式正常，生产构建后执行npm run start，所有通过Tailwind arbitrary values（任意值）语法编写的样式全部失效，失效样式示例：

<div class="text-[#0074C9] text-5xl font-bold leading-[60px] py-2 tracking-[-0.022em] lg:mr-[90px]">
  ...
</div>

项目已完成Tailwind官方Nuxt基础配置，使用SASS作为样式预处理器。

修复步骤 #

• 修正tailwind.config.js扫描路径 #

  Tailwind v3默认使用JIT模式按需生成样式，生产构建时会基于content配置的路径静态扫描所有类名，未被扫描到的类会被Tree Shaking移除。确保content覆盖所有存在Tailwind类名的文件路径：

  // tailwind.config.js
  module.exports = {
    content: [
      "./components/**/*.{js,vue,ts}",
      "./layouts/**/*.vue",
      "./pages/**/*.vue",
      "./plugins/**/*.{js,ts}",
      "./nuxt.config.{js,ts}",
      "./app.vue",
      "./composables/**/*.{js,ts}"
    ],
    theme: {
      extend: {},
    },
    plugins: [],
  }
  

• 调整nuxt.config构建配置 #

  显式开启Tailwind JIT模式，修正PostCSS处理顺序，避免生产环境CSS压缩工具错误篡改带特殊字符的任意值类名：

  // nuxt.config.js/ts
  export default {
    // 引入@nuxtjs/tailwindcss模块
    modules: ['@nuxtjs/tailwindcss'],
    // Tailwind模块配置
    tailwindcss: {
      jit: true,
      cssPath: '~/assets/css/main.scss', // 替换为你的SASS全局入口实际路径
      configPath: '~/tailwind.config.js'
    },
    // PostCSS配置
    postcss: {
      plugins: {
        tailwindcss: {},
        autoprefixer: {},
        ...(process.env.NODE_ENV === 'production' ? {
          cssnano: {
            preset: ['default', {
              minifySelectors: false, // 禁止压缩时修改选择器类名
              normalizeWhitespace: false
            }]
          }
        } : {})
      }
    }
  }
  

• 检查SASS入口文件写法 #

  全局SASS入口中Tailwind指令必须顶层书写，不能嵌套在选择器、条件语句或mixin内，否则会导致样式生成异常：

  /* assets/css/main.scss 正确写法 */
  @tailwind base;
  @tailwind components;
  @tailwind utilities;
  
  // 其他自定义SASS样式写在Tailwind指令之后
  

• 清理缓存重新构建 #

  配置修改完成后先清除构建缓存，避免旧缓存导致配置不生效：

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

注意事项 #

所有Tailwind类名（包括任意值类）必须以完整字符串形式静态存在于代码中，禁止使用字符串拼接动态生成类名（例如`text-[${color}]`这类写法），否则静态扫描无法识别，对应样式不会被生成。

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