bug: flatpickr css not working properly

[Reyzan]

What version of FlyonUI are you using?

v1.3.0

Which browsers are you seeing the problem on?

Chrome, All browsers

Reproduction URL

https://flyonui.com/docs/third-party-plugins/flatpickr/

Describe your issue

Bug Report: FlyonUI v1.3.0 - Flatpickr CSS Not Applying Correctly

Description

There is an issue in FlyonUI v1.3.0 when using Flatpickr. The CSS styles are not being applied correctly, causing incorrect rendering.

Tech Stack

• Laravel
• Vite
• Livewire + Volt

Steps to Reproduce

1. Install FlyonUI v1.3.0 and Flatpickr.
2. Configure TailwindCSS and FlyonUI as follows:

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
	content: [
		"./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php",
		"./storage/framework/views/*.php",
		"./resources/views/**/*.blade.php",
		"./node_modules/flyonui/dist/js/*.js",
		"./node_modules/flatpickr/**/*.js",
	],
	plugins: [require("flyonui"), require("flyonui/plugin")],
	flyonui: {
		vendors: true,
	},
};

3. Configure app.js which is compiled by Vite:

resources/js/app.js

import.meta.glob(["../images/**"]);
import "flyonui/flyonui";
import "./bootstrap";
import flatpickr from "flatpickr";
import "flatpickr/dist/flatpickr.css";

document.addEventListener("livewire:navigated", () => {
	window.HSStaticMethods.autoInit();
	// Initialize Flatpickr globally
	window.flatpickr = flatpickr;
});

4. Run the application and check if Flatpickr's styles are correctly applied.

Expected Behavior

Flatpickr should apply its styles correctly when initialized.

Actual Behavior

• Flatpickr does not apply its styles properly.
• The date picker appears unstyled or incorrectly styled.

Additional Information

• FlyonUI Version: v1.3.0
• Flatpickr Version: Latest (at time of writing)
• TailwindCSS Version: 3.4.17
• Browser: Chrome / Firefox / Edge
• Laravel Version: 12

Screenshot

The year is missing and prev month button is not in correct position

[github-actions]

Hi @Reyzan

Thank you for your support in helping us improve FlyonUI!

We’ve received your submission and will respond within few business days. Our team handles issues one at a time, and we’ll be reviewing yours as soon as possible.

In the meantime, any additional details or a reproducible example would be greatly appreciated and will help us resolve the issue more efficiently.

Thank you for your patience and understanding!

[yagnikvamja]

Hello @Reyzan ,

The issue arises due to the precedence of FlyonUI and Flatpickr CSS. To ensure the correct styling, the Final Output CSS should be placed after the Flatpickr CSS. You may refer to the image below, which illustrates the CSS precedence for better clarity.

By following this approach, the issue will be resolved, and the proper styling will be applied effectively.

[Reyzan]

Thanks, @yagnikvamja for the instructions.

Actually, I’ve moved to FlyonUI 2.0 and am currently waiting for Flatpickr to be included in FlyonUI 2.0.