Tabs not working when built - Vue.js, Laravel, Tailwindcss

Describe the bug When running the app locally under npm run dev everything works fine. This changes once the app is published to the production server and npm run build is used.

To Reproduce Steps to reproduce the behavior:

Terminal command: npm run build

Expected behavior For the behaviour to be the same as the dev enviroment.

Desktop (please complete the following information):

OS: Win 11
Browser: Chrome
Version: 109.0.5414.94

Console Error

tailwind.config.js

const defaultTheme = require('tailwindcss/defaultTheme');

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './vendor/laravel/jetstream/**/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
        './resources/**/*.vue',
        './src/**/*.{html,js}',
        './node_modules/tw-elements/dist/js/**/*.js',
        "./node_modules/flowbite/**/*.js"
    ],
    options: {
        safelist: ['grid-cols-2', 'grid-cols-3', 'grid-cols-4', 'grid-cols-5', 'pr-2', 'hidden', 'active']
    },
    theme: {
        borderRadius: {
            'none': '0',
            'sm': '0.125rem',
            DEFAULT: '0.25rem',
            'md': '0.375rem',
            'lg': '0.5rem',
            'full': '9999px',
            'large': '12px',
            'post': '2.5rem',
        },
        boxShadow: {
            sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
            DEFAULT: '0 1px 3px 0 #ffffff4d, 0 1px 2px 0 #ffffff0f',
            md: '0 4px 6px -1px #ffffff4d, 0 2px 4px -1px #ffffff0f',
            lg: '0 10px 15px -3px #ffffff4d, 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
            xl: '0 20px 25px -5px #ffffff4d, 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
            '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
            '3xl': '0 35px 60px -15px rgba(0, 0, 0, 0.3)',
            inner: 'inset 0 2px 4px 0 #ffffff0f',
            none: 'none',
        },
        extend: {
            prose: {
                css: {
                    maxWidth: '100ch',
                },
            },
            fontFamily: {
                sans: ['Nunito', ...defaultTheme.fontFamily.sans],
            },
            animation: {
                'spin-slow': 'spin 15s linear infinite',
            }
        },
    },
    variants: {
        extend: {},
    },
    plugins: [
        require('@tailwindcss/forms'),
        require('@tailwindcss/typography'),
        require('tailwindcss-textshadow'),
        require('tw-elements/dist/plugin'),
        require('flowbite/plugin')
    ],
};

Schedule.vue

<template>
    <div>
        <div class="grid grid-cols-1 md:grid-cols-1">
            <div class="p-2 h-full">
                <div class="px-12">
                    <h1 class="font-bold text-3xl text-white leading-loose w-full text-center">Schedule</h1>
                    <hr style="border-color: #65b4fd !important;" class="border-1 w-4/5 mx-auto">
                </div>
            </div>

            <div class="ml-26 w-3/5 mx-auto">
              <div class="mb-4">
                <ul class="text-sm font-medium text-center divide-x sm:flex" id="myTab" data-tabs-toggle="#myTabContent" role="tablist">
                  <li v-for="day in weekDays" class="w-full schedule-tab mx-1" role="presentation">
                    <button data-active-classes="text-gray-800" class="schedule-btn inline-block w-full p-4 text-white" v-bind:id="day.tag+'-tab'" v-bind:data-tabs-target="'#'+day.tag" type="button" role="tab" v-bind:aria-controls="day.tag" aria-selected="false">
                      {{ day.date }}
                    </button>
                  </li>
                </ul>
              </div>
              <div id="myTabContent" :class="loaded ? '' : 'hidden'">
                <div v-for="djData in djs" class="p-4 rounded-lg hidden" v-bind:id="djData[0]['date']" role="tabpanel" v-bind:aria-labelledby="djData[0]['date']+'-tab'">
                  <div class="grid grid-cols-3 gap-4">
                    <div v-for="(dj, key) in djData.filter(x => x.user !== 0)" :class="dj? '' : 'hidden'">
                      <div class="shadow-lg" v-if="dj.user != 0">
                        <div class="bg-gray-800 text-white shadow-md rounded mb-6">
                          <div class="flex flex-wrap content-start p-2 space-y-4">
                            <img class="w-24 h-24 rounded-full" :src="dj.user_avatar">
                            <div class="flow-root ml-4">
                              <div class="flow-root">
                                <div>
                                  <p class="block font-bold">
                                    {{ dj.name }}
                                  </p>
                                </div>
                              </div>
                              <div class="flow-root">
                                <div>
                                  <p class="block">
                                    {{ dj.time }} - {{ dj.timeEnd }}
                                  </p>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
        </div>
    </div>
</template>

<script>
import axios from "axios";
import moment from 'moment-timezone';

function currentWeek() {
  let weekDays = []
  let curr = new Date

  for (let i = 1; i <= 7; i++) {
    let first = curr.getDate() - curr.getDay() + i
    let day = new Date(curr.setDate(first)).toISOString().slice(0, 10)
    weekDays.push({'date': moment(day).format('DD MMM YYYY'), 'tag': moment(day).format('dddMMM')})
  }

  return weekDays;
}

export default {
    name: "Request",
    metaInfo: {
        title: 'Simulator FM',
        titleTemplate: '%s | Schedule'
    },
    data() {
      let loaded = false;
      let weekDays = currentWeek();
      return {
          loaded,
          djs: [],
          weekDays,
      };
    },
    async mounted() {
      this.loadDjs();
    },
    methods: {
        loadDjs: function () {
            axios.get(import.meta.env.VITE_APP_URL+'/api/v1/timetable?year='+this.year+'&week='+this.week+'&timezone='+moment.tz.guess())
                .then((response) => {
                    this.djs = response.data.data;
                    this.loaded = true;
                })
                .catch(function (error) {
                    console.log(error);
                })
        },
    }
}
</script>

themesberg / flowbite

Tabs not working when built - Vue.js, Laravel, Tailwindcss #424