search

saadeghi / daisyui

🌼 🌼 🌼 🌼 🌼  The most popular, free and open-source Tailwind CSS component library
https://daisyui.com
MIT License
34.13k stars 1.3k forks source link

bug: `mb-*` override by `timeline-compact` when used with `timeline-start` but not `timeline-end` #3224

Open HarryHung opened 1 month ago

HarryHung commented 1 month ago

What version of daisyUI are you using?

v4.12.10

Which browsers are you seeing the problem on?

All browsers

Reproduction URL

https://play.tailwindcss.com/90vptzttvW

Describe your issue

I notice that when a timeline is built with timeline-compact class, mb-10 or any bottom margin class is overriden in items with timeline-start class, but not those with timeline-end class, making the separation between items inconsistency.

This behaviour is observable in DaisyUI own example when it switch to a compact timeline: https://daisyui.com/components/timeline/#timeline-with-icon-snapped-to-the-start

My own React module built based on the example code also have the same issue, it could be workaround by marking mb-* class as important (e.g. !mb-10)

github-actions[bot] commented 1 month ago

Thank you @HarryHung for reporting issues. It helps daisyUI a lot 💚
I'll be working on issues one by one. I will help with this one as soon as a I find a solution.
In the meantime providing more details and reproduction links would be helpful.

saadeghi commented 1 month ago

Will be fixed in daisyUI 5.
Until then you can use pb-10 instead. (or !mb-10)

HarryHung commented 1 month ago

Thank you for the info and your effort. I am looking forward to v5.