CSS - Code working in npm run start but not npm run build

My code is simply trying to rotate the hamburger menu on open.

I have JS that toggles open class on button click. Which works fine. But this particular CSS (SCSS) code doesn't get compiled on npm run build (NODE_ENV=production webpack --mode=production). This works fine running npm start (NODE_ENV=development webpack serve --mode development). I am using SCSS, Tailwind and vanilla JS. I have added other SCSS in the same file and tested the JS which is also fine. What can I do to debug this issue? The CSS seems valid to me

.open .hamburger__top-bun {
  transform: rotate(45deg);
}

.open .hamburger__bottom-bun {
  transform: rotate(-45deg);
}

HTML

<button data-behaviour="navToggle" id="menuBtn" class="z-100 hamburger flex justify-center items-center lg:hidden focus:outline-none" type="button">
  <span class="hamburger__top-bun"></span>
  <span class="hamburger__bottom-bun"></span>
</button>

JS

const navToggle = document.querySelector('[data-behaviour="navToggle"]')
navToggle.addEventListener('click', function () {
    const btn = document.getElementById('menuBtn');
    const nav = document.getElementById('mobile-menu');

    btn.classList.toggle('open');
    nav.classList.toggle('flex');
    nav.classList.toggle('hidden');
    console.log(btn);
});

Via Active questions tagged javascript - Stack Overflow https://ift.tt/grMIEFY