List bullets don't work with flex items #18249
-
|
What version of Tailwind CSS are you using? v4.1.8 What browser are you using? Chrome What operating system are you using? macOS Reproduction URL My Example Describe your issue Using flex or really any display classes on list items produces strange behavior. Either the bullets don't show up or the content drops to the next line. Unless I'm just doing it wrong. |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments
-
|
Hey! This is expected behavior because the default If you want to keep the list bullets then you either have to:
In the last case, if you then use Some examples: https://play.tailwindcss.com/CrKIdxA9D0 Also don't use Hope this helps! |
Beta Was this translation helpful? Give feedback.
-
|
@RobinMalfait Thanks for the explanation and examples! |
Beta Was this translation helpful? Give feedback.
Hey!
This is expected behavior because the default
displayvalue of an<li>islist-item, but you are explicitly overriding it to bedisplay: flexinstead, which loses thelist-itembehavior.If you want to keep the list bullets then you either have to:
<li>and use nested elements that have flex behaviorIn the last case, if you then use
inline-flexinstead offlexeverything stays inline.Some examples: https://play.tailwindcss.com/CrKIdxA9D0
Also don't use
blockon thelibecause that would also override the defaultdisplaybehavior again.Hope this helps!