Theo's Typesafe Cult•15mo ago

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 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

4 Replies

Unknown User•15mo ago

Message Not Public

MagerX•15mo ago

<div className="flex flex-wrap justify-evenly">
            <Link href="#" className="font-bold text-blue flex-initial px-4">
              Home
            </Link>
            <hr className="mx-auto mt-1 h-4 w-1 rounded border-0 bg-mid-blue xl:block" />
            <Link href="#" className="text-nvy-blue font-bold flex-initial px-4">
              Classes
            </Link>
            <hr className="mx-auto mt-1 h-4 w-1 rounded border-0 bg-mid-blue xl:block" />
            <Link href="#" className="font-bold text-navy-blue flex-initial px-4">
              Retails Parts
            </Link>
            <hr className="mx-auto mt-1 h-4 w-1 rounded border-0 bg-mid-blue xl:block" />
            <Link href="#" className="font-bold text-navy-blue flex-initial px-4">
              Scuba Trips & Events
            </Link>
            <hr className="mx-auto mt-1 h-4 w-1 rounded border-0 bg-mid-blue xl:block" />
            <Link href="#" className="font-bold text-navy-blue flex-initial px-4">
              Contact Us
            </Link>
          </div>

<div className="flex flex-wrap justify-evenly">
            <Link href="#" className="font-bold text-blue flex-initial px-4">
              Home
            </Link>
            <hr className="mx-auto mt-1 h-4 w-1 rounded border-0 bg-mid-blue xl:block" />
            <Link href="#" className="text-nvy-blue font-bold flex-initial px-4">
              Classes
            </Link>
            <hr className="mx-auto mt-1 h-4 w-1 rounded border-0 bg-mid-blue xl:block" />
            <Link href="#" className="font-bold text-navy-blue flex-initial px-4">
              Retails Parts
            </Link>
            <hr className="mx-auto mt-1 h-4 w-1 rounded border-0 bg-mid-blue xl:block" />
            <Link href="#" className="font-bold text-navy-blue flex-initial px-4">
              Scuba Trips & Events
            </Link>
            <hr className="mx-auto mt-1 h-4 w-1 rounded border-0 bg-mid-blue xl:block" />
            <Link href="#" className="font-bold text-navy-blue flex-initial px-4">
              Contact Us
            </Link>
          </div>

I pivoted back to hr but the problem current issue is that when 1 item wraps, I want the justify-evently to wrap based on all of the new space, but instead just the item that overlaps goes to the new line

Unknown User•15mo ago

Message Not Public

Vincent Udén•15mo ago

You can also checkout container queries, they could be useful in this case

Gaming

Programming

tailwind css hide divide when wrapping to new line