Tailwind class not working in production with Vue.js - vue.js

Question

For some reason, col-start-n doesn't seem to be working in the production version of my code. If I run it locally, I get the expected result which is 2 cards in 2 different rows, like so:
correct placement
When I run it with yarn serve -mode production, I get them in the same row, with the top of one slightly below the other:
incorrect placement
This is the code snippet where I'm running into an issue. I've even tried directly editing the value for col-start-n directly when inspecting the element, but it doesn't seem to do anything.
<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>
And here's my tailwind configuration:
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: []
}

Answer 1

You can simply use the flex classes only , you don't need to use grid classes then.
<script src="https://cdn.tailwindcss.com"></script>
<div class="flex-grow container mx-auto flex-col justify-center overflow-auto max-h-screen dark:text-gray-300 ">
<div class="m-auto pt-4 space-y-12">
<div class="h-64 max-h-screen bg-slate-200 text-center p-10">Card 1</div>
<div class="h-64 max-h-screen bg-slate-300 text-center p-10">Card2</div>
</div>
</div>