Vue.js生产环境中Tailwind的col-start-n类无法正常工作

现象 #

• 本地运行时，两张卡片分别显示在两行，符合预期布局。
• 执行yarn serve --mode production运行生产版本时，两张卡片挤在同一行，且其中一张顶部略低于另一张。
• 浏览器调试时直接修改col-start-n的值，完全没有作用。

问题代码片段 #

<div class="flex-grow flex-col overflow-auto max-h-screen w-full dark:text-gray-300 main-body">
  <div class="m-auto pt-4 lg:grid lg:grid-cols-8 space-y-12">
    <div class="h-64 max-h-screen lg:col-span-4 lg:col-start-3">...</div>
    <div class="h-64 max-h-screen lg:col-span-4 lg:col-start-3">...</div>
  </div>
</div>

Tailwind 配置文件 #

module.exports = {
  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  darkMode: 'class', // or 'media' or 'class'
  theme: {
    extend: {
      fontFamily: {
        nunito: ['nunito', 'sans'],
        cinzel: ['cinzel', 'sans-serif'],
        lora: ['lora', 'sans-serif']
      },
      listStyleType: {
        square: 'square'
      },
      boxShadow: {
        'sm-white': '0 1px 2px 0 rgba(255, 255, 255, 0.05)',
        white: '0 1px 3px 0 rgba(255, 255, 255, 0.1), 0 1px 2px 0 rgba(255, 255, 255, 0.06)',
        'md-white': '0 4px 6px -1px rgba(255, 255, 255, 0.1), 0 2px 4px -1px rgba(255, 255, 255, 0.06)',
        'lg-white': '0 10px 15px -3px rgba(255, 255, 255, 0.1), 0 4px 6px -2px rgba(255, 255, 255, 0.05)',
        'xl-white': '0 20px 25px -5px rgba(255, 255, 255, 0.1), 0 10px 10px -5px rgba(255, 255, 255, 0.04)',
        '2xl-white': '0 25px 50px -12px rgba(255, 255, 255, 0.25)',
        '3xl-white': '0 35px 60px -15px rgba(255, 255, 255, 0.3)',
        'inner-white': 'inset 0 2px 4px 0 rgba(255, 255, 255, 0.06)'
      }
    },
    container: {
      center: true
    }
  },
  variants: {
    extend: {
      boxShadow: ['dark']
    }
  },
  plugins: []
}

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