I have successfully integrated a Laravel project with Tailwind CSS. I have also implemented the Flowbite Datepicker using a CDN to include the necessary JavaScript.
Initially, everything was working fine and the date-picker was displaying correctly. However, after running 'npm run prod' to minify the project, the date-picker dropdown is not appearing as expected.
I have attached both images as well as the code snippet below. Any assistance would be greatly appreciated.
<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.6.3/datepicker.min.js"></script>
<div class="relative">
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
<svg ....</svg>
</div>
<input id="date" datepicker datepicker-autohide datepicker-format="dd/mm/yyyy"
name="date" type="text" readonly="readonly" required autofocus class="form-input
shadow-outline-gray text-sm pl-10 w-full @error('date') bg-red-500 @enderror" placeholder="Select Date">
</div>
Image in Development: https://i.sstatic.net/rFjpW.jpg
Image in Production: https://i.sstatic.net/tuxA6.jpg
webpack.mix.js:
const mix = require('laravel-mix');
mix
.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
require('postcss-import'),
require('tailwindcss'),
require('postcss-nested'),
require('autoprefixer'),
]);
if (mix.inProduction()) {
mix
.version();
}