5 replies

tailwind css hide divide when wrapping to new line

Hey guys, I'm trying to get the styling right for my footer and I've been really struggling with getting the menu dividers to work with me. I finally found out about

divide-x

divide-x

but I'm running into one last small issue when the size occurs.

<div className="flex flex-wrap divide-x-4 divide-black justify-evenly">
  <Link href="#" className="px-8 font-bold text-blue flex-initial">
    Home
  </Link>
  <Link
    href="#"
    className="text-nvy-blue px-8 font-bold flex-initial"
  >
    Classes
  </Link>
  <Link
    href="#"
    className="px-8 font-bold text-navy-blue flex-initial"
  >
    Retails Parts
  </Link>
  <Link
    href="#"
    className="px-8 font-bold text-navy-blue flex-initial"
  >
    Scuba Trips & Events
  </Link>
  <Link href="#" className="px-8 font-bold text-navy-blue">
    Contact Us
  </Link>
</div>

<div className="flex flex-wrap divide-x-4 divide-black justify-evenly">
  <Link href="#" className="px-8 font-bold text-blue flex-initial">
    Home
  </Link>
  <Link
    href="#"
    className="text-nvy-blue px-8 font-bold flex-initial"
  >
    Classes
  </Link>
  <Link
    href="#"
    className="px-8 font-bold text-navy-blue flex-initial"
  >
    Retails Parts
  </Link>
  <Link
    href="#"
    className="px-8 font-bold text-navy-blue flex-initial"
  >
    Scuba Trips & Events
  </Link>
  <Link href="#" className="px-8 font-bold text-navy-blue">
    Contact Us
  </Link>
</div>

I am aiming to make it so "Scuba Trips & Events" does not have the preceding divider when the resize takes it to the next line

tailwind css hide divide when wrapping to new line

Similar Threads