Search code examples
tailwind-csstailwind-uinav-pills

Pills sticking together even when using margin - Tailwind


I have these pills that look fine when I'm using full screen but if I minimize the screen they all stack together. I'm having trouble understanding why because I have margin on them. Is there something else you should use for pills to add margin?

Tailwind Playground Link: https://play.tailwindcss.com/DZQUeJAQBf?size=224x720


Solution

  • The problem with your solution is that if the text wraps into a newline there is no margin attached because it's kind of the same row but automatically wrapped.

    You could use sth. like flex-box to arrange your pills in groups. https://play.tailwindcss.com/9YtIfBxPRe?size=160x720