javascript - Tailwind Flowbite Datepicker dropdown UI problem on "npm run prod" minification. Class not added

admin管理员组

文章数量:1431398

I have a working Laravel project with Tailwind CSS I have also used Flowbite Datepicker using CDN to include the datepicker JavaScript.

The project is working fine and the date-picker is showing nicely. But when I run the npm run prod to minify the project the date-picker dropdown is not showing correctly.

Included the images and code.

Kindly help.

<script src=".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 while in DEV

Image while in Production

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();
}

I have a working Laravel project with Tailwind CSS I have also used Flowbite Datepicker using CDN to include the datepicker JavaScript.

The project is working fine and the date-picker is showing nicely. But when I run the npm run prod to minify the project the date-picker dropdown is not showing correctly.

Included the images and code.

Kindly help.

<script src="https://cdnjs.cloudflare./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 while in DEV

Image while in Production

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();
}

• javascript
• npm
• datepicker
• tailwind-css
• flowbite

Share Improve this question Follow edited Apr 6, 2023 at 12:58 B.M. asked Apr 6, 2023 at 7:15 B.M.B.M. 33822 gold badges44 silver badges1919 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Of course, since the element is rendered in the DOM, the postcss and vite (laravel-mix in your case) watchers are not aware of the classes you are demanding, so in production (minified css) it will never display correctly.

try to put this above you calendar code, then, run npm run build

<div class="hidden">
    <div class="days">
        <div class="days-of-week grid grid-cols-7 mb-1 dow block flex-1 leading-9 border-0 rounded-lg cursor-default text-center text-gray-900 font-semibold text-sm"></div>
        <div class="datepicker-grid w-64 grid grid-cols-7 block flex-1 leading-9 border-0 rounded-lg cursor-default text-center text-gray-900 font-semibold text-sm h-6 leading-6 text-sm font-medium text-gray-500 dark:text-gray-400"></div>
    </div>
    <div class="calendar-weeks">
        <div class="days-of-week flex"><span class="dow h-6 leading-6 text-sm font-medium text-gray-500 dark:text-gray-400"></span></div>
        <div class="weeks week block flex-1 leading-9 border-0 rounded-lg cursor-default text-center text-gray-900 font-semibold text-sm"></div>
    </div>
</div>

Edit.

For best practices and changes in processing files with vite and tailwindcss classes, put:

'./resources/js/**/*.js',

on tailwind.cofig.js file. it's all

Had the same issue. Turned out I was missing adding the flowbite.min.css as stated in the docs. https://flowbite./docs/getting-started/quickstart/#include-via-cdn

As I need an urgent workaround for the production environment and found no other option other than downloading the datepicker.min.js and pasting the code under the script tag in the blade file.

Now on running "npm run prod" the CSS classes mentioned in the JS is also included while minifying.

The above workaround is Working fine.

Waiting for other better solutions. Thanks.

本文标签：